merchi_cart 0.0.7-c → 0.0.7-e

package/src/stripe/StripeCardForm.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { ButtonPay } from '../buttons';
+import {
+  callbackCreditCardPaymentSuccess
+} from '../store';
+import FormStripeCardFields from './StripeCardFields';
+import {
+  stripeCardFormSubmit,
+  stripeInitPromise,
+  stripePaymentButtonSubmit,
+} from './actions';
+import { PaymentRequestPaymentMethodEvent } from '@stripe/stripe-js';
+import { companyStripePubKeyOrTestPubKey } from './utils';
+import { useCartContext } from '../CartProvider';
+import { alertError } from '../store';
+
+function PaymentButton({ loading }: any) {
+  const { cart } = useSelector((s: any) => s.stateCart);
+  return (
+    <div>
+      <ButtonPay cart={cart} loading={loading} />
+    </div>
+  );
+}
+
+const badgeTestMode = <div style={{color: 'red'}}>Test mode</div>;
+
+function StripeCardForm() {
+  const { cart } = useSelector((s: any) => s.stateCart);
+  const { urlApi } = useCartContext();
+  const { domain } = cart;
+  const company = domain.company;
+  const hasCompanyPubKey = Boolean(company.isStripeValid && companyStripePubKeyOrTestPubKey(company));
+  const companyPubKey = hasCompanyPubKey ? companyStripePubKeyOrTestPubKey(company) : '';
+  const canUseConnect = !!company.stripeAccountId;
+  const [loadingStripePayment, setLoadingStripePayment] = useState(false);
+  const [loadingStripePaymentButtons, setLoadingStripePaymentButtons] = useState(false);
+  const url: string = urlApi || '';
+  async function doStripePayment(r: any) {
+    setLoadingStripePayment(true);
+    try {
+      const response = await stripeCardFormSubmit(url, r.stripe, r.card, cart);
+      callbackCreditCardPaymentSuccess(response);
+      setLoadingStripePayment(false);
+    } catch (e: any) {
+      setLoadingStripePayment(false);
+      alertError(e.message);
+    }
+  }
+  async function doStripePaymentRequestForButton(
+    stripe: any, event: PaymentRequestPaymentMethodEvent
+  ) {
+    setLoadingStripePaymentButtons(true);
+    try {
+      const response = await stripePaymentButtonSubmit(url, stripe, cart, event);
+      callbackCreditCardPaymentSuccess(response);
+      setLoadingStripePaymentButtons(false);
+    } catch (e: any) {
+      setLoadingStripePaymentButtons(false);
+      alertError(e.message);
+    }
+  }
+  const [stripePublicKey, setStripePublicKey] = useState(companyPubKey);
+  useEffect(() => {
+    if (!stripePublicKey && canUseConnect) stripeInitPromise(url).then(setStripePublicKey)
+  }, [stripePublicKey, canUseConnect]);
+  return (
+    <>
+      {company.isTesting && badgeTestMode}
+      <FormStripeCardFields
+        doStripePayment={doStripePayment}
+        doStripePaymentRequestForButton={doStripePaymentRequestForButton}
+        cart={cart}
+        loadingStripePayment={loadingStripePayment}
+        loadingStripePaymentButtons={loadingStripePaymentButtons}
+        PaymentButton={PaymentButton}
+        setLoadingStripePayment={setLoadingStripePayment}
+        stripePubKey={stripePublicKey}
+      />
+    </>
+  );
+}
+
+export default StripeCardForm;

package/src/stripe/StripePaymentButtons.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  CanMakePaymentResult,
+  PaymentRequest,
+  PaymentRequestOptions,
+  PaymentRequestPaymentMethodEvent,
+  StripePaymentRequestButtonElementOptions 
+} from '@stripe/stripe-js';
+import {
+  PaymentRequestButtonElement,
+  useStripe,
+} from '@stripe/react-stripe-js';
+
+
+function useOptions(paymentRequest: PaymentRequest) {
+  const options = useMemo(
+    () => ({
+      paymentRequest,
+      style: {
+        paymentRequestButton: {
+          theme: 'dark',
+          height: '48px',
+          type: 'buy'
+        }
+      }
+    }),
+    [paymentRequest]
+  );
+
+  return options;
+}
+
+interface UsePaymentRequest {
+  onPaymentMethod: (payload: any) => void;
+  options: PaymentRequestOptions;
+}
+
+function usePaymentRequest({ options, onPaymentMethod }: UsePaymentRequest) {
+  const stripe = useStripe();
+  const [paymentRequest, setPaymentRequest] = useState((null as unknown));
+  const [canMakePayment, setCanMakePayment] = useState(false);
+
+  useEffect(() => {
+    if (stripe && paymentRequest === null) {
+      const pr = stripe.paymentRequest(options);
+      setPaymentRequest((pr as any));
+    }
+  }, [stripe, options, paymentRequest]);
+
+  useEffect(() => {
+    let subscribed = true;
+    if (paymentRequest) {
+      (paymentRequest as PaymentRequest).canMakePayment().then(
+        (res: CanMakePaymentResult | null) => {
+          if (res && subscribed) {
+            setCanMakePayment(true);
+          }
+        });
+    }
+
+    return () => {
+      subscribed = false;
+    };
+  }, [paymentRequest]);
+
+  useEffect(() => {
+    if (paymentRequest) {
+      (paymentRequest as any).on('paymentmethod', onPaymentMethod);
+    }
+    return () => {
+      if (paymentRequest) {
+        (paymentRequest as any).off('paymentmethod', onPaymentMethod);
+      }
+    };
+  }, [paymentRequest, onPaymentMethod]);
+
+  return canMakePayment ? paymentRequest : null;
+}
+
+interface PropsStripePaymentButtons {
+  doPaymentRequest: (event: PaymentRequestPaymentMethodEvent) => void;
+  cart: any;
+}
+
+function StripePaymentButtons(
+  {
+    doPaymentRequest,
+    cart,
+  }: PropsStripePaymentButtons) {
+  const paymentRequest: unknown = usePaymentRequest({
+    options: {
+      country: cart.domain.company.country,
+      currency: String(cart.currency).toLowerCase(),
+      total: {
+        label: `Merchi Cart #${cart.id}`,
+        amount: Math.round(cart.totalCost * 100)
+      }
+    },
+    onPaymentMethod: doPaymentRequest
+  });
+  const options = useOptions((paymentRequest as PaymentRequest));
+
+  if (!paymentRequest) {
+    return null;
+  }
+  return (
+    <div style={{marginBottom: '2rem', marginTop: '2rem'}}>
+      <PaymentRequestButtonElement
+        className='PaymentRequestButton'
+        options={(options as StripePaymentRequestButtonElementOptions)}
+      />
+    </div>
+  );
+}
+
+export default StripePaymentButtons;

package/src/stripe/actions.ts

@@ -0,0 +1,94 @@
+import { PaymentRequestPaymentMethodEvent } from '@stripe/stripe-js';
+
+export async function stripeInitPromise(urlApi: string) {
+  return await fetch(
+    `${urlApi}stripe/master_publishable_key/`,
+    { method: 'GET', mode: 'cors' }
+  ).then((response: any) => response.key);
+}
+
+async function createPaymentIntent(urlApi: string, cart: any, paymentMethodType?: string) {
+  const { id, token } = cart;
+  const fetchOptions: any = {
+    method: 'GET',
+    mode: 'cors',
+  };
+  const queryParams: any[] = [['cart_token', token]];
+
+  if (paymentMethodType) {
+    queryParams.push(['payment_method_types', paymentMethodType]);
+  }
+
+  const queryString = new URLSearchParams(queryParams).toString();
+  const uri = `stripe/payment_intent/cart/${id}/`
+  const url = `${urlApi}${uri}?${queryString}`;
+
+  const response = await fetch(url, fetchOptions);
+
+  if (!response.ok) {
+    throw new Error("Failed to create payment intent.");
+  }
+
+  return await response.json();
+}
+
+async function checkPaymentIntnetIsComplete(urlApi: string, cart: any) {
+  const url = `stripe/payment_intent/cart/complete/${cart.id}/`;
+  const fetchOptions: any = {
+    method: 'GET',
+    mode: 'cors',
+  };
+  const queryString = new URLSearchParams({cart_token: cart.token}).toString();
+
+  const response = await fetch(`${urlApi}${url}?${queryString}`, fetchOptions);
+  
+  if (!response.ok) {
+    throw new Error("Failed to check if payment intent is complete.");
+  }
+
+  return await response.json();
+}
+
+export async function stripeCardFormSubmit(urlApi: string, stripe: any, card: any, cart: any) {
+  try {
+    const intent = await createPaymentIntent(urlApi, cart);
+    const stripePayment = await stripe.confirmCardPayment(intent.stripeClientSecret, { payment_method: { card } });
+
+    if (stripePayment.error) {
+      throw new Error(stripePayment.error.message || 'Stripe connect unknown error');
+    }
+
+    return await checkPaymentIntnetIsComplete(urlApi, cart);
+  } catch (e) {
+    throw e;
+  }
+}
+
+export async function stripePaymentButtonSubmit(
+  urlApi: string,
+  stripe: any,
+  cart: any,
+  paymentMethodEvent: PaymentRequestPaymentMethodEvent
+) {
+  const { complete, paymentMethod } = paymentMethodEvent;
+
+  try {
+    const intent = await createPaymentIntent(urlApi, cart);
+    const stripePayment = await stripe.confirmCardPayment(
+      intent.stripeClientSecret,
+      { payment_method: paymentMethod.id },
+      { handleActions: false }
+    );
+
+    if (stripePayment.error) {
+      throw new Error(stripePayment.error.message || 'Stripe unknown error');
+    }
+
+    complete('success');
+    return await checkPaymentIntnetIsComplete(urlApi, cart);
+
+  } catch (e) {
+    complete('fail');
+    throw e;
+  }
+}

package/src/stripe/slices/sliceStripeAlerts.ts

@@ -0,0 +1,29 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+const sliceStripeAlerts = createSlice({
+  initialState: {
+    alerts: [],
+  },
+  name: 'stateStripeAlerts',
+  reducers: {
+    alertError: (state: any, action: PayloadAction<any>) => {
+      state.alerts =
+        [...state.alerts,
+          { alertType: 'danger',
+            message: action.payload,
+            title: 'Error!' }];
+    },
+    alertRemove: (state: any, action: PayloadAction<any>) => {
+      state.alerts.splice(action.payload, 1);
+    },
+    alertSuccess: (state: any, action: PayloadAction<any>) => {
+      state.alerts =
+        [...state.alerts,
+          { alertType: 'success',
+            message: action.payload,
+            title: 'Success!' }];
+    },
+  },
+});
+
+export default sliceStripeAlerts;

package/src/stripe/slices/sliceStripeCardForm.ts

@@ -0,0 +1,9 @@
+import sliceStripeAlerts from './sliceStripeAlerts';
+import sliceStripeForm from './sliceStripeForm';
+
+const sliceStripeCardForm = {
+  stateStripeAlerts: sliceStripeAlerts.reducer,
+  stateStripeForm: sliceStripeForm.reducer,
+};
+
+export default sliceStripeCardForm;

package/src/stripe/slices/sliceStripeForm.ts

@@ -0,0 +1,56 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+const sliceStripeForm = createSlice({
+  initialState: {
+    acceptedPaymentMethods: {},
+    invoice: {},
+    isCart: false,
+    loading: false,
+    loadingAcceptedPaymentMethods: false,
+    loadingPaymentRequestButton: false,
+    loadingWeChatPayment: false,
+  },
+  name: 'stateStripeForm',
+  reducers: {
+    actionFetchAcceptedPaymentMethods: (state: any) => {
+      state.loadingAcceptedPaymentMethods = true;
+    },
+    actionFetchAcceptedPaymentMethodsDone: (state: any, action: PayloadAction<any>) => {
+      state.loadingAcceptedPaymentMethods = false;
+      state.acceptedPaymentMethods = action.payload;
+    },
+    actionStripePaymentEnd: (state: any) => {
+      state.loading = false;
+    },
+    actionStripePaymentStart: (state: any) => {
+      state.loading = true;
+    },
+    actionStripePaymentRequestButtonEnd: (state: any) => {
+      state.loadingPaymentRequestButton = false;
+    },
+    actionStripePaymentRequestButtonStart: (state: any) => {
+      state.loadingPaymentRequestButton = true;
+    },
+    actionStripeWeChatPaymentEnd: (state: any) => {
+      state.loadingWeChatPayment = false;
+    },
+    actionStripeWeChatPaymentStart: (state: any) => {
+      state.loadingWeChatPayment = true;
+    },
+    setInvoiceOrCart: (state: any, action: PayloadAction<any>) => {
+      const { invoice, isCart } = action.payload;
+      state.invoice = invoice;
+      if (isCart) {
+        state.isCart = isCart;
+      }
+    },
+    stripePaymentEnd: (state: any) => {
+      state.loading = false;
+    },
+    stripePaymentStart: (state: any, action: PayloadAction<any>) => {
+      state.loading = true;
+    },
+  },
+});
+
+export default sliceStripeForm;

package/src/stripe/utils.ts

@@ -0,0 +1,21 @@
+export function companyStripePubKeyOrTestPubKey(company: any) {
+  return company.isTesting ? company.stripePublishableTestKey :
+    company.stripePublishableKey;
+}
+
+export const CARD_ELEMENT_OPTIONS = {
+  style: {
+    base: {
+      '::placeholder': {
+        color: '#999',
+        fontSize: '16px',
+      },
+      fontSize: '16px',
+      lineHeight: '1.33',
+      paddingTop: '4px',
+    },
+    invalid: {
+      color: '#9e2146',
+    },
+  },
+};

package/src/styles/globals.css

@@ -0,0 +1,191 @@
+.merchi-cart-body {
+  display: block;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 100px;
+  height: 450px;
+}
+
+.merchi-loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: var(--bs-height-md, 100px);
+}
+
+.merchi-loading-container-text {
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-align: center;
+}
+
+.merchi-payment-gateway-inactive {
+  height: 300px;
+  background: url("../assets/merchi-swipe-outline.png");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 276px 215px;
+  margin-top: 100px;
+}
+
+.merchi-tab-panel {
+  display: none;
+  padding: 1rem;
+}
+
+.merchi-cart-tab-content {
+  padding: 15px;
+}
+
+.merchi-cart-tab-content > .merchi-cart-tab-panel {
+  display: none;
+}
+
+.merchi-cart-tab-content > .active {
+  display: block;
+}
+
+.merchi-cart-clear-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.merchi-cart-clear-text {
+  font-size: 16px;
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+.merchi-cart-item-table-head {
+  border: none;
+  background-color: #f8f9fa;
+  padding: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  text-transform: uppercase;
+}
+
+.merchi-cart-item-table-head-right {
+  border: none;
+  background-color: #f8f9fa;
+  padding: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  text-transform: uppercase;
+  text-align: right;
+}
+
+.merchi-cart-success-message {
+  font-size: 16px;
+  padding-bottom: 4rem;
+  padding-top: 4rem;
+}
+
+/* Merchi checkout */
+.merchi-row {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 768px) {
+  .merchi-row {
+    flex-direction: row;
+  }
+  .merchi-column {
+    width: 50%;
+    padding-right: 10px;
+  }
+  .merchi-column:last-child {
+    padding-left: 10px;
+    padding-right: 0;
+  }
+}
+.merchi-collapse {
+  display: none;
+}
+
+.merchi-collapse.show {
+  display: block;
+}
+
+.merchi-nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.merchi-nav-link {
+  cursor: pointer;
+  display: block;
+  padding: 0.5rem 1rem;
+}
+
+.merchi-nav-link:hover, .merchi-nav-link:focus {
+  text-decoration: none;
+}
+
+.merchi-nav-link.disabled {
+  color: #6c757d;
+  pointer-events: none;
+  cursor: default;
+}
+
+.merchi-nav-tabs {
+  border-bottom: 1px solid #dee2e6;
+}
+
+.merchi-nav-tabs .merchi-nav-item {
+  margin-bottom: -1px;
+}
+
+.merchi-nav-tabs .merchi-nav-link {
+  border: 1px solid transparent;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.merchi-nav-tabs .merchi-nav-link:hover, .merchi-nav-tabs .merchi-nav-link:focus {
+  border-color: #e9ecef #e9ecef #dee2e6;
+}
+
+.merchi-nav-tabs .merchi-nav-link.disabled {
+  color: #6c757d;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.merchi-nav-tabs .merchi-nav-link.active,
+.merchi-nav-tabs .merchi-nav-item.show .merchi-nav-link {
+  color: #495057;
+  background-color: #fff;
+  border-color: #dee2e6 #dee2e6 #fff;
+}
+
+.merchi-nav-pills .merchi-nav-link {
+  border-radius: 0.25rem;
+}
+
+.merchi-nav-pills .merchi-nav-link.active,
+.merchi-nav-pills .show > .merchi-nav-link {
+  color: #fff;
+  background-color: #007bff;
+}
+
+.merchi-nav-fill .merchi-nav-item {
+  flex: 1 1 auto;
+  text-align: center;
+}
+
+.merchi-no-cart-items {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  height: 450px;
+}
+
+/*# sourceMappingURL=globals.css.map */

package/src/styles/globals.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["globals.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA","file":"globals.css"}