@merchi/cart 1.4.4 → 1.4.5

package/src/stripe/StripeCardForm.tsx

@@ -1,18 +1,102 @@
 import * as React from 'react';
+import { useEffect, useState } from 'react';
 import { StripePaymentForm, StripePaymentGate } from '@merchi/invoice';
 import LegacyStripeCardForm from './LegacyStripeCardForm';
+import { completeTestPayment, fetchTestPublishableKey } from './actions';
 import { useCartContext } from '../CartProvider';
 import { tabIdPaymentSuccess } from '../utilities/tabs';
+import { TEST_CARD_NUMBER } from '../utilities/test_checkout';
+
+const testCheckoutHint = (
+  <div style={{marginBottom: '12px'}}>
+    <div style={{color: 'red', fontWeight: 600}}>Test checkout</div>
+    <p style={{margin: '4px 0 0', fontSize: '13px'}}>
+      No real charge. Use card {TEST_CARD_NUMBER}, any future expiry, any CVC,
+      any ZIP.
+    </p>
+  </div>
+);
 
 export default function StripeCardForm() {
-  const { alertError, apiUrl, cart, setActiveTabIndex, setInvoiceJson } = useCartContext();
-  return <StripePaymentGate engine={cart.stripePaymentEngine} apiUrl={apiUrl || 'https://api.merchi.co/v6/'} resource="cart" resourceId={cart.id}
-    resourceToken={cart.token || cart.cartToken} legacy={<LegacyStripeCardForm />}>
-    <StripePaymentForm apiUrl={apiUrl || 'https://api.merchi.co/v6/'} resource="cart"
-    resourceId={cart.id} resourceToken={cart.token || cart.cartToken} onError={alertError}
-    onSuccess={invoice => {
+  const {
+    alertError,
+    apiUrl,
+    cart,
+    classNameBtnPay,
+    setActiveTabIndex,
+    setInvoiceJson,
+  } = useCartContext();
+  const isTestCheckout = Boolean(cart.isTest);
+  const url = apiUrl || 'https://api.merchi.co/v6/';
+  const [testKeyMissing, setTestKeyMissing] = useState(false);
+  const [loadingTestPayment, setLoadingTestPayment] = useState(false);
+
+  useEffect(() => {
+    if (!isTestCheckout) {
+      setTestKeyMissing(false);
+      return;
+    }
+    fetchTestPublishableKey(url)
+      .then(() => setTestKeyMissing(false))
+      .catch(() => setTestKeyMissing(true));
+  }, [isTestCheckout, url]);
+
+  async function doCompleteTestPayment() {
+    setLoadingTestPayment(true);
+    try {
+      const invoice = await completeTestPayment(url, cart);
       setInvoiceJson(invoice);
       setActiveTabIndex(tabIdPaymentSuccess);
-    }} />
-  </StripePaymentGate>;
+    } catch (e: any) {
+      alertError(e.message);
+    } finally {
+      setLoadingTestPayment(false);
+    }
+  }
+
+  if (isTestCheckout && testKeyMissing) {
+    return (
+      <>
+        {testCheckoutHint}
+        <p style={{fontSize: '13px', marginBottom: '12px'}}>
+          Stripe test keys are not configured. Complete this as a test order
+          without a card.
+        </p>
+        <button
+          type='button'
+          className={classNameBtnPay}
+          disabled={loadingTestPayment}
+          onClick={doCompleteTestPayment}
+        >
+          {loadingTestPayment ? 'Completing…' : 'Complete test order'}
+        </button>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {isTestCheckout && testCheckoutHint}
+      <StripePaymentGate
+        engine={isTestCheckout ? 'legacy' : cart.stripePaymentEngine}
+        apiUrl={url}
+        resource="cart"
+        resourceId={cart.id}
+        resourceToken={cart.token || cart.cartToken}
+        legacy={<LegacyStripeCardForm />}
+      >
+        <StripePaymentForm
+          apiUrl={url}
+          resource="cart"
+          resourceId={cart.id}
+          resourceToken={cart.token || cart.cartToken}
+          onError={alertError}
+          onSuccess={invoice => {
+            setInvoiceJson(invoice);
+            setActiveTabIndex(tabIdPaymentSuccess);
+          }}
+        />
+      </StripePaymentGate>
+    </>
+  );
 }

package/src/stripe/actions.test.ts

@@ -0,0 +1,50 @@
+import { completeTestPayment, fetchTestPublishableKey } from './actions';
+
+describe('test checkout stripe actions', () => {
+  const originalFetch = global.fetch;
+
+  afterEach(() => {
+    global.fetch = originalFetch;
+  });
+
+  it('loads the master test publishable key', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ key: 'pk_test_master' }),
+    }) as any;
+
+    await expect(fetchTestPublishableKey('https://api.test/v6/')).resolves.toBe(
+      'pk_test_master'
+    );
+    expect(global.fetch).toHaveBeenCalledWith(
+      'https://api.test/v6/stripe/test_publishable_key/',
+      { method: 'GET', mode: 'cors' }
+    );
+  });
+
+  it('fails over when the test-key request is rejected', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: false,
+      json: async () => ({ message: 'missing' }),
+    }) as any;
+
+    await expect(fetchTestPublishableKey('https://api.test/v6/')).rejects.toThrow(
+      'Stripe test keys are not configured'
+    );
+  });
+
+  it('completes a no-Stripe test payment with the cart token', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ invoice: { id: 9, isTest: true } }),
+    }) as any;
+
+    await expect(
+      completeTestPayment('https://api.test/v6/', { id: 4, token: 'tok' })
+    ).resolves.toEqual({ id: 9, isTest: true });
+    expect(global.fetch).toHaveBeenCalledWith(
+      'https://api.test/v6/carts/4/complete_test_payment/?cart_token=tok',
+      { method: 'POST', mode: 'cors' }
+    );
+  });
+});

package/src/stripe/actions.ts

@@ -7,6 +7,47 @@ export async function stripeInitPromise(apiUrl: string) {
   ).then((response: any) => response.key);
 }
 
+export async function fetchTestPublishableKey(apiUrl: string) {
+  const response: any = await fetch(
+    `${apiUrl}stripe/test_publishable_key/`,
+    { method: 'GET', mode: 'cors' }
+  );
+  if (response && typeof response.json === 'function') {
+    if (!response.ok) {
+      throw new Error('Stripe test keys are not configured');
+    }
+    const data = await response.json();
+    if (!data || !data.key) {
+      throw new Error('Stripe test keys are not configured');
+    }
+    return data.key;
+  }
+  if (!response || !response.key) {
+    throw new Error('Stripe test keys are not configured');
+  }
+  return response.key;
+}
+
+export async function completeTestPayment(apiUrl: string, cart: any) {
+  const query = new URLSearchParams({ cart_token: cart.token }).toString();
+  const response = await fetch(
+    `${apiUrl}carts/${cart.id}/complete_test_payment/?${query}`,
+    { method: 'POST', mode: 'cors' }
+  );
+  if (!response.ok) {
+    let message = 'Unable to complete the test order.';
+    try {
+      const data = await response.json();
+      message = data.message || data.errorMessage || message;
+    } catch {
+      // keep default
+    }
+    throw new Error(message);
+  }
+  const data = await response.json();
+  return data.invoice;
+}
+
 async function createPaymentIntent(apiUrl: string, cart: any, paymentMethodType?: string) {
   const { id, token } = cart;
   const fetchOptions: any = {

package/src/utilities/cookie.ts

@@ -1,4 +1,5 @@
 import { isBrowser } from "browser-or-node";
+import { cartCookieName, readTestCheckoutFlag } from "./test_checkout";
 
 export async function getCookie(name: string, defaultValue: any) {
   if (!isBrowser) {
@@ -22,13 +23,14 @@ export async function getCookie(name: string, defaultValue: any) {
   }
 }
 
-export async function getCartCookie(domainId: number | string) {
-  const idAndToken: string = await getCookie(`cart-${domainId}`, null);
+export async function getCartCookie(domainId: number | string, isTest?: boolean) {
+  const test = isTest ?? readTestCheckoutFlag();
+  const idAndToken: string = await getCookie(cartCookieName(domainId, test), null);
   return idAndToken ? idAndToken.split(',') : null;
 }
 
-export async function getCartCookieToken(domainId: number | string) {
-  const cartIdAndToken = domainId ? await getCartCookie(Number(domainId)) : undefined;
+export async function getCartCookieToken(domainId: number | string, isTest?: boolean) {
+  const cartIdAndToken = domainId ? await getCartCookie(Number(domainId), isTest) : undefined;
   return cartIdAndToken && cartIdAndToken[1] || undefined;
 }
 
@@ -52,7 +54,8 @@ async function setSessionCookie(name: string, value: any, domain?: any) {
   document.cookie = cookie;
 }
 
-export const setCartCookie = async (storeId: number, cart: any, domain?: any) => {
+export const setCartCookie = async (storeId: number, cart: any, domain?: any, isTest?: boolean) => {
+  const test = isTest ?? (cart ? Boolean(cart.isTest) : readTestCheckoutFlag());
   const cookieValue = cart ? cart.id + ',' + cart.token : '';
-  await setSessionCookie('cart-' + String(storeId), cookieValue, domain);
+  await setSessionCookie(cartCookieName(storeId, test), cookieValue, domain);
 };

package/src/utilities/index.ts

@@ -10,5 +10,6 @@ export * from './local_storage';
 export * from './product';
 export * from './shipment';
 export * from './tabs';
+export * from './test_checkout';
 export * from './user';
 export * from './variations';

package/src/utilities/test_checkout.test.ts

@@ -0,0 +1,39 @@
+import {
+  TEST_CARD_NUMBER,
+  TEST_CHECKOUT_QUERY,
+  TEST_CHECKOUT_STORAGE_KEY,
+  cartCookieName,
+  readTestCheckoutFlag,
+} from './test_checkout';
+
+describe('test checkout helpers', () => {
+  const originalLocation = window.location;
+
+  beforeEach(() => {
+    window.localStorage.clear();
+    delete (window as any).location;
+    (window as any).location = { search: '' };
+  });
+
+  afterEach(() => {
+    (window as any).location = originalLocation;
+    window.localStorage.clear();
+  });
+
+  it('builds a separate cookie name for test carts', () => {
+    expect(cartCookieName(12)).toBe('cart-12');
+    expect(cartCookieName(12, true)).toBe('cart-12-test');
+  });
+
+  it('persists the query flag and exposes the test card number', () => {
+    (window as any).location = { search: `?${TEST_CHECKOUT_QUERY}=1` };
+    expect(readTestCheckoutFlag()).toBe(true);
+    expect(window.localStorage.getItem(TEST_CHECKOUT_STORAGE_KEY)).toBe('1');
+    expect(TEST_CARD_NUMBER).toBe('4242 4242 4242 4242');
+  });
+
+  it('reads the stored flag when the query is absent', () => {
+    window.localStorage.setItem(TEST_CHECKOUT_STORAGE_KEY, '1');
+    expect(readTestCheckoutFlag()).toBe(true);
+  });
+});

package/src/utilities/test_checkout.ts

@@ -0,0 +1,27 @@
+export const TEST_CHECKOUT_QUERY = 'merchi_test_checkout';
+export const TEST_CHECKOUT_STORAGE_KEY = 'merchi_test_checkout';
+export const TEST_CARD_NUMBER = '4242 4242 4242 4242';
+
+export function readTestCheckoutFlag(): boolean {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+  try {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get(TEST_CHECKOUT_QUERY) === '1') {
+      window.localStorage.setItem(TEST_CHECKOUT_STORAGE_KEY, '1');
+      return true;
+    }
+    return window.localStorage.getItem(TEST_CHECKOUT_STORAGE_KEY) === '1';
+  } catch {
+    return false;
+  }
+}
+
+export function persistTestCheckoutFlag(): boolean {
+  return readTestCheckoutFlag();
+}
+
+export function cartCookieName(domainId: number | string, isTest = false): string {
+  return isTest ? `cart-${domainId}-test` : `cart-${domainId}`;
+}