@godaddy/react
Version:
The `createCheckoutSession` function creates a new checkout session with GoDaddy's commerce API.
83 lines (81 loc) • 3 kB
JavaScript
import { G as DeliveryMethods, M as Skeleton, Q as useIsPaymentDisabled, _ as useConfirmCheckout, g as PaymentProvider, o as useCheckoutContext, rt as useGoDaddyContext, u as useBuildPaymentRequest } from "./checkout-B7yB0DfE.js";
import { k as GraphQLErrorWithCodes } from "./utils-DWBfAHfx.js";
import { useState } from "react";
import { useFormContext } from "react-hook-form";
import { jsx } from "react/jsx-runtime";
import { FUNDING, PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js";
//#region src/components/checkout/payment/checkout-buttons/paypal/paypal.tsx
function PayPalButtonsWrapper() {
const { setCheckoutErrors } = useCheckoutContext();
const isPaymentDisabled = useIsPaymentDisabled();
const form = useFormContext();
const { payPalRequest } = useBuildPaymentRequest();
const confirmCheckout = useConfirmCheckout();
const [isPaypalDisabled, setIsPaypalDisabled] = useState(false);
const isPickup = form.watch("deliveryMethod") === DeliveryMethods.PICKUP;
const [{ isResolved, isPending }] = usePayPalScriptReducer();
const handleClick = async (_data, actions) => {
if (!await form.trigger()) {
const firstError = Object.keys(form.formState.errors)[0];
if (firstError) form.setFocus(firstError);
return actions.reject();
}
return actions.resolve();
};
const createOrder = async (_data, actions) => {
const order = {
...payPalRequest,
purchase_units: payPalRequest.purchase_units ? [{
...payPalRequest.purchase_units[0],
...isPickup ? { shipping: void 0 } : {}
}] : void 0,
application_context: { shipping_preference: isPickup ? "NO_SHIPPING" : "SET_PROVIDED_ADDRESS" }
};
return await actions.order.create(order);
};
const onApprove = async (_data, actions) => {
setIsPaypalDisabled(true);
try {
const details = await actions.order.get();
await confirmCheckout.mutateAsync({
paymentToken: `${details.id}:${details.payer.payer_id}`,
paymentType: "paypal",
paymentProvider: PaymentProvider.PAYPAL
});
} catch (err) {
if (err instanceof GraphQLErrorWithCodes) setCheckoutErrors(err.codes);
} finally {
setIsPaypalDisabled(false);
}
};
if (isPending || !isResolved) return /* @__PURE__ */ jsx(Skeleton, { className: "h-13 w-full" });
return /* @__PURE__ */ jsx(PayPalButtons, {
fundingSource: FUNDING.PAYPAL,
style: {
layout: "vertical",
label: "pay",
shape: "rect",
borderRadius: 8,
height: 50
},
disabled: isPaypalDisabled || isPaymentDisabled,
onClick: handleClick,
createOrder,
onApprove,
onError: (_err) => {}
});
}
function PayPalCheckoutButton() {
const { t } = useGoDaddyContext();
const { paypalConfig } = useCheckoutContext();
if (!paypalConfig) return /* @__PURE__ */ jsx("div", {
className: "text-destructive",
children: t.errors.paypalConfigMissing
});
return /* @__PURE__ */ jsx("div", {
className: "w-full",
children: /* @__PURE__ */ jsx(PayPalButtonsWrapper, {})
});
}
//#endregion
export { PayPalCheckoutButton };