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 | 3x 227x 227x 227x 227x 227x 227x 227x 227x 227x 227x 227x 227x 227x 227x 227x 106x | import NiceModal from "@ebay/nice-modal-react";
import { Grid } from "@mui/material";
import { INVITE_PAH_MODAL } from "modals/modal_names";
import { useFormContext } from "react-hook-form";
import { checkPortals } from "@utils/routing";
import { useGetCurrentMerchantId } from "@hooks/common";
import useMasqueradeReducer from "@hooks/Reducers/useMasqueradeReducer";
import { useAppSelector } from "@redux/hooks";
import { selectSelectedAccount } from "@redux/slices/auth/accounts";
import { useMemo } from "react";
import { AssignToMe } from "components/Merchants/CreateMerchantPanel/modals/components/AssignToMe";
import { TCreatePrimaryAccountHolder } from "components/Merchants/CreateMerchantPanel/types";
import GiveText from "shared/Text/GiveText";
import SectionCardBase from "shared/SidePanel/components/SectionCard/SectionCardBase";
import PreviewInvitationButton from "./PreviewInvitationButton";
type LocalPahProps = {
isProvider?: boolean;
};
export const LocalPah = ({ isProvider }: LocalPahProps) => {
const { watch, setValue } = useFormContext();
const { isMasqueradeMode } = useMasqueradeReducer();
const selectedUser = useAppSelector(selectSelectedAccount);
const values = watch();
const handleClosePrimaryAccountHolder = (
data: TCreatePrimaryAccountHolder,
) => {
setValue("primaryAccountHolder", data);
};
const editHandler = () => {
NiceModal.show(INVITE_PAH_MODAL, {
onClose: handleClosePrimaryAccountHolder,
data: values.primaryAccountHolder,
isEnterprise: isProvider,
});
};
const { email, assignToMe } = values.primaryAccountHolder || {};
const { merchantName, enterprise } = values.merchantInfo || {};
const { isEnterprisePortal } = checkPortals();
const { img } = useGetCurrentMerchantId();
const correctProviderUrl = useMemo(() => {
const enterpriseUsrImg = isMasqueradeMode ? img : selectedUser?.img ?? "";
return isEnterprisePortal
? enterpriseUsrImg
: values.merchantInfo.enterpriseImageUrl;
}, [isMasqueradeMode, isEnterprisePortal, values]);
const actions = {
handleEdit: editHandler,
};
if (!email && !assignToMe) return null;
return (
<SectionCardBase
sx={{ marginLeft: "20px", marginRight: "20px", width: "auto" }}
leftTitle="Primary Account Holder"
actions={actions}
>
{assignToMe ? (
<AssignToMe showCheckbox={false} isProvider={isProvider} />
) : (
<Grid container rowSpacing={0.5} alignItems="center" columnSpacing={2}>
<Grid item xs={6}>
<GiveText variant="bodyS" color="secondary">
Email
</GiveText>
</Grid>
<Grid item xs={6}>
<GiveText sx={{ wordBreak: "break-all" }} variant="bodyS">
{values.primaryAccountHolder?.email}
</GiveText>
</Grid>
<Grid item mt="12px" xs={12} display="flex">
<PreviewInvitationButton
title="Preview Invitation"
senderLogo={correctProviderUrl}
isSendingToProvider={!!isProvider}
receiverName={merchantName}
senderName={enterprise}
isPAHFromMerchantCreation
/>
</Grid>
</Grid>
)}
</SectionCardBase>
);
};
export default LocalPah;
|