Hoist payment gateways for the whole checkout

CHANGELOG.md

@@ -20,6 +20,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Do not throw error if unsupported payment gateway found - #819 by @dominik-zeglen
 - Fix tsconfig aliases - #824 by @orzechdev
 - Set billing address in first checkout step - #822 by @orzechdev
+- Persist payment gateways for the whole checkout - #828 by @orzechdev
 
 ## 2.10.4
 

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

@@ -6,7 +6,6 @@ import { checkoutMessages } from "@temp/intl";
 
 import { DiscountForm } from "../DiscountForm";
 import { IDiscountFormData } from "../DiscountForm/types";
-import { PaymentGatewaysList } from "../PaymentGatewaysList";
 
 import * as S from "./styles";
 import { IProps } from "./types";
@@ -15,22 +14,13 @@ import { IProps } from "./types";
  * Payment options used in checkout.
  */
 const CheckoutPayment: React.FC<IProps> = ({
-  gatewayErrors,
   promoCodeErrors,
-  paymentGateways,
   promoCodeDiscountFormId,
   promoCodeDiscountFormRef,
   promoCodeDiscount,
   addPromoCode,
   removeVoucherCode,
   submitUnchangedDiscount,
-  selectedPaymentGateway,
-  selectedPaymentGatewayToken,
-  selectPaymentGateway,
-  gatewayFormRef,
-  gatewayFormId,
-  processPayment,
-  onGatewayError,
 }: IProps) => {
   const [showPromoCodeForm, setShowPromoCodeForm] = useState(
     !!promoCodeDiscount?.voucherCode
@@ -86,17 +76,6 @@ const CheckoutPayment: React.FC<IProps> = ({
           </S.DiscountField>
         )}
         <S.Divider />
-        <PaymentGatewaysList
-          errors={gatewayErrors}
-          paymentGateways={paymentGateways}
-          formRef={gatewayFormRef}
-          formId={gatewayFormId}
-          processPayment={processPayment}
-          selectedPaymentGateway={selectedPaymentGateway}
-          selectedPaymentGatewayToken={selectedPaymentGatewayToken}
-          selectPaymentGateway={selectPaymentGateway}
-          onError={onGatewayError}
-        />
       </section>
     </S.Wrapper>
   );

src/@next/components/organisms/CheckoutPayment/__snapshots__/stories.storyshot

@@ -6,7 +6,7 @@ exports[`Storyshots @components/organisms/CheckoutPayment default 1`] = `
   margin: 20px;
 }
 
-.c9 {
+.c6 {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -105,39 +105,6 @@ exports[`Storyshots @components/organisms/CheckoutPayment default 1`] = `
   background-color: rgb(33,18,94);
 }
 
-.c8 {
-  cursor: pointer;
-}
-
-.c8 input[type="radio"] {
-  opacity: 0;
-  position: fixed;
-  width: 0;
-}
-
-.c8 > div {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  margin: 0.25em 1em 0.25em 0.25em;
-  border: 0.1em solid #21125e;
-  border-radius: 0.5em;
-  background: #ffffff;
-  vertical-align: bottom;
-}
-
-.c6 {
-  display: grid;
-  grid-gap: 20px;
-}
-
-.c7 {
-  display: block;
-  background-color: #f1f5f5;
-  padding: 20px;
-  cursor: pointer;
-}
-
 .c5 {
   width: 100%;
   border-bottom: 1px solid rgba(50,50,50,0.1);
@@ -189,72 +156,10 @@ exports[`Storyshots @components/organisms/CheckoutPayment default 1`] = `
       <div
         className="c5"
       />
-      <div
-        className="c6"
-      >
-        <div>
-          <label
-            checked={false}
-            className="c7"
-          >
-            <div
-              checked={false}
-              className="c8"
-            >
-              <input
-                checked={false}
-                data-test="checkoutPaymentGatewayDummyInput"
-                name="payment-method"
-                onChange={[Function]}
-                type="radio"
-                value="dummy"
-              />
-
-              <div>
-                <span />
-              </div>
-              <span
-                data-test="checkoutPaymentGatewayDummyName"
-              >
-                Dummy
-              </span>
-            </div>
-          </label>
-        </div>
-        <div>
-          <label
-            checked={false}
-            className="c7"
-          >
-            <div
-              checked={false}
-              className="c8"
-            >
-              <input
-                checked={false}
-                data-test="checkoutPaymentGatewayStripeInput"
-                name="payment-method"
-                onChange={[Function]}
-                type="radio"
-                value="stripe"
-              />
-
-              <div>
-                <span />
-              </div>
-              <span
-                data-test="checkoutPaymentGatewayStripeName"
-              >
-                Stripe
-              </span>
-            </div>
-          </label>
-        </div>
-      </div>
     </section>
   </div>
   <div
-    className="c9"
+    className="c6"
   />
 </div>
 `;

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

@@ -18,9 +18,6 @@ const removeVoucherCode = action("removeVoucherCode has been called");
 const submitUnchangedDiscount = action(
   "submitUnchangedDiscount has been called"
 );
-const selectPaymentGateway = action("selectPaymentGateway has been called");
-const processPayment = action("processPayment has been called");
-const onGatewayError = action("onGatewayError has been called");
 
 storiesOf("@components/organisms/CheckoutPayment", module)
   .addParameters({ component: CheckoutPayment })
@@ -31,9 +28,6 @@ storiesOf("@components/organisms/CheckoutPayment", module)
         addPromoCode={addPromoCode}
         removeVoucherCode={removeVoucherCode}
         submitUnchangedDiscount={submitUnchangedDiscount}
-        selectPaymentGateway={selectPaymentGateway}
-        processPayment={processPayment}
-        onGatewayError={onGatewayError}
       />
     </IntlProvider>
   ));

src/@next/components/organisms/CheckoutPayment/test.tsx

@@ -11,25 +11,17 @@ describe("<CheckoutPayment />", () => {
     const addPromoCode = jest.fn();
     const removeVoucherCode = jest.fn();
     const submitUnchangedDiscount = jest.fn();
-    const selectPaymentGateway = jest.fn();
-    const processPayment = jest.fn();
-    const onGatewayError = jest.fn();
     const wrapper = mount(
       <IntlProvider locale="en">
         <CheckoutPayment
           {...PROPS}
           addPromoCode={addPromoCode}
           removeVoucherCode={removeVoucherCode}
           submitUnchangedDiscount={submitUnchangedDiscount}
-          selectPaymentGateway={selectPaymentGateway}
-          processPayment={processPayment}
-          onGatewayError={onGatewayError}
         />
       </IntlProvider>
     );
 
-    const wrapperText = wrapper.text();
-    expect(wrapperText).toContain(PROPS.paymentGateways[0].name);
-    expect(wrapperText).toContain(PROPS.paymentGateways[1].name);
+    expect(wrapper.exists()).toEqual(true);
   });
 });

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

@@ -1,46 +1,15 @@
-import { ICardData, IFormError, IPaymentGateway } from "@types";
+import { IFormError } from "@types";
 
 export interface IPromoCodeDiscount {
   voucherCode?: string | null;
 }
 
 export interface IProps {
-  gatewayErrors?: IFormError[];
   promoCodeErrors?: IFormError[];
-  paymentGateways: IPaymentGateway[];
   promoCodeDiscount?: IPromoCodeDiscount;
   promoCodeDiscountFormRef?: React.RefObject<HTMLFormElement>;
   promoCodeDiscountFormId?: string;
   addPromoCode: (promoCode: string) => void;
   removeVoucherCode: (voucherCode: string) => void;
   submitUnchangedDiscount: () => void;
-  /**
-   * Selected payment gateway.
-   */
-  selectedPaymentGateway?: string;
-  /**
-   * Selected payment gateway token.
-   */
-  selectedPaymentGatewayToken?: string;
-  /**
-   * Called when selected payment gateway is changed.
-   */
-  selectPaymentGateway: (paymentGateway: string) => void;
-  /**
-   * Gateway form reference on which payment might be submitted.
-   */
-  gatewayFormRef?: React.RefObject<HTMLFormElement>;
-  gatewayFormId?: string;
-  /**
-   * Method called after the form is submitted. Passed gateway id and token attribute will be used to create payment.
-   */
-  processPayment: (
-    gateway: string,
-    token: string,
-    cardData?: ICardData
-  ) => void;
-  /**
-   * Method called when gateway error occured.
-   */
-  onGatewayError: (errors: IFormError[]) => void;
 }

src/@next/components/templates/Checkout/Checkout.tsx

@@ -14,6 +14,8 @@ const Checkout: React.FC<IProps> = ({
   loading,
   navigation,
   checkout,
+  paymentGateways,
+  hidePaymentGateways = false,
   cartSummary,
   button,
 }: IProps) => {
@@ -27,6 +29,9 @@ const Checkout: React.FC<IProps> = ({
       <S.Wrapper>
         <S.Navigation>{navigation}</S.Navigation>
         <S.Checkout>{checkout}</S.Checkout>
+        <S.PaymentGateways hide={hidePaymentGateways}>
+          {paymentGateways}
+        </S.PaymentGateways>
         <S.CartSummary>{cartSummary}</S.CartSummary>
         <S.Button>{button}</S.Button>
       </S.Wrapper>