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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 1x 1x | import useNewProductBanner from "@components/Product/NewProductBanner/hooks";
import { CREATE_DENY_MESSAGE } from "@constants/permissions";
import { PlusIcon } from "@phosphor-icons/react";
import { useProductPermission } from "features/Permissions/AccessControl/hooks";
import ProductBannerBase from "./ProductBannerBase";
import {
CampaignMapperValues,
useCreateCampaignFn,
} from "features/Minibuilders/PaymentFormMinibuilder/useCreateCampaignFn";
import { CampaignModal } from "features/Minibuilders/PaymentFormV2/utils";
import { useLocation } from "react-router-dom";
import { useQueryObserver } from "@sections/PayBuilder/LaunchStep/hooks/useQueryObserver";
import { TQueryDataLaunchStepPaymentFormKey } from "@sections/PayBuilder/LaunchStep/types";
import { QFORM_QUERY_KEY } from "@pages/AcquirerPortal/Enterprises/Modal/constants";
import { useCart } from "@sections/PayBuilder/provider/CartContext";
import ProductActions from "./ProductActions";
import { TCampaignType } from "./types";
import { FundraisersState } from "redux/slices/fundraisers/types";
import {
ActionCreatorWithoutPayload,
ActionCreatorWithPayload,
} from "@reduxjs/toolkit";
type Props = {
title: string;
compact?: boolean;
type?: TCampaignType;
handleSearch?: (value: string) => void;
handleResetSelectedRow?: () => void;
filters?: FundraisersState["names"];
addDateFilter?: ActionCreatorWithPayload<any>;
disableDateFilter?: ActionCreatorWithoutPayload;
search?: string;
};
const mapPathToKey = {
events: "event",
fundraisers: "fundraiser",
memberships: "membership",
sweepstakes: "sweepstake",
invoices: "invoice",
standard: "standard",
products: "product",
};
const ProductBanner = ({
title,
compact,
type,
handleSearch,
handleResetSelectedRow,
filters,
addDateFilter,
disableDateFilter,
search,
}: Props) => {
// TODO: to replace this hook preserving the logic
const { mainStat, parseStats, onOpenAnalytics, data, isLoading } =
useNewProductBanner({
hasEmptyData: false,
analyticsType: "payment-forms",
});
const { remove } =
useQueryObserver<TQueryDataLaunchStepPaymentFormKey>(QFORM_QUERY_KEY);
const { isAddProductAllowed } = useProductPermission();
const { createCampaignFn } = useCreateCampaignFn();
const { pathname } = useLocation();
const { clearCart } = useCart();
const modalKey = pathname.split("/")[2];
const modalName = mapPathToKey[modalKey as keyof typeof mapPathToKey];
const handleCreate = (name: CampaignMapperValues) => {
remove();
clearCart();
return createCampaignFn<CampaignMapperValues>(CampaignModal[name], name);
// NiceModal.show(CREATE_PRE_BUILD_FORM_MODAL);
};
const mainAction = {
hidden: false,
label: "Add Form",
action: () => handleCreate(modalName as CampaignMapperValues),
icon: PlusIcon,
tooltipProps: {
title: CREATE_DENY_MESSAGE,
disableHoverListener: isAddProductAllowed,
},
disabled: !isAddProductAllowed,
};
const dataIsNotReady = data === undefined || isLoading;
const compactActions =
compact &&
type &&
handleSearch &&
handleResetSelectedRow &&
filters &&
addDateFilter &&
disableDateFilter ? (
<ProductActions
type={type}
compact
mainAction={mainAction}
onOpenAnalytics={onOpenAnalytics}
handleSearch={handleSearch}
handleResetSelectedRow={handleResetSelectedRow}
filters={filters}
addDateFilter={addDateFilter}
disableDateFilter={disableDateFilter}
search={search}
/>
) : undefined;
return (
<ProductBannerBase
mainStats={[{ ...mainStat, title: "Total Amount" }]}
parseStats={parseStats}
onOpenAnalytics={onOpenAnalytics}
title={title}
mainAction={mainAction}
isLoading={dataIsNotReady}
compact={compact}
compactActions={compactActions}
/>
);
};
export default ProductBanner;
|