Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 1x | import { NEW_ACTION_DENY_MESSAGE } from "@constants/permissions";
import NiceModal from "@ebay/nice-modal-react";
import { MERCHANT_ADD_EDIT_CUSTOMER_V2 } from "modals/modal_names";
import ProductBannerBase from "features/Products/ProductBannerBase";
import ProductActions from "features/Products/ProductActions";
import { parseAmount } from "@utils/index";
import { useGetCustomersStats } from "hooks/merchant-api/customers";
import { PlusIcon } from "@phosphor-icons/react";
import {
addDateFilter,
disableDateFilter,
selectFilters,
} from "@redux/slices/customers";
import { useAppSelector } from "redux/hooks";
type Props = {
title: string;
canCreate: boolean;
compact?: boolean;
search?: string;
handleSearch?: (value: string) => void;
handleResetSelectedRow?: () => void;
disabled?: boolean;
};
const CustomersBanner = ({
title,
canCreate,
compact,
search = "",
handleSearch,
handleResetSelectedRow,
disabled,
}: Props) => {
const { data, isLoading } = useGetCustomersStats();
const filters = useAppSelector(selectFilters);
const mainStat = {
title: "Customers in CRM",
value: `${parseAmount(data?.totalCustomers || 0, 0)} `,
};
const stats = [
{
title: "Avg Volume Per Customer",
value: parseAmount((data?.avgPerCustomer || 0) / 100) ?? "",
isAmount: true,
},
{
title: "Recurring Customers",
value: data?.recurringCustomers || 0,
},
];
const addCustomer = () => NiceModal.show(MERCHANT_ADD_EDIT_CUSTOMER_V2);
const mainAction = {
label: "Add Customer",
action: addCustomer,
icon: PlusIcon,
tooltipProps: {
title: NEW_ACTION_DENY_MESSAGE,
disableHoverListener: canCreate,
},
disabled: !canCreate,
hidden: false,
};
const dataIsNotReady = data === undefined || isLoading;
return (
<ProductBannerBase
mainStats={[mainStat]}
parseStats={stats}
title={title}
mainAction={mainAction}
disableTransformText
isLoading={dataIsNotReady}
compact={compact}
compactActions={
compact ? (
<ProductActions
type="customers"
compact
mainAction={mainAction}
search={search}
handleSearch={handleSearch ?? (() => {})}
handleResetSelectedRow={handleResetSelectedRow ?? (() => {})}
filters={filters}
addDateFilter={addDateFilter}
disableDateFilter={disableDateFilter}
disabled={disabled}
/>
) : undefined
}
/>
);
};
export default CustomersBanner;
|