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 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 | 12x 68x 68x 68x 68x 12x 68x 68x 68x 68x 68x 68x 68x 68x 68x 22x 10x 10x 68x 48x 12x 68x 68x 68x 68x 68x 68x 68x 68x 68x | import { CURRENCY } from "@constants/constants";
import NiceModal from "@ebay/nice-modal-react";
import { Box, Link, Stack } from "@mui/material";
import CartTotalSection from "@pages/Checkout/components/CartTotalSection";
import { XIcon } from "@phosphor-icons/react";
import { useAppSelector } from "@redux/hooks";
import { selectCart } from "@redux/slices/cart";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import CartItem from "@sections/PayBuilder/components/cart/CartItem";
import useCheckFormType from "@sections/PayBuilder/components/hooks/useCheckFormType";
import PublicFormPolicyFooter from "@sections/PayBuilder/components/PublicFormPolicyFooter";
import { useCart } from "@sections/PayBuilder/provider/CartContext";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import { useIsPreviewMode } from "@sections/PayBuilder/provider/useIsPreviewMode";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme } from "@theme/v2/Provider";
import { parseAmount } from "@utils/index";
import { TERMS_OF_SERVICE_REBRAND_MODAL } from "modals/modal_names";
import { useEffect } from "react";
import { useLocation, useSearchParams } from "react-router-dom";
import CheckoutButton from "../../components/CheckoutButton";
import CheckoutFooter from "../../components/CheckoutFooter";
import GiveDisclaimer from "@features/Merchants/MerchantSidePanel/components/GiveDisclaimer/GiveDisclaimer";
const PARAM_KEYS = ["email"] as const;
function useQueryParams<T extends readonly string[]>(
paramKeys: T,
): { [K in T[number]]: string | null } {
const [searchParams] = useSearchParams();
return paramKeys.reduce((acc, key) => {
(acc as any)[key] = searchParams.get(key) ?? null;
return acc;
}, {} as { [K in T[number]]: string | null });
}
export const Order = ({
onClose,
isLoading,
onSubmit,
paymentSuccessInfo,
isWrappedInAcordion,
hideDeleteButton = false,
isDeclined = false,
isFailed = false,
declineReason,
hasFormErrors = false,
}: any) => {
const { cartItems, addToCart, removeFromCart, fees, subTotal } = useCart();
const { isPreviewMode } = useIsPreviewMode();
const { isSweepstake } = useCheckFormType();
const { isMediumDesktop } = useCustomThemeV2();
const { isCartLoading } = useAppSelector(selectCart);
const { state: locationState } = useLocation();
const params = useQueryParams(PARAM_KEYS);
const defaultEmail = params.email || "";
// Close the modal if no cart items, BUT only if there are no form errors
// This prevents modal from closing when cart is cleared due to validation errors
useEffect(() => {
if (cartItems.length === 0) {
// If there are form errors, keep modal open so user can see and fix them
Eif (!hasFormErrors && onClose) {
onClose();
}
}
}, [cartItems, hasFormErrors]);
return (
<Stack height="100%">
{isWrappedInAcordion ? null : (
<Box
id="order-header"
display="flex"
alignItems="center"
justifyContent="space-between"
>
<GiveText variant="h5" color="primary">
Summary
</GiveText>
<GiveIconButton
Icon={XIcon}
size="medium"
variant="ghost"
onClick={() => {
onClose();
}}
/>
</Box>
)}
<Stack
gap={isSweepstake && isWrappedInAcordion ? 0 : 2}
sx={{
height: "100%",
width: isWrappedInAcordion ? "90%" : isMediumDesktop ? "100%" : "75%",
}}
>
<Box
sx={{
height: isSweepstake ? "auto" : "50%",
minHeight: isSweepstake ? "auto" : "112px",
overflowY: "auto",
}}
>
{" "}
{/* 1 item is 111px with divider for this reason minHegiht to show min 1 item */}
{isSweepstake ? (
<Stack spacing={2} marginTop="20px">
<Stack direction="row" justifyContent="space-between">
<GiveText variant="bodyS">
{cartItems.length > 0 &&
`Sweepstakes x${cartItems[0].quantity}`}
</GiveText>
<GiveText variant="bodyS">
{`${parseAmount(subTotal)} ${CURRENCY}`}
</GiveText>
</Stack>
</Stack>
) : (
cartItems.map((item) => (
<CartItem
key={item.id}
item={{ ...item }}
addToCart={addToCart}
removeFromCart={removeFromCart}
onClose={onClose}
isCheckout
isSuccessDisplayed={Boolean(paymentSuccessInfo)}
isInBottomsheet
hideDeleteButton={hideDeleteButton}
isDisabled={defaultEmail ? false : isLoading || isCartLoading}
/>
))
)}
</Box>
<CartTotalSection cartItems={cartItems} fees={fees} />
{isWrappedInAcordion ? null : (
<PayOut
isPreviewMode={isPreviewMode}
isLoading={isLoading}
onSubmit={onSubmit}
subTotal={subTotal}
isDeclined={isDeclined}
isFailed={isFailed}
declineReason={declineReason}
/>
)}
</Stack>
</Stack>
);
};
export const PayOut = ({
isPreviewMode,
isLoading,
onSubmit,
subTotal,
isDeclined,
isFailed,
declineReason,
}: any) => {
const { isFundraiser } = useCheckFormType();
const { palette } = useAppTheme();
const {
methods: formValues,
parsedValues: { accentColor },
} = usePayBuilderForm();
const hasSelectedEntryError = Boolean(
formValues.formState.errors.Entries?.selectedEntry,
);
const hasSelectedAmountError = Boolean(
formValues.formState.errors.Donations?.selectedAmount,
);
const { methods: leftSidepanelMethods } = usePayBuilderForm();
const payButtonValue = leftSidepanelMethods.watch().Checkout.payButtonText;
Iif (isFundraiser) return null;
return (
<Box sx={{ marginTop: "auto" }}>
<Stack gap="24px" direction="column">
{(isDeclined || isFailed) && (
<GiveDisclaimer
disclaimerType={isDeclined ? "payment_declined" : "payment_failed"}
mspResponseCode={declineReason}
/>
)}
<CheckoutButton
isPreviewMode={isPreviewMode}
isLoading={isLoading}
handleSubmit={isPreviewMode ? null : onSubmit}
accentColor={accentColor}
isDisabled={hasSelectedEntryError || hasSelectedAmountError}
title={payButtonValue}
subTotal={subTotal}
/>
<GiveText
variant="bodyS"
color="primary"
sx={{
textAlign: "center",
}}
>
{`By clicking ${payButtonValue} you agree to GivePayments`}{" "}
<Link
color="inherit"
onClick={() => NiceModal.show(TERMS_OF_SERVICE_REBRAND_MODAL)}
sx={{ cursor: "pointer" }}
>
Terms & Conditions
</Link>
</GiveText>
</Stack>
<div
style={{
height: 10,
width: "90%",
borderTop: `1px solid ${palette.border?.secondary}`,
margin: "16px auto",
}}
/>
<CheckoutFooter
isBottomsheet
isDesktopView={true}
checkoutPolicyContent={<PublicFormPolicyFooter />}
/>
</Box>
);
};
|