@godaddy/react
Version:
The `createCheckoutSession` function creates a new checkout session with GoDaddy's commerce API.
191 lines (189 loc) • 6.23 kB
JavaScript
import { M as Skeleton, O as PaymentMethodType, _ as useConfirmCheckout, g as PaymentProvider, h as usePayPalProvider, o as useCheckoutContext, rt as useGoDaddyContext } from "./checkout-B7yB0DfE.js";
import { k as GraphQLErrorWithCodes } from "./utils-DWBfAHfx.js";
import { t as useAuthorizeCheckout } from "./use-authorize-checkout-DXE_kN3y.js";
import { useEffect } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { PayPalCardFieldsForm, PayPalCardFieldsProvider, usePayPalCardFields, usePayPalScriptReducer } from "@paypal/react-paypal-js";
//#region src/components/checkout/payment/payment-methods/credit-card/paypal.tsx
function parsePayPalSubmissionError(error, t) {
if (error && typeof error === "object") {
if (error?.message?.includes("INVALID_NUMBER")) return t.validation.invalidCardNumber;
if (error?.message?.includes("INVALID_EXPIRY")) return t.validation.invalidExpiry;
if (error?.message?.includes("INVALID_CVV")) return t.validation.invalidCvv;
}
return t.validation.paymentSubmissionFailed;
}
function PayPalCardFieldsFormContent() {
const { setIsCardFieldsReady, setCardFieldsError, cardFieldsRef, fieldValidationErrors, cardFieldsError } = usePayPalProvider();
const { cardFieldsForm } = usePayPalCardFields();
const [{ isResolved, isPending }] = usePayPalScriptReducer();
const { t } = useGoDaddyContext();
useEffect(() => {
if (!cardFieldsForm) return;
cardFieldsRef.current = {
submit: async () => {
try {
await cardFieldsForm.submit();
} catch (error) {
setCardFieldsError(parsePayPalSubmissionError(error, t));
throw error;
}
},
isEligible: () => !!cardFieldsForm
};
setIsCardFieldsReady(true);
setCardFieldsError(null);
return () => {
setIsCardFieldsReady(false);
cardFieldsRef.current = null;
};
}, [
cardFieldsForm,
setIsCardFieldsReady,
setCardFieldsError,
cardFieldsRef,
t
]);
if (isPending || !isResolved) return /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" });
return /* @__PURE__ */ jsxs("div", {
className: "space-y-4",
children: [
/* @__PURE__ */ jsx(PayPalCardFieldsForm, { className: "paypal-cc-container" }),
Object.entries(fieldValidationErrors).map(([field, error]) => /* @__PURE__ */ jsx("p", {
className: "text-[0.8rem] font-medium text-destructive",
children: error
}, field)),
cardFieldsError && /* @__PURE__ */ jsx("p", {
className: "text-[0.8rem] font-medium text-destructive",
children: cardFieldsError
})
]
});
}
function PayPalCreditCardForm() {
const { paypalConfig, setCheckoutErrors } = useCheckoutContext();
const { t } = useGoDaddyContext();
const confirmCheckout = useConfirmCheckout();
const authorizeCheckout = useAuthorizeCheckout();
if (!paypalConfig?.clientId) return /* @__PURE__ */ jsx("div", {
className: "text-destructive",
children: t.errors.paypalConfigMissing || "PayPal configuration missing"
});
return /* @__PURE__ */ jsx(PayPalCardFieldsProvider, {
createOrder: async () => {
return (await authorizeCheckout.mutateAsync({
paymentType: PaymentMethodType.CREDIT_CARD,
paymentProvider: PaymentProvider.PAYPAL,
paymentToken: ""
}))?.transactionRefNum ?? "";
},
onApprove: async (data) => {
try {
await confirmCheckout.mutateAsync({
paymentToken: data.orderID,
paymentType: PaymentMethodType.CREDIT_CARD,
paymentProvider: PaymentProvider.PAYPAL
});
} catch (error) {
if (error instanceof GraphQLErrorWithCodes) setCheckoutErrors(error.codes);
else setCheckoutErrors(["TRANSACTION_PROCESSING_FAILED"]);
throw error;
}
},
onError: (_error) => {},
style: {
".card-field-name": {
border: "1px solid oklch(0.9 0.025 245)",
"border-radius": "0.375rem",
"background-color": "oklch(1 0 0)",
padding: "0.5rem 0.75rem",
"font-size": "0.875rem",
"line-height": "1.25rem",
height: "3rem",
color: "oklch(0.13 0 0)"
},
".card-field-number": {
border: "1px solid oklch(0.9 0.025 245) !important",
"border-radius": "0.375rem",
"background-color": "oklch(1 0 0)",
padding: "0.5rem 0.75rem",
"font-size": "0.875rem",
"line-height": "1.25rem",
height: "3rem",
color: "oklch(0.13 0 0)"
},
".card-field-expiry": {
border: "1px solid oklch(0.9 0.025 245)",
"border-radius": "0.375rem",
"background-color": "oklch(1 0 0)",
padding: "0.5rem 0.75rem",
"font-size": "0.875rem",
"line-height": "1.25rem",
height: "3rem",
color: "oklch(0.13 0 0)"
},
".card-field-cvv": {
border: "1px solid oklch(0.9 0.025 245)",
"border-radius": "0.375rem",
"background-color": "oklch(1 0 0)",
padding: "0.5rem 0.75rem",
"font-size": "0.875rem",
"line-height": "1.25rem",
height: "3rem",
color: "oklch(0.13 0 0)"
},
".card-field-name:focus": {
outline: "none",
"box-shadow": "unset"
},
".card-field-number:focus": {
outline: "none",
"box-shadow": "unset"
},
".card-field-expiry:focus": {
outline: "none",
"box-shadow": "unset"
},
".card-field-cvv:focus": {
outline: "none",
"box-shadow": "unset"
},
".card-field-name.invalid": {
"box-shadow": "unset",
border: "1px solid oklch(0.577 0.245 27.325) !important"
},
".card-field-number.invalid": {
"box-shadow": "unset",
border: "1px solid oklch(0.577 0.245 27.325) !important"
},
".card-field-expiry.invalid": {
"box-shadow": "unset",
border: "1px solid oklch(0.577 0.245 27.325) !important"
},
".card-field-cvv.invalid": {
"box-shadow": "unset",
border: "1px solid oklch(0.577 0.245 27.325) !important"
},
".card-field-name.invalid:focus": {
outline: "none",
"box-shadow": "unset"
},
".card-field-number.invalid:focus": {
outline: "none",
"box-shadow": "unset"
},
".card-field-expiry.invalid:focus": {
outline: "none",
"box-shadow": "unset"
},
".card-field-cvv.invalid:focus": {
outline: "none",
"box-shadow": "unset"
},
"::placeholder": { color: "oklch(0.556 0 0)" }
},
children: /* @__PURE__ */ jsx(PayPalCardFieldsFormContent, {})
});
}
//#endregion
export { PayPalCreditCardForm };