diff --git a/src/checkout/sections/PaymentSection/Dummy/dummyComponent.tsx b/src/checkout/sections/PaymentSection/Dummy/dummyComponent.tsx new file mode 100644 index 000000000..e0a7f5fad --- /dev/null +++ b/src/checkout/sections/PaymentSection/Dummy/dummyComponent.tsx @@ -0,0 +1,57 @@ +"use client"; + +import { useState } from "react"; +import { apiErrorMessages } from "../errorMessages"; +import { dummyGatewayId } from "./types"; +import { useTransactionInitializeMutation } from "@/checkout/graphql"; + +import { useAlerts } from "@/checkout/hooks/useAlerts"; +import { useErrorMessages } from "@/checkout/hooks/useErrorMessages"; +import { useCheckout } from "@/checkout/hooks/useCheckout"; +import { Button } from "@/checkout/components"; +import { useCheckoutComplete } from "@/checkout/hooks/useCheckoutComplete"; + +export const DummyComponent = () => { + const [loading, setLoading] = useState(false); + const { checkout } = useCheckout(); + const { deliveryMethod } = checkout; + + const { showCustomErrors } = useAlerts(); + const [, transactionInitialize] = useTransactionInitializeMutation(); + const { errorMessages: commonErrorMessages } = useErrorMessages(apiErrorMessages); + const { onCheckoutComplete, completingCheckout } = useCheckoutComplete(); + + const pay = async () => { + setLoading(true); + + transactionInitialize({ + checkoutId: checkout.id, + paymentGateway: { + id: dummyGatewayId, + data: { + event: { + type: "CHARGE_SUCCESS", + includePspReference: true, + }, + }, + }, + }).catch((err) => { + console.error(err); + showCustomErrors([{ message: commonErrorMessages.somethingWentWrong }]); + }); + + void onCheckoutComplete(); + + setLoading(false); + }; + + if (!deliveryMethod) { + return null; + } + + if (loading || completingCheckout) { + return
Processing...
; + } + + return ; +}; diff --git a/src/checkout/sections/PaymentSection/Dummy/types.ts b/src/checkout/sections/PaymentSection/Dummy/types.ts new file mode 100644 index 000000000..1a67ea794 --- /dev/null +++ b/src/checkout/sections/PaymentSection/Dummy/types.ts @@ -0,0 +1,2 @@ +export const dummyGatewayId = "saleor.io.dummy-payment-app"; +export type DummyGatewayId = typeof dummyGatewayId; diff --git a/src/checkout/sections/PaymentSection/supportedPaymentApps.ts b/src/checkout/sections/PaymentSection/supportedPaymentApps.ts index 545c982f3..47eeca6b2 100644 --- a/src/checkout/sections/PaymentSection/supportedPaymentApps.ts +++ b/src/checkout/sections/PaymentSection/supportedPaymentApps.ts @@ -2,8 +2,11 @@ import { AdyenDropIn } from "./AdyenDropIn/AdyenDropIn"; import { adyenGatewayId } from "./AdyenDropIn/types"; import { StripeComponent } from "./StripeElements/stripeComponent"; import { stripeGatewayId } from "./StripeElements/types"; +import { DummyComponent } from "./Dummy/dummyComponent"; +import { dummyGatewayId } from "./Dummy/types"; export const paymentMethodToComponent = { [adyenGatewayId]: AdyenDropIn, [stripeGatewayId]: StripeComponent, + [dummyGatewayId]: DummyComponent, }; diff --git a/src/checkout/sections/PaymentSection/types.ts b/src/checkout/sections/PaymentSection/types.ts index 51cba5810..57c873219 100644 --- a/src/checkout/sections/PaymentSection/types.ts +++ b/src/checkout/sections/PaymentSection/types.ts @@ -1,4 +1,5 @@ import { type StripeGatewayId } from "./StripeElements/types"; +import { type DummyGatewayId } from "./Dummy/types"; import { type PaymentGatewayConfig } from "@/checkout/graphql"; import { type AdyenGatewayId, @@ -10,7 +11,7 @@ export type PaymentGatewayId = AdyenGatewayId | StripeGatewayId; export type ParsedAdyenGateway = ParsedPaymentGateway