merchi_cart 0.0.7-e → 0.0.7

package/src/panels/PanelEditCartItem.tsx

@@ -1,58 +0,0 @@
-import { useSelector } from 'react-redux';
-import MerchiProductForm from 'merchi_product_form';
-import { tabIdItem } from '../slices/sliceCart';
-import { patchCartItem } from '../store';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
-import { Button, ButtonBack } from '../buttons';
-import {
-  CartBody,
-  CartFooter,
-  CartTabPanel,
-} from '../components';
-import { useCartContext } from '../CartProvider';
-
-function PanelEditCartItem() {
-  const {
-    productFormClassNames,
-    classNameBtnPrimary,
-    urlApi,
-  } = useCartContext();
-  const { cartItem, savingCartItem } = useSelector((s: any) => s.stateCartItem);
-  const formId = 'edit-cart-item-form';
-  function onSubmit(data: any) {
-    patchCartItem(data.job);
-  }
-  return (
-    <CartTabPanel tabId={tabIdItem}>
-      <CartBody style={{padding: '2rem'}}>
-        {cartItem.id &&
-          <MerchiProductForm
-            apiHost={urlApi}
-            isCartItem={true}
-            job={cartItem}
-            initProduct={cartItem.product}
-            onSubmit={onSubmit}
-            productFormId={formId}
-            hideRequestQuotationButton={true}
-            hidePaymentUpfrontButton={true}
-            {...productFormClassNames}
-          />
-        }
-      </CartBody>
-      <CartFooter>
-        <ButtonBack />
-        <Button
-          className={classNameBtnPrimary}
-          disabled={savingCartItem}
-          form={formId}
-        >
-          {savingCartItem && <FontAwesomeIcon icon={faCircleNotch} spin />}
-          {savingCartItem ? ' Loading...' : 'Save'}
-        </Button>
-      </CartFooter>
-    </CartTabPanel>
-  );
-}
-
-export default PanelEditCartItem;

package/src/panels/PanelPaymentSuccess.tsx

@@ -1,69 +0,0 @@
-import { useSelector } from 'react-redux';
-import {
-  CheckoutContainer,
-  InnerContainer,
-} from '../components/containers';
-import { tabIdPaymentSuccess } from '../slices/sliceCart';
-import { doCartComplete } from '../store';
-import { companyPrimaryAddress } from '../utilities/company';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
-import { Button, ButtonInvoiceDownload } from '../buttons';
-import { CartBody, CartTabPanel } from '../components';
-import { useCartContext } from '../CartProvider';
-
-function PanelPaymentSuccess() {
-  const {
-    classNameBtnPrimary,
-    customSuccessMessage,
-    urlTrackingPage,
-  } = useCartContext();
-  const {
-    cartCompleteLoading,
-    invoice,
-  } = useSelector((s: any) => s.stateCartPayment);
-  const { domain, id, unpaid } = invoice;
-  const email = domain && domain.company ? companyPrimaryAddress(domain.company) : null;
-  return (
-    <CartTabPanel tabId={tabIdPaymentSuccess}>
-      <CartBody>
-        <CheckoutContainer>
-          <InnerContainer>
-            <h2><FontAwesomeIcon icon={faCheckCircle} /></h2>
-            <h3>Order #{id}</h3>
-            <h4>Payment Received!</h4>
-            {customSuccessMessage ? (
-              <p className='merchi-cart-success-message '>
-                {customSuccessMessage}
-              </p>
-            ) : (
-              <p className='merchi-cart-success-message '>
-                Your order #{id} is being processed and you should
-                receive an email from us shortly. If you haven't heard from us within 24
-                hours please feel free to contact us{email ? ` at ${email.emailAddress}.` : '.'}
-              </p>
-            )}
-            {!unpaid && <p><ButtonInvoiceDownload /></p>}
-            <p>
-              <Button
-                className={classNameBtnPrimary}
-                disabled={cartCompleteLoading}
-                onClick={doCartComplete}
-              >
-                {cartCompleteLoading ? 'Loading...' : 'Done'}
-              </Button>
-            </p>
-          </InnerContainer>
-        </CheckoutContainer>
-        {urlTrackingPage &&
-          <iframe
-            style={{height: '1px', left: '0px', width: '1px'}}
-            src={urlTrackingPage}
-          />
-        }
-      </CartBody>
-    </CartTabPanel>
-  );
-}
-
-export default PanelPaymentSuccess;

package/src/panels/index.ts

@@ -1,15 +0,0 @@
-import PanelCartItems from "./PanelCartItems";
-import PanelCartShipment from "./PanelCartShipment";
-import PanelClearCart from "./PanelClearCart";
-import PanelClientCheckout from "./PanelClientCheckout";
-import PanelEditCartItem from "./PanelEditCartItem";
-import PanelPaymentSuccess from "./PanelPaymentSuccess";
-
-export {
-  PanelCartItems,
-  PanelCartShipment,
-  PanelClearCart,
-  PanelClientCheckout,
-  PanelPaymentSuccess,
-  PanelEditCartItem,
-}

package/src/slices/sliceCart.ts

@@ -1,159 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import {
-  faCheckCircle,
-  faCreditCard,
-  faMapMarkerAlt,
-  faShoppingCart,
-} from '@fortawesome/free-solid-svg-icons';
-
-export const tabIdClearCart = -2;
-export const tabIdItem = -1;
-export const tabIdItems = 0;
-export const tabIdShipment = 1;
-export const tabIdCheckout = 2;
-export const tabIdPaymentSuccess = 3;
-
-const tabItems = {disabled: false, icon: faShoppingCart, tabId: tabIdItems, name: 'Items'};
-const tabShipment = {disabled: true, icon: faMapMarkerAlt, tabId: tabIdShipment, name: 'Address'};
-const tabCheckout = {disabled: true, icon: faCreditCard, tabId: tabIdCheckout, name: 'Checkout'};
-const tabCheckoutSuccess = {
-  disabled: true,
-  icon: faCheckCircle,
-  tabId: tabIdPaymentSuccess,
-  name: 'Success',
-};
-
-const initTabs: Array<any> = [tabItems, tabCheckout, tabCheckoutSuccess];
-const tabsWithShipment: Array<any> = [tabItems, tabShipment, tabCheckout, tabCheckoutSuccess];
-
-function setDisableTab(tab: any, disabled: boolean) {
-  return {...tab, disabled};
-}
-
-function cartHasShippmentGroupsAndAllHaveSelectedGroups(cart: any) {
-  const shipmentGroups = cart.shipmentGroups ? cart.shipmentGroups : [];
-  const haveSelectedQuotes = shipmentGroups.map((g: any) => Boolean(g.selectedQuote));
-  return shipmentGroups.length && !haveSelectedQuotes.includes(false);
-}
-
-export function cartItemsNeedShipment(cart: any) {
-  const { cartItems = [] } = cart;
-  for (let i = 0; i < cartItems.length; i++) {
-    if (cartItems[i].product && cartItems[i].product.needsShipping) {
-      return true;
-    }
-  }
-  return false;
-}
-
-export const sliceCart = createSlice({
-  initialState: {
-    activeTab: 0,
-    cart: {},
-    cartSettingsInvalid: false,
-    deletingCartItemIndex: undefined,
-    domainId: undefined,
-    fetchingCart: false,
-    loading: false,
-    modalCartOpen: false,
-    modalClearCartOpen: false,
-    needsShipping: false,
-    tabs: initTabs,
-  },
-  name: 'stateCart',
-  reducers: {
-    cartSettingsInvalid: (state: any) => {
-      state.cartSettingsInvalid = true;
-      state.fetchingCart = false;
-    },
-    deleteCartItem: (state: any, action: PayloadAction<any>) => {
-      state.deletingCartItemIndex = action.payload;
-    },
-    deleteCartItemError: (state: any) => {
-      state.deletingCartItemIndex = undefined;
-    },
-    deleteCartItemSuccess: (state: any, action: PayloadAction<any>) => {
-      const cart = action.payload;
-      const needsShipping = cartItemsNeedShipment(cart);
-      state.deletingCartItemIndex = undefined;
-      state.cart = cart;
-      state.needsShipping = needsShipping;
-      if (cart.cartItems.length === 0) {
-        state.tabs = initTabs;
-      } else {
-        if (needsShipping) {
-          state.tabs = tabsWithShipment;
-          if (cart.cartItems.length) {
-            state.tabs[1] = setDisableTab(tabShipment, false);
-            if (cartHasShippmentGroupsAndAllHaveSelectedGroups(cart)) {
-              state.tabs[2] = setDisableTab(tabCheckout, false);
-            }
-          }
-        } else {
-          state.tabs = initTabs;
-        }
-      }
-    },
-    fetchCart: (state: any) => {
-      state.fetchingCart = true;
-    },
-    fetchCartError: (state: any) => {
-      state.fetchingCart = false;
-    },
-    fetchCartSuccess: (state: any, action: PayloadAction<any>) => {
-      const cart = action.payload;
-      const needsShipping = cartItemsNeedShipment({...cart});
-      state.cart = cart;
-      state.needsShipping = needsShipping;
-      if (needsShipping) {
-        const initShipment = [...tabsWithShipment];
-        if (cart.cartItems.length) {
-          initShipment[1] = setDisableTab(tabShipment, false);
-          if (cartHasShippmentGroupsAndAllHaveSelectedGroups(cart)) {
-            initShipment[2] = setDisableTab(tabCheckout, false);
-          }
-        }
-        state.tabs = initShipment;
-      } else {
-        state.tabs = initTabs;
-      }
-      state.activeTab = 0;
-      state.fetchingCart = false;
-    },
-  	fetchTheme: (state: any) => {
-      state.loading = true;
-    },
-    fetchThemeError: (state: any) => {
-      state.loading = false;
-    },
-    fetchThemeSuccess: (state: any) => {
-      state.loading = false;
-    },
-    setActiveTab: (state: any, action: PayloadAction<number>) => {
-      state.activeTab = action.payload;
-    },
-    setActiveTabAndEditDisabled: (state: any, action: PayloadAction<any>) => {
-      const { tabId, tabIndexToSet, disabled } = action.payload;
-      state.activeTab = tabId;
-      state.tabs[tabIndexToSet].disabled = disabled;
-    },
-    setCart: (state: any, action: PayloadAction<any>) => {
-      state.cart = action.payload;
-    },
-    setCartShipmentGroups: (state: any, action: PayloadAction<any>) => {
-      state.cart.shipmentGroups = action.payload;
-    },
-    setCartClient: (state: any, action: PayloadAction<any>) => {
-      state.cart.client = action.payload;
-    },
-    setDomainId: (state: any, action: PayloadAction<number>) => {
-      state.domainId = action.payload;
-    },
-    toggleCartOpen: (state: any) => {
-      state.modalCartOpen = !state.modalCartOpen;
-    },
-    toggleClearCart: (state: any) => {
-      state.modalClearCartOpen = !state.modalClearCartOpen;
-    },
-  },
-});

