merchi_cart 0.0.7-e → 0.0.7

package/src/stripe/StripeCardForm.tsx

@@ -1,86 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,191 +0,0 @@
-.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

@@ -1 +0,0 @@
-{"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"}