| 1 |
import { CheckIcon } from '@heroicons/react/24/outline'; |
| 2 |
import { __ } from '@wordpress/i18n'; |
| 3 |
import { useDispatch, useSelector } from 'react-redux'; |
| 4 |
import ComponentBox from '../../../components/ComponentBox'; |
| 5 |
import { toggleCampaignSelect } from '../../../features/campaigns/campaignSlice'; |
| 6 |
import { useGetDiscountIntentsQuery } from '../../../features/discount/discountApi'; |
| 7 |
import CampaignLoading from './CampaignLoading'; |
| 8 |
import CampaignRows from './CampaignRows'; |
| 9 |
|
| 10 |
const CampaignsList = ({ isLoading, isError, error }) => { |
| 11 |
const { campaign_ids, campaigns, searchTerm } = useSelector( |
| 12 |
(state) => state.campaignState |
| 13 |
); |
| 14 |
const dispatch = useDispatch(); |
| 15 |
|
| 16 |
const { data: discountIntents, isLoading: discountIntentsLoading } = |
| 17 |
useGetDiscountIntentsQuery(); |
| 18 |
|
| 19 |
const handleToggleCampaignMultiSelect = (ids) => { |
| 20 |
if (ids.every((id) => campaign_ids.includes(id))) { |
| 21 |
ids.forEach((id) => { |
| 22 |
dispatch(toggleCampaignSelect(id)); |
| 23 |
}); |
| 24 |
} else { |
| 25 |
ids.forEach((id) => { |
| 26 |
if (!campaign_ids.includes(id)) { |
| 27 |
dispatch(toggleCampaignSelect(id)); |
| 28 |
} |
| 29 |
}); |
| 30 |
} |
| 31 |
}; |
| 32 |
|
| 33 |
if (isError) { |
| 34 |
return ( |
| 35 |
<> |
| 36 |
{error.status !== 403 && ( |
| 37 |
<ComponentBox className="disco-my-8 disco-p-4 disco-bg-white"> |
| 38 |
<div className="disco-text-xl disco-font-bold"> |
| 39 |
{error?.data?.message} |
| 40 |
</div> |
| 41 |
</ComponentBox> |
| 42 |
)} |
| 43 |
</> |
| 44 |
); |
| 45 |
} |
| 46 |
|
| 47 |
return ( |
| 48 |
<> |
| 49 |
<div> |
| 50 |
<table className="disco-table-auto disco-w-full disco-border-separate disco-border-spacing-0 "> |
| 51 |
<thead className="disco-bg-white disco-rounded-lg disco-overflow-hidden"> |
| 52 |
<tr className=""> |
| 53 |
<th |
| 54 |
scope="col" |
| 55 |
className="!disco-font-medium disco-rounded-tl-lg disco-ps-4 disco-text-base disco-z-10 disco-border-b disco-text-left disco-border-gray-100 disco-py-2.5 disco-pr-3" |
| 56 |
> |
| 57 |
<button |
| 58 |
disabled={isLoading} |
| 59 |
onClick={() => |
| 60 |
handleToggleCampaignMultiSelect( |
| 61 |
campaigns?.map( |
| 62 |
(campaign) => campaign.id |
| 63 |
) |
| 64 |
) |
| 65 |
} |
| 66 |
data-cy="select-all-campaigns-checkbox" |
| 67 |
className={`disco-shrink-0 disco-h-4 disco-w-4 disco-rounded disco-border disco-flex disco-justify-center disco-items-center ${ |
| 68 |
campaign_ids.length > 0 && |
| 69 |
campaigns |
| 70 |
?.map((campaign) => campaign.id) |
| 71 |
?.every((id) => |
| 72 |
campaign_ids.includes(id) |
| 73 |
) |
| 74 |
? 'disco-border-primary-dark' |
| 75 |
: 'disco-border-gray-500 ' |
| 76 |
}`} |
| 77 |
> |
| 78 |
{campaign_ids.length > 0 && |
| 79 |
campaigns |
| 80 |
?.map((campaign) => campaign.id) |
| 81 |
?.every((id) => |
| 82 |
campaign_ids.includes(id) |
| 83 |
) && ( |
| 84 |
<CheckIcon className="disco-text-primary-dark" /> |
| 85 |
)} |
| 86 |
</button> |
| 87 |
</th> |
| 88 |
<th |
| 89 |
scope="col" |
| 90 |
className="!disco-font-medium disco-text-base disco-z-10 disco-border-b disco-text-left disco-border-gray-100 disco-py-2.5 disco-pr-3" |
| 91 |
> |
| 92 |
{__('Mode', 'disco')} |
| 93 |
</th> |
| 94 |
<th |
| 95 |
scope="col" |
| 96 |
className="!disco-font-medium disco-text-base disco-z-10 disco-border-b disco-text-left disco-border-gray-100 disco-py-2.5 disco-pr-3" |
| 97 |
> |
| 98 |
{__('Campaign Name', 'disco')} |
| 99 |
</th> |
| 100 |
<th |
| 101 |
scope="col" |
| 102 |
className="!disco-font-medium disco-text-base disco-z-10 disco-border-b disco-text-left disco-border-gray-100 disco-py-2.5 disco-pr-3" |
| 103 |
> |
| 104 |
{__('Intent', 'disco')} |
| 105 |
</th> |
| 106 |
<th |
| 107 |
scope="col" |
| 108 |
className="!disco-font-medium disco-text-base disco-z-10 disco-border-b disco-text-left disco-border-gray-100 disco-py-2.5 disco-pr-3" |
| 109 |
> |
| 110 |
{__('Discount Type', 'disco')} |
| 111 |
</th> |
| 112 |
<th |
| 113 |
scope="col" |
| 114 |
className="!disco-font-medium disco-text-base disco-z-10 disco-border-b disco-text-left disco-border-gray-100 disco-py-2.5 disco-pr-3" |
| 115 |
> |
| 116 |
{__('Created Date', 'disco')} |
| 117 |
</th> |
| 118 |
<th |
| 119 |
scope="col" |
| 120 |
className="!disco-font-medium disco-text-base disco-z-10 disco-border-b disco-text-center disco-border-gray-100 disco-py-2.5 disco-pr-3" |
| 121 |
> |
| 122 |
{__('Status', 'disco')} |
| 123 |
</th> |
| 124 |
<th |
| 125 |
scope="col" |
| 126 |
className="!disco-font-medium disco-rounded-tr-lg disco-text-base disco-z-10 disco-border-b disco-text-center disco-border-gray-100 disco-py-2.5" |
| 127 |
> |
| 128 |
{__('Actions', 'disco')} |
| 129 |
</th> |
| 130 |
</tr> |
| 131 |
</thead> |
| 132 |
{isLoading || discountIntentsLoading ? ( |
| 133 |
<tbody> |
| 134 |
<CampaignLoading line={3} /> |
| 135 |
</tbody> |
| 136 |
) : ( |
| 137 |
<CampaignRows |
| 138 |
searchTerm={searchTerm} |
| 139 |
discountIntents={discountIntents} |
| 140 |
campaigns={campaigns} |
| 141 |
/> |
| 142 |
)} |
| 143 |
</table> |
| 144 |
</div> |
| 145 |
{campaigns.length === 0 && !isLoading && ( |
| 146 |
<div className="disco-mt-4"> |
| 147 |
<p className="disco-text-xl disco-font-medium"> |
| 148 |
{__('Sorry, No Campaign Found!', 'disco')} |
| 149 |
</p> |
| 150 |
</div> |
| 151 |
)} |
| 152 |
</> |
| 153 |
); |
| 154 |
}; |
| 155 |
export default CampaignsList; |
| 156 |
|