package/src/slices/sliceCartAlert.ts

@@ -1,39 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { faCheckCircle, faExclamationTriangle, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-
-export const sliceCartAlert = createSlice({
-  initialState: {
-    alert: {
-      icon: faInfoCircle,
-      message: '',
-      show: false,
-      title: '',
-      type: 'info',
-    },
-  },
-  name: 'stateCartAlert',
-  reducers: {
-    closeAlert: (state: any) => {
-      state.alert.show = false;
-    },
-    setAlert: (state: any, action: PayloadAction<any>) => {
-      state.alert = action.payload;
-    },
-    showAlertDanger: (state: any, action: PayloadAction<any>) => {
-      state.alert = {
-        ...action.payload,
-        icon: faExclamationTriangle,
-        show: true,
-        type: 'danger',
-      };
-    },
-    showAlertSuccess: (state: any, action: PayloadAction<any>) => {
-      state.alert = {
-        ...action.payload,
-        icon: faCheckCircle,
-        show: true,
-        type: 'success',
-      };
-    },
-  },
-});

package/src/slices/sliceCartItem.ts

@@ -1,29 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-
-const sliceCartItem = createSlice({
-  initialState: {
-    cartItem: {},
-    fetchingPrice: false,
-    index: 0,
-    savingCartItem: false,
-  },
-  name: 'stateCartItem',
-  reducers: {
-    patchCartItem: (state: any) => {
-      state.savingCartItem = true;
-    },
-    patchCartItemError: (state: any) => {
-      state.savingCartItem = false;
-    },
-    patchCartItemSuccess: (state: any) => {
-      state.savingCartItem = false;
-    },
-    setCartItem: (state: any, action: PayloadAction<any>) => {
-      const { cartItem, index } = action.payload;
-      state.cartItem = cartItem;
-      state.index = index;
-    }
-  },
-});
-
-export default sliceCartItem;

package/src/slices/sliceCartPayment.ts

@@ -1,45 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-
-function setLoadingKeys(state: any, action: any, newState: boolean) {
-  const {
-    loadingKey = null,
-    loadingKeys = null,
-  } = action.payload;
-  if (Array.isArray(loadingKeys)) {
-    loadingKeys.map((lK: string) => state[lK] = newState);
-  }
-  if (typeof loadingKey === 'string') {
-    state[loadingKey] = newState;
-  }
-}
-
-export const sliceCartPayment = createSlice({
-  initialState: {
-    cartCompleteLoading: false,
-    invoice: {},
-    loading: false,
-  },
-  name: 'stateCartPayment',
-  reducers: {
-    doCardComplete: (state: any) => {
-      state.cartCompleteLoading = true;
-    },
-    fetchInvoice: (state: any, action: any) => {
-      setLoadingKeys(state, action, true);
-    },
-    fetchInvoiceError: (state: any, action: any) => {
-      setLoadingKeys(state, action, false);
-    },
-    fetchInvoiceSuccess: (state: any, action: any) => {
-      const { invoice } = action.payload;
-      state.invoice = invoice;
-      setLoadingKeys(state, action, false);
-    },
-    setInvoice: (state: any, action: any) => {
-      state.invoice = action.payload;
-    },
-    creditCardPaySuccess: (state: any, action: PayloadAction<any>) => {
-      state.invoice = action.payload;
-    },
-  },
-});

package/src/slices/sliceCartShipment.ts

@@ -1,67 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-
-export const shipmentFormId = '_shipment-address-form-id';
-
-export const sliceCartShipment = createSlice({
-  initialState: {
-    addressFieldsOpen: false,
-    fetchingShipmentGroups: false,
-    fetchingShipmentQuote: false,
-    googleMapsInitialised: false,
-    receiverAddress: {},
-    receiverNotes: '',
-    savingShipmentAddress: false,
-    shipmentGroups: [],
-    selectedQuotes: [],
-  },
-  name: 'stateCartShipment',
-  reducers: {
-    initCartShipmentSlice: (state: any, action: PayloadAction<any>) => {
-      const cart = action.payload;
-      const groups = cart.shipmentGroups;
-      state.receiverAddress = cart.receiverAddress;
-      state.receiverNotes = cart.receiverNotes;
-      state.shipmentGroups = groups;
-      state.selectedQuotes = groups.map((g: any) => g.selectedQuote);
-    },
-    saveShipmentAddress: (state: any) => {
-      state.savingShipmentAddress = true;
-    },
-    saveShipmentAddressError: (state: any) => {
-      state.savingShipmentAddress = false;
-    },
-    saveShipmentAddressSuccess: (state: any) => {
-      state.savingShipmentAddress = false;
-    },
-    setGoogleMapsInitialised: (state: any, action: PayloadAction<boolean>) => {
-      state.googleMapsInitialised = action.payload;
-    },
-    setSelectedShipmentQuote: (state: any, action: PayloadAction<any>) => {
-      const { groupIndex, quote } = action.payload;
-      state.selectedQuotes[groupIndex] = quote;
-      state.fetchingShipmentQuote = true;
-    },
-    setSelectedShipmentQuoteError: (state: any) => {
-      state.fetchingShipmentQuote = false;
-    },
-    setSelectedShipmentQuoteSuccess: (state: any) => {
-      state.fetchingShipmentQuote = false;
-    },
-    toggleAddressFields: (state: any) => {
-      state.addressFieldsOpen = !state.addressFieldsOpen;
-    },
-    updateShipmentAddress: (state: any, action: PayloadAction<any>) => {
-      state.receiverAddress = action.payload;
-      state.fetchingShipmentGroups = true;
-    },
-    updateShipmentAddressError: (state: any) => {
-      state.fetchingShipmentGroups = false;
-    },
-    updateShipmentAddressSuccess: (state: any, action: PayloadAction<any>) => {
-      const groups = action.payload;
-      state.fetchingShipmentGroups = false;
-      state.shipmentGroups = groups;
-      state.selectedQuotes = groups.map((g: any) => g.selectedQuote);
-    },
-  },
-});

package/src/slices/sliceFormReturningCustomer.ts

@@ -1,25 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-
-const sliceFormReturningCustomer = createSlice({
-  initialState: {
-    returningCustomerError: false,
-    returningCustomerLoading: false
-  },
-  name: 'stateFormReturningCustomer',
-  reducers: {
-    setReturningCustomerError: (state: any, action: PayloadAction<boolean>) => {
-      state.returningCustomerError = action.payload;
-    },
-    tryReturningCustomer: (state: any) => {
-      state.returningCustomerLoading = true;
-    },
-    tryReturningCustomerError: (state: any) => {
-      state.returningCustomerLoading = false;
-    },
-    tryReturningCustomerSuccess: (state: any) => {
-      state.returningCustomerLoading = false;
-    },
-  },
-});
-
-export default sliceFormReturningCustomer;

package/src/slices/sliceNewCustomerForm.ts

@@ -1,24 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-
-const sliceNewCustomerForm = createSlice({
-  initialState: {
-    creatingNewCustomer: false,
-    serverError: '',
-  },
-  name: 'stateNewCustomerForm',
-  reducers: {
-    createNewCustomer: (state: any) => {
-      state.creatingNewCustomer = true;
-      state.serverError = '';
-    },
-    createNewCustomerError: (state: any, action: PayloadAction<string>) => {
-      state.creatingNewCustomer = false;
-      state.serverError = action.payload;
-    },
-    createNewCustomerSuccess: (state: any) => {
-      state.creatingNewCustomer = false;
-    },
-  },
-});
-
-export default sliceNewCustomerForm;

package/src/square/SquareCard.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { CreditCard, PaymentForm } from 'react-square-web-payments-sdk';
-import { actionSquarePaymentProcess } from './actions';
-import { currencyMap } from '../utilities/currency';
-import { callbackCreditCardPaymentSuccess } from '../store';
-
-declare const SQUARE_APPLICATION_ID: string;
-
-function SquareCard() {
-  const { cart } = useSelector((s: any) => s.stateCart);
-  const { currency, domain, totalCost } = cart;
-  const company = domain.company;
-  const dispatch = useDispatch();
-  function ButtonText() {
-    return (
-      <span>
-        Pay {currencyMap[currency]}
-        {totalCost}<small> / inc tax</small>
-      </span>
-    );
-  }
-  const squareWebLocationId = company.squareWebLocationId;
-  return squareWebLocationId ?
-    (
-      <PaymentForm
-        /**
-         * Identifies the calling form with a verified application ID generated from
-         * the Square Application Dashboard.
-         */
-        applicationId={SQUARE_APPLICATION_ID}
-        /**
-         * Invoked when payment form receives the result of a tokenize generation
-         * request. The result will be a valid credit card or wallet token, or an error.
-         */
-        cardTokenizeResponseReceived={(token: any, buyer: any) =>
-          actionSquarePaymentProcess(
-            dispatch,
-            cart,
-            token.token,
-            callbackCreditCardPaymentSuccess)
-        }
-        /**
-         * Identifies the location of the merchant that is taking the payment.
-         * Obtained from the Square Application Dashboard - Locations tab.
-         */
-        locationId={squareWebLocationId}
-      >
-        <CreditCard>
-          <ButtonText />
-        </CreditCard>
-      </PaymentForm>
-    )
-  :
-    <></>;
-}
-
-export default SquareCard;

package/src/square/actions.ts

@@ -1,40 +0,0 @@
-import { Merchi } from 'merchi_sdk_ts';
-import sliceSquareAlerts from './slices/sliceSquareAlerts';
-import sliceSquareForm from './slices/sliceSquareForm';
-
-const { alertError } = sliceSquareAlerts.actions;
-
-type DispatchInterface = (action: any) => void;
-
-export function actionAlertError(dispatch: DispatchInterface, message: string) {
-  dispatch(alertError(message));
-}
-
-const merchi = new Merchi();
-
-const {
-  actionSquarePaymentEnd,
-  actionSquarePaymentStart,
-} = sliceSquareForm.actions;
-
-export async function actionSquarePaymentProcess(
-  dispatch: any,
-  cart: any,
-  sourceId: string,
-  callbackPaymentSuccess: any,
-) {
-  dispatch(actionSquarePaymentStart());
-  let url = `/cart/${cart.id}/square/payment/`;
-  const fetchOptions: any = {
-    method: 'GET',
-    query: [['sourceId', sourceId], ['cart_token', cart.token]],
-  };
-  try {
-    const r = await merchi.authenticatedFetch(url, fetchOptions);
-    callbackPaymentSuccess(r.invoice);
-    dispatch(actionSquarePaymentEnd());
-  } catch(e: any) {
-    actionAlertError(dispatch, e);
-    dispatch(actionSquarePaymentEnd());
-  }
-}

package/src/square/slices/reducersSquare.ts

@@ -1,9 +0,0 @@
-import sliceSquareAlerts from './sliceSquareAlerts';
-import sliceSquareForm from './sliceSquareForm';
-
-const reducersSquare = {
-  stateSquareAlerts: sliceSquareAlerts.reducer,
-  stateSquareForm: sliceSquareForm.reducer,
-};
-
-export default reducersSquare;

package/src/square/slices/sliceSquareAlerts.ts

@@ -1,29 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-
-const sliceSquareAlerts = createSlice({
-  initialState: {
-    alerts: [],
-  },
-  name: 'stateSquareAlerts',
-  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 sliceSquareAlerts;