Update payment gateways types and messages

src/@next/components/organisms/AdyenPaymentGateway/AdyenPaymentGateway.tsx

@@ -1,10 +1,16 @@
 import { CompleteCheckout_checkoutComplete_order } from "@saleor/sdk/lib/mutations/gqlTypes/CompleteCheckout";
 import React, { useEffect, useRef, useState } from "react";
-import { defineMessages, IntlShape, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
 import { ErrorMessage } from "@components/atoms";
 import { paymentErrorMessages } from "@temp/intl";
-import { IFormError, IPaymentGatewayConfig } from "@types";
+import {
+  IFormError,
+  IPaymentGatewayConfig,
+  IPaymentSubmitResult,
+} from "@types";
+
+import { adyenErrorMessages } from "./intl";
 
 export const adyenNotNegativeConfirmationStatusCodes = [
   "Authorised",
@@ -15,55 +21,6 @@ export const adyenNotNegativeConfirmationStatusCodes = [
   "PresentToShopper",
 ];
 
-const messageDescription = "Adyen payment gateway error";
-
-export const adyenErrorMessages = defineMessages({
-  unknownPayment: {
-    defaultMessage: "Unknown payment submission error occured.",
-    description: messageDescription,
-  },
-  invalidPaymentSubmission: {
-    defaultMessage: "Invalid payment submission.",
-    description: messageDescription,
-  },
-});
-
-export const adyenConfirmationErrorMessages = defineMessages({
-  error: {
-    defaultMessage: "Error processing payment occured.",
-    description: messageDescription,
-  },
-  refused: {
-    defaultMessage:
-      "The payment was refused. Try the payment again using a different payment method or card.",
-    description: messageDescription,
-  },
-  cancelled: {
-    defaultMessage: "Payment was cancelled.",
-    description: messageDescription,
-  },
-  general: {
-    defaultMessage: "Payment confirmation went wrong.",
-    description: messageDescription,
-  },
-});
-
-export function translateAdyenConfirmationError(
-  status: string,
-  intl: IntlShape
-): string {
-  switch (status) {
-    case "Error":
-      return intl.formatMessage(adyenConfirmationErrorMessages.error);
-    case "Refused":
-      return intl.formatMessage(adyenConfirmationErrorMessages.refused);
-    case "Cancelled":
-      return intl.formatMessage(adyenConfirmationErrorMessages.cancelled);
-    default:
-      return intl.formatMessage(adyenConfirmationErrorMessages.general);
-  }
-}
-
 interface IResourceConfig {
   src: string;
   integrity: string;
@@ -105,12 +62,12 @@ export interface IProps {
   /**
    * Method to call on gateway payment submission.
    */
-  submitPayment: (data: object) => Promise<any>;
+  submitPayment: (data: object) => Promise<IPaymentSubmitResult>;
   /**
    * Method called after succesful gateway payment submission. This is the case when no confirmation is needed.
    */
   submitPaymentSuccess: (
-    order?: CompleteCheckout_checkoutComplete_order
+    order?: CompleteCheckout_checkoutComplete_order | null
   ) => void;
   /**
    * Errors returned by the payment gateway.

src/@next/components/organisms/AdyenPaymentGateway/index.ts

@@ -1 +1,2 @@
 export * from "./AdyenPaymentGateway";
+export * from "./intl";

src/@next/components/organisms/AdyenPaymentGateway/intl.ts

@@ -0,0 +1,50 @@
+import { defineMessages, IntlShape } from "react-intl";
+
+const messageDescription = "Adyen payment gateway error";
+
+export const adyenErrorMessages = defineMessages({
+  unknownPayment: {
+    defaultMessage: "Unknown payment submission error occured.",
+    description: messageDescription,
+  },
+  invalidPaymentSubmission: {
+    defaultMessage: "Invalid payment submission.",
+    description: messageDescription,
+  },
+});
+
+export const adyenConfirmationErrorMessages = defineMessages({
+  error: {
+    defaultMessage: "Error processing payment occured.",
+    description: messageDescription,
+  },
+  refused: {
+    defaultMessage:
+      "The payment was refused. Try the payment again using a different payment method or card.",
+    description: messageDescription,
+  },
+  cancelled: {
+    defaultMessage: "Payment was cancelled.",
+    description: messageDescription,
+  },
+  general: {
+    defaultMessage: "Payment confirmation went wrong.",
+    description: messageDescription,
+  },
+});
+
+export function translateAdyenConfirmationError(
+  status: string,
+  intl: IntlShape
+): string {
+  switch (status) {
+    case "Error":
+      return intl.formatMessage(adyenConfirmationErrorMessages.error);
+    case "Refused":
+      return intl.formatMessage(adyenConfirmationErrorMessages.refused);
+    case "Cancelled":
+      return intl.formatMessage(adyenConfirmationErrorMessages.cancelled);
+    default:
+      return intl.formatMessage(adyenConfirmationErrorMessages.general);
+  }
+}

src/@next/components/organisms/AdyenPaymentGateway/stories.tsx

@@ -33,7 +33,7 @@ const PROPS = {
   ],
 };
 const processPayment = action("processPayment");
-const submitPayment = async () => action("submitPayment");
+const submitPayment = async () => Promise.resolve({});
 const submitPaymentSuccess = action("submitPaymentSuccess");
 const onError = action("onError");
 

src/@next/components/organisms/PaymentGatewaysList/stories.tsx

@@ -6,7 +6,7 @@ import { PaymentGatewaysList } from ".";
 import { paymentGateways } from "./fixtures";
 
 const processPayment = action("processPayment");
-const submitPayment = async () => action("submitPayment");
+const submitPayment = async () => Promise.resolve({});
 const submitPaymentSuccess = action("submitPaymentSuccess");
 const selectPaymentGateway = action("selectPaymentGateway");
 const onError = action("onError");

src/@next/components/organisms/PaymentGatewaysList/types.ts

@@ -1,6 +1,11 @@
 import { CompleteCheckout_checkoutComplete_order } from "@saleor/sdk/lib/mutations/gqlTypes/CompleteCheckout";
 
-import { ICardData, IFormError, IPaymentGateway } from "@types";
+import {
+  ICardData,
+  IFormError,
+  IPaymentGateway,
+  IPaymentSubmitResult,
+} from "@types";
 
 export interface IProps {
   /**
@@ -39,9 +44,9 @@ export interface IProps {
     token?: string,
     cardData?: ICardData
   ) => void;
-  submitPayment: (data?: object) => Promise<any>;
+  submitPayment: (data?: object) => Promise<IPaymentSubmitResult>;
   submitPaymentSuccess: (
-    order?: CompleteCheckout_checkoutComplete_order
+    order?: CompleteCheckout_checkoutComplete_order | null
   ) => void;
   /**
    * Method called when gateway error occured.

src/@next/components/organisms/StripePaymentGateway/StripePaymentGateway.tsx

@@ -6,37 +6,15 @@ import {
   StripeElements,
 } from "@stripe/stripe-js";
 import React, { useEffect, useMemo, useState } from "react";
-import { defineMessages, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
 import { paymentErrorMessages } from "@temp/intl";
 import { IFormError } from "@types";
 
 import { StripeCreditCardForm } from "../StripeCreditCardForm";
+import { stripeErrorMessages } from "./intl";
 import { IProps } from "./types";
 
-const messageDescription = "Stripe payment gateway error";
-
-export const stripeErrorMessages = defineMessages({
-  gatewayMisconfigured: {
-    defaultMessage: "Stripe gateway misconfigured. Api key not provided.",
-    description: messageDescription,
-  },
-  paymentSubmissionError: {
-    defaultMessage:
-      "Payment submission error. Stripe gateway returned no payment method in payload.",
-    description: messageDescription,
-  },
-  geytwayDisplayError: {
-    defaultMessage:
-      "Stripe payment gateway couldn't be displayed. Stripe elements were not provided.",
-    description: messageDescription,
-  },
-  paymentMethodNotCreated: {
-    defaultMessage: "Payment method has not been created.",
-    description: messageDescription,
-  },
-});
-
 interface StripeConfirmationData {
   client_secret: string;
   id: string;

src/@next/components/organisms/StripePaymentGateway/intl.ts

@@ -0,0 +1,24 @@
+import { defineMessages } from "react-intl";
+
+const messageDescription = "Stripe payment gateway error";
+
+export const stripeErrorMessages = defineMessages({
+  gatewayMisconfigured: {
+    defaultMessage: "Stripe gateway misconfigured. Api key not provided.",
+    description: messageDescription,
+  },
+  paymentSubmissionError: {
+    defaultMessage:
+      "Payment submission error. Stripe gateway returned no payment method in payload.",
+    description: messageDescription,
+  },
+  geytwayDisplayError: {
+    defaultMessage:
+      "Stripe payment gateway couldn't be displayed. Stripe elements were not provided.",
+    description: messageDescription,
+  },
+  paymentMethodNotCreated: {
+    defaultMessage: "Payment method has not been created.",
+    description: messageDescription,
+  },
+});

src/@next/components/organisms/StripePaymentGateway/stories.tsx

@@ -9,7 +9,7 @@ const config = [
   { field: "api_key", value: "pk_test_6pRNASCoBOKtIshFeQd4XMUh" },
 ];
 const processPayment = action("processPayment");
-const submitPayment = async () => action("submitPayment");
+const submitPayment = async () => Promise.resolve({});
 const submitPaymentSuccess = action("submitPaymentSuccess");
 const onError = action("onError");
 

src/@next/components/organisms/StripePaymentGateway/types.ts

@@ -1,6 +1,11 @@
 import { CompleteCheckout_checkoutComplete_order } from "@saleor/sdk/lib/mutations/gqlTypes/CompleteCheckout";
 
-import { ICardData, IFormError, IPaymentGatewayConfig } from "@types";
+import {
+  ICardData,
+  IFormError,
+  IPaymentGatewayConfig,
+  IPaymentSubmitResult,
+} from "@types";
 
 export interface IProps {
   /**
@@ -26,12 +31,12 @@ export interface IProps {
   /**
    * Method to call on gateway payment submission.
    */
-  submitPayment: (data?: object) => Promise<any>;
+  submitPayment: () => Promise<IPaymentSubmitResult>;
   /**
    * Method called after succesful gateway payment submission. This is the case when no confirmation is needed.
    */
   submitPaymentSuccess: (
-    order?: CompleteCheckout_checkoutComplete_order
+    order?: CompleteCheckout_checkoutComplete_order | null
   ) => void;
   /**
    * Method called when gateway error occured.

src/@next/pages/CheckoutPage/CheckoutPage.tsx

@@ -17,7 +17,7 @@ import { Checkout } from "@components/templates";
 import { useRedirectToCorrectCheckoutStep } from "@hooks";
 import { paths } from "@paths";
 import { paymentGatewayNames } from "@temp/constants";
-import { ICardData, IFormError } from "@types";
+import { ICardData, IFormError, IPaymentSubmitResult } from "@types";
 
 import {
   CheckoutAddressSubpage,
@@ -151,11 +151,11 @@ const CheckoutPage: React.FC<NextPage> = () => {
       confirmationNeeded: response.data?.confirmationNeeded,
       order: response.data?.order,
       errors: response.dataError?.error,
-    };
+    } as IPaymentSubmitResult;
   };
 
   const handleSubmitPaymentSuccess = (
-    order?: CompleteCheckout_checkoutComplete_order
+    order?: CompleteCheckout_checkoutComplete_order | null
   ) => {
     setSubmitInProgress(false);
     setPaymentGatewayErrors([]);

src/@next/types/IPaymentGateway.ts

@@ -1,3 +1,7 @@
+import { CompleteCheckout_checkoutComplete_order } from "@saleor/sdk/lib/mutations/gqlTypes/CompleteCheckout";
+
+import { IFormError } from "@types";
+
 export interface IPaymentGatewayConfig {
   /**
    * Gateway config key.
@@ -23,3 +27,10 @@ export interface IPaymentGateway {
    */
   config: IPaymentGatewayConfig[];
 }
+
+export interface IPaymentSubmitResult {
+  confirmationData?: string | null;
+  confirmationNeeded?: boolean;
+  order?: CompleteCheckout_checkoutComplete_order | null;
+  errors?: IFormError[];
+}