merchi_cart 0.0.7-c → 0.0.7-e

package/src/panels/PanelEditCartItem.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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