merchi_cart 0.0.7-c → 0.0.7-e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "merchi_cart",
-  "version": "0.0.7c",
+  "version": "0.0.7e",
   "description": "Merchi's cart",
   "source": "src/index.ts",
   "main": "lib/index.js",
@@ -37,7 +37,8 @@
   "homepage": "https://github.com/merchisdk/merchi_cart#readme",
   "files": [
     "esm",
-    "lib"
+    "lib",
+    "src"
   ],
   "peerDependencies": {
     "react": "^18.0.0",
@@ -88,7 +89,7 @@
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "merchi_product_form": "^1.0.2",
-    "merchi_sdk_ts": "^1.0.2-f",
+    "merchi_sdk_ts": "^1.0.2-g",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.44",
     "react": "18.2.0",

package/src/Cart.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { Provider, useSelector } from 'react-redux';
+import { store } from './store';
+import CartAlert from './CartAlert';
+import CartHeader from './CartHeader';
+import CartNav from './tabs/CartNav';
+import CartTotals from './CartTotals';
+import CartProvider, { PropsCart, useCartContext } from './CartProvider';
+import {
+  ButtonBack,
+  ButtonClearCart,
+  ButtonNextDynamic,
+} from './buttons';
+import {
+  CartFooter,
+  CartPaymentSettingsInvalid,
+  LoadingTemplate,
+} from './components';
+import {
+  PanelCartItems,
+  PanelCartShipment,
+  PanelClearCart,
+  PanelClientCheckout,
+  PanelEditCartItem,
+  PanelPaymentSuccess,
+}from './panels';
+import {
+  tabIdClearCart,
+  tabIdItem,
+  tabIdPaymentSuccess,
+} from './slices/sliceCart';
+import {
+  actionFetchTheme,
+  initMerchiCart,
+} from './store';
+import './styles/globals.css';
+
+function CartComponents() {
+  const {
+    domainId,
+    includeTheme,
+    initialiseCart
+  } = useCartContext();
+  const {
+    activeTab,
+    cartSettingsInvalid,
+    fetchingCart,
+  } = useSelector((s: any) => s.stateCart);
+  React.useEffect(() => {
+    if (initialiseCart && domainId) {
+      if (includeTheme) {
+        actionFetchTheme(domainId);
+      }
+      initMerchiCart(domainId);
+    }
+  }, [domainId, includeTheme, initialiseCart]);
+  return (
+    <>
+      <CartHeader />
+      <CartAlert />
+      <CartNav />
+      {fetchingCart ? (
+        <LoadingTemplate />
+      ) : cartSettingsInvalid ? (
+        <CartPaymentSettingsInvalid />
+      ) : (
+        <div className='merchi-tab-pane'>
+          <PanelClearCart />
+          <PanelEditCartItem />
+          <PanelCartItems />
+          <PanelCartShipment />
+          <PanelClientCheckout />
+          <PanelPaymentSuccess />
+          {![tabIdItem, tabIdClearCart, tabIdPaymentSuccess].includes(activeTab) &&
+            <>
+              <CartFooter>
+                <CartTotals />
+              </CartFooter>
+              <CartFooter>
+                <ButtonClearCart />
+                <ButtonBack />
+                <ButtonNextDynamic />
+              </CartFooter>
+            </>
+          }
+        </div>
+        )}
+    </>
+  );
+}
+
+export default function Cart(props: PropsCart) {
+  return (
+    <CartProvider {...props}>
+      <Provider store={store}>
+        <CartComponents />
+      </Provider>
+    </CartProvider>
+  );
+}

package/src/CartAlert.tsx

@@ -0,0 +1,34 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { Alert } from './components';
+import { closeAlert } from './store';
+import { useCartContext } from './CartProvider';
+
+function CartAlert() {
+  const { classNameBtnClose } = useCartContext();
+  const { alert } = useSelector((s: any) => s.stateCartAlert);
+  const { icon, message, show, title } = alert;
+  return (
+    <>
+      {show && (
+        <Alert alertType={alert.type}>
+          {icon &&
+            <FontAwesomeIcon icon={icon} />
+          } <strong>{title}</strong> {message}
+          <button
+            type="button"
+            className={classNameBtnClose}
+            data-bs-dismiss="alert"
+            aria-label="Close"
+            onClick={closeAlert}
+          >
+            <FontAwesomeIcon icon={faTimes} />
+          </button>
+        </Alert>
+      )}
+    </>
+  );
+}
+
+export default CartAlert;

package/src/CartHeader.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faShoppingCart, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { useCartContext } from './CartProvider';
+
+function CartHeader() {
+  const {
+    classNameCartHeader,
+    classNameBtnClose,
+    onClickClose,
+  } = useCartContext();
+  return (
+    <div className={classNameCartHeader}>
+      <FontAwesomeIcon icon={faShoppingCart} /> Shopping cart
+      <button
+        type="button"
+        className={classNameBtnClose}
+        aria-label="Close"
+        onClick={onClickClose}
+      >
+        <FontAwesomeIcon icon={faTimes} />
+      </button>
+    </div>
+  );
+}
+
+export default CartHeader;

package/src/CartProvider.tsx

@@ -0,0 +1,386 @@
+import * as React from 'react';
+import { createContext, ReactNode, useContext, useState } from 'react';
+
+export interface PropsCart {
+  classNameAlertError?: string;
+  classNameAlertInfo?: string;
+  classNameAlertSuccess?: string;
+  classNameAlertWarning?: string;
+  classNameBtn?: string;
+  classNameBtnBack?: string;
+  classNameBtnCartClear?: string;
+  classNameBtnClose?: string;
+  classNameBtnDanger?: string;
+  classNameBtnDefault?: string;
+  classNameBtnDownloadInvoice?: string;
+  classNameBtnPrimary?: string;
+  classNameBtnLink?: string;
+  classNameBtnNext?: string;
+  classNameBtnNextComplete?: string;
+  classNameBtnPay?: string;
+  classNameCartBody?: string;
+  classNameCartFooter?: string;
+
+  classNameCartFormCheckbox?: string;
+  classNameCartFormGroup?: string;
+  classNameCartFormGroupCheckbox?: string;
+  classNameCartFormInput?: string;
+  classNameCartFormLabelCheckbox?: string;
+  classNameCartInputError?: string;
+  classNameCartNav?: string;
+  classNameCartRow?: string;
+  classNameCartRowColumn?: string;
+  classNameCartTabItem?: string;
+  classNameCartTabItemLink?: string;
+  classNameCartGoogleSuggestList?: string;
+  classNameCartGoogleSuggestListItem?: string;
+
+  classNameCartHeader?: string;
+  classNameCartItemFeatureImage?: string;
+  classNameCartItemInfo?: string;
+  classNameCartItemInfoCell?: string;
+  classNameCartItemInfoCellRight?: string;
+  classNameCartItemInfoContainer?: string;
+  classNameCartTab?: string;
+  classNameCartTabPanel?: string;
+  classNameCartTitle?: string;
+  classNameCartTotalContainer?: string;
+  classNameCartTotalItem?: string;
+  classNameCartTotalItemPrice?: string;
+  classNameClearCartContainer?: string;
+  classNameClearCartText?: string;
+  classNameListClientInfo?: string;
+  classNameListContainer?: string;
+  classNameListItem?: string;
+  classNameList?: string;
+  classNameListInline?: string;
+  classNameListUnstyled?: string;
+  classNameLoadingTemplate?: string;
+  classNameLoadingTemplateContainer?: string;
+  classNameNoItems?: string;
+  classNameShipmentOption?: string;
+  classNameTable?: string;
+  classNameTableContainer?: string;
+  classNameVariationsList?: string;
+  customSuccessMessage?: string;
+  domainId?: number;
+  googlePlacesLoaded?: boolean;
+  includeTheme?: boolean,
+  initialiseCart?: boolean;
+  onClickClose?: () => void;
+  showUserTermsAndConditions?: boolean;
+  productFormClassNames?: any;
+  urlApi?: string;
+  urlFrontend?: string;
+  urlTrackingPage?: string;
+}
+
+const CartContext = createContext<PropsCart>({
+  classNameAlertError: undefined,
+  classNameAlertInfo: undefined,
+  classNameAlertSuccess: undefined,
+  classNameAlertWarning: undefined,
+  classNameBtn: undefined,
+  classNameBtnBack: undefined,
+  classNameBtnCartClear: undefined,
+  classNameBtnClose: undefined,
+  classNameBtnDanger: undefined,
+  classNameBtnDefault: undefined,
+  classNameBtnDownloadInvoice: undefined,
+  classNameBtnPrimary: undefined,
+  classNameBtnLink: undefined,
+  classNameBtnNext: undefined,
+  classNameBtnNextComplete: undefined,
+  classNameBtnPay: undefined,
+  classNameCartBody: undefined,
+  classNameCartFooter: undefined,
+  classNameCartFormCheckbox: undefined,
+  classNameCartFormGroup: undefined,
+  classNameCartFormGroupCheckbox: undefined,
+  classNameCartFormInput: undefined,
+  classNameCartInputError: undefined,
+  classNameCartFormLabelCheckbox: undefined,
+  classNameCartRow: undefined,
+  classNameCartRowColumn: undefined,
+  classNameCartTabItem: undefined,
+  classNameCartTabItemLink: undefined,
+  classNameCartGoogleSuggestList: undefined,
+  classNameCartGoogleSuggestListItem: undefined,
+  classNameCartHeader: undefined,
+  classNameCartItemFeatureImage: undefined,
+  classNameCartItemInfo: undefined,
+  classNameCartItemInfoCell: undefined,
+  classNameCartItemInfoCellRight: undefined,
+  classNameCartItemInfoContainer: undefined,
+  classNameCartNav: undefined,
+  classNameCartTab: undefined,
+  classNameCartTabPanel: undefined,
+  classNameCartTitle: undefined,
+  classNameCartTotalContainer: undefined,
+  classNameCartTotalItem: undefined,
+  classNameCartTotalItemPrice: undefined,
+  classNameClearCartContainer: undefined,
+  classNameClearCartText: undefined,
+  classNameListClientInfo: undefined,
+  classNameListContainer: undefined,
+  classNameListItem: undefined,
+  classNameList: undefined,
+  classNameListInline: undefined,
+  classNameListUnstyled: undefined,
+  classNameLoadingTemplate: undefined,
+  classNameLoadingTemplateContainer: undefined,
+  classNameNoItems: undefined,
+  classNameShipmentOption: undefined,
+  classNameTable: undefined,
+  classNameTableContainer: undefined,
+  classNameVariationsList: undefined,
+  customSuccessMessage: undefined,
+  domainId: undefined,
+  googlePlacesLoaded: false,
+  includeTheme: false,
+  initialiseCart: true,
+  onClickClose: undefined,
+  productFormClassNames: {},
+  showUserTermsAndConditions: undefined,
+  urlApi: undefined,
+  urlFrontend: undefined,
+  urlTrackingPage: undefined,
+});
+
+export const useCartContext = () => useContext(CartContext);
+
+interface PropsCartProvider {
+  children: ReactNode;
+  classNameAlertError?: string;
+  classNameAlertInfo?: string;
+  classNameAlertSuccess?: string;
+  classNameAlertWarning?: string;
+  classNameBtn?: string;
+  classNameBtnBack?: string;
+  classNameBtnCartClear?: string;
+  classNameBtnClose?: string;
+  classNameBtnDanger?: string;
+  classNameBtnDefault?: string;
+  classNameBtnDownloadInvoice?: string;
+  classNameBtnPrimary?: string;
+  classNameBtnNext?: string;
+  classNameBtnNextComplete?: string;
+  classNameBtnLink?: string;
+  classNameBtnPay?: string;
+  classNameCartBody?: string;
+  classNameCartFooter?: string;
+  classNameCartFormCheckbox?: string;
+  classNameCartFormGroup?: string;
+  classNameCartFormGroupCheckbox?: string;
+  classNameCartFormInput?: string;
+  classNameCartFormLabelCheckbox?: string;
+  classNameCartInputError?: string;
+  classNameCartRow?: string;
+  classNameCartRowColumn?: string;
+  classNameCartTabItem?: string;
+  classNameCartTabItemLink?: string;
+  classNameCartGoogleSuggestList?: string;
+  classNameCartGoogleSuggestListItem?: string;
+  classNameCartHeader?: string;
+  classNameCartItemFeatureImage?: string;
+  classNameCartItemInfo?: string;
+  classNameCartItemInfoCell?: string;
+  classNameCartItemInfoCellRight?: string;
+  classNameCartNav?: string;
+  classNameCartTab?: string;
+  classNameCartTabPanel?: string;
+  classNameCartTitle?: string;
+  classNameCartTotalContainer?: string;
+  classNameCartTotalItem?: string;
+  classNameCartTotalItemPrice?: string;
+  classNameClearCartContainer?: string;
+  classNameClearCartText?: string;
+  classNameListClientInfo?: string;
+  classNameCartItemInfoContainer?: string;
+  classNameList?: string;
+  classNameListInline?: string;
+  classNameListContainer?: string;
+  classNameListItem?: string;
+  classNameListUnstyled?: string;
+  classNameLoadingTemplate?: string;
+  classNameLoadingTemplateContainer?: string;
+  classNameNoItems?: string;
+  classNameShipmentOption?: string;
+  classNameTable?: string;
+  classNameTableContainer?: string;
+  classNameVariationsList?: string;
+  customSuccessMessage?: string;
+  domainId?: number;
+  googlePlacesLoaded?: boolean;
+  includeTheme?: boolean;
+  initialiseCart?: boolean;
+  onClickClose?: () => void;
+  productFormClassNames?: any;
+  showUserTermsAndConditions?: boolean;
+  urlApi?: string;
+  urlFrontend?: string;
+  urlTrackingPage?: string;
+}
+
+const CartProvider = ({
+  children,
+  classNameAlertError = 'alert alert-danger',
+  classNameAlertInfo = 'alert alert-info',
+  classNameAlertSuccess = 'alert alert-success',
+  classNameAlertWarning = 'alert alert-warning',
+  classNameBtn = 'btn',
+  classNameBtnBack = 'btn-lg btn-default pull-left',
+  classNameBtnCartClear = 'btn-lg btn-danger mr-auto',
+  classNameBtnClose = 'btn-close',
+  classNameBtnDanger = 'btn btn-md btn-danger',
+  classNameBtnDefault = 'btn btn-md btn-default',
+  classNameBtnDownloadInvoice = 'btn btn-lg btn-primary',
+  classNameBtnPrimary = 'btn btn-md btn-primary',
+  classNameBtnLink = 'btn-md btn-link',
+  classNameBtnNext = 'btn-lg btn-primary',
+  classNameBtnNextComplete = 'btn-lg btn-success',
+  classNameBtnPay = 'btn-lg btn-primary width-full',
+  classNameCartBody = 'merchi-cart-body',
+  classNameCartFooter = 'merchi-cart-footer', // add to sass
+  classNameCartFormCheckbox = 'form-check-input',
+  classNameCartFormGroup = 'form-group',
+  classNameCartFormGroupCheckbox = 'form-check',
+  classNameCartFormInput = 'form-control',
+  classNameCartFormLabelCheckbox = '',
+  classNameCartInputError = 'text-danger',
+  classNameCartNav = 'nav merchi-nav-tabs merchi-nav merchi-nav-fill merchi-nav-pills',
+  classNameCartRow = 'merchi-row',
+  classNameCartRowColumn = 'merchi-column',
+  classNameCartTabItem = 'nav-item merchi-nav-item',
+  classNameCartTabItemLink = 'merchi-nav-link',
+  classNameCartGoogleSuggestList = 'list-group m-b-0',
+  classNameCartGoogleSuggestListItem = 'list-group-item cursor-pointer',
+  classNameCartHeader = 'merchi-cart-header', // add to sass
+  classNameCartItemFeatureImage = 'img-rounded m-10',
+  classNameCartItemInfo = 'text-muted font-weight-normal font-italic',
+  classNameCartItemInfoCell = 'border-0 align-middle',
+  classNameCartItemInfoCellRight = 'border-0 align-middle text-right',
+  classNameCartItemInfoContainer = 'ml-3 d-inline-block align-middle',
+  classNameCartTab = 'merchi-tab-content',
+  classNameCartTabPanel = 'merchi-tab-panel',
+  classNameCartTitle = 'merchi-cart-title', // add to sass // paddingBottom: '0.5rem', paddingTop: '0.5rem', textAlign: 'center',
+  classNameCartTotalContainer = 'merchi-cart-total-container', // add to sass
+  classNameCartTotalItem = 'merchi-cart-total-item', // add to sass; original text-right cart-cell-width-subtotal
+  classNameCartTotalItemPrice = 'merchi-cart-total-item-price', // add to sass: original text-right
+  classNameClearCartContainer = 'merchi-cart-clear-container',
+  classNameClearCartText = 'merchi-cart-clear-text',
+  classNameListClientInfo = 'merchi-cart-client-info-list', // add to sass: original className='list-unstyled text-center' fontSize: '15px', listStyle: 'none', paddingBottom: '0px', paddingLeft: '0px'
+  classNameList = 'list-group',
+  classNameListInline = 'list-inline',
+  classNameListUnstyled = 'list-unstyled',
+  classNameListContainer = 'pb-2',
+  classNameListItem = 'list-group-item',
+  classNameLoadingTemplate = 'merchi-loading-template',
+  classNameLoadingTemplateContainer = 'merchi-loading-template-container',
+  classNameNoItems = 'merchi-no-cart-items',
+  classNameShipmentOption = 'merchi-shipment-option',
+  classNameTable = 'table table-bordered',
+  classNameTableContainer = 'table-responsive',
+  classNameVariationsList = 'list-unstyled list-inline',
+  customSuccessMessage,
+  domainId,
+  includeTheme = false,
+  initialiseCart = true,
+  onClickClose = () => console.log('close merchi cart!'),
+  productFormClassNames = {},
+  showUserTermsAndConditions = true,
+  urlApi = 'https://api.merchi.co/v6/',
+  urlFrontend = 'https://merchi.co/',
+  urlTrackingPage,
+}: PropsCartProvider) => {
+  const [googlePlacesLoaded, setGoogleMapsLoaded] = useState(false);
+  // Persistent callback setup
+  if (typeof window !== 'undefined') {
+    if (!(window as any).googleMapsScriptLoaded) {
+      (window as any).googleMapsScriptLoaded = () => {
+        setGoogleMapsLoaded(true);
+      };
+    }
+  }
+  return (
+    <CartContext.Provider
+      value={
+        {
+          classNameAlertError,
+          classNameAlertInfo,
+          classNameAlertSuccess,
+          classNameAlertWarning,
+          classNameBtn,
+          classNameBtnBack,
+          classNameBtnCartClear,
+          classNameBtnClose,
+          classNameBtnDanger,
+          classNameBtnDefault,
+          classNameBtnDownloadInvoice,
+          classNameBtnPrimary,
+          classNameBtnLink,
+          classNameBtnNext,
+          classNameBtnNextComplete,
+          classNameBtnPay,
+          classNameCartBody,
+          classNameCartFooter,
+          classNameCartFormCheckbox,
+          classNameCartFormGroup,
+          classNameCartFormGroupCheckbox,
+          classNameCartFormInput,
+          classNameCartFormLabelCheckbox,
+          classNameCartInputError,
+          classNameCartNav,
+          classNameCartRow,
+          classNameCartRowColumn,
+          classNameCartTabItem,
+          classNameCartTabItemLink,
+          classNameCartGoogleSuggestList,
+          classNameCartGoogleSuggestListItem,
+          classNameCartHeader,
+          classNameCartItemFeatureImage,
+          classNameCartItemInfo,
+          classNameCartItemInfoCell,
+          classNameCartItemInfoCellRight,
+          classNameCartItemInfoContainer,
+          classNameCartTab,
+          classNameCartTabPanel,
+          classNameCartTitle,
+          classNameCartTotalContainer,
+          classNameCartTotalItem,
+          classNameCartTotalItemPrice,
+          classNameClearCartContainer,
+          classNameClearCartText,
+          classNameListClientInfo,
+          classNameList,
+          classNameListInline,
+          classNameListContainer,
+          classNameListItem,
+          classNameListUnstyled,
+          classNameLoadingTemplate,
+          classNameLoadingTemplateContainer,
+          classNameNoItems,
+          classNameShipmentOption,
+          classNameTable,
+          classNameTableContainer,
+          classNameVariationsList,
+          customSuccessMessage,
+          domainId,
+          googlePlacesLoaded,
+          includeTheme,
+          initialiseCart,
+          onClickClose,
+          productFormClassNames,
+          showUserTermsAndConditions,
+          urlApi,
+          urlFrontend,
+          urlTrackingPage,
+        } as PropsCart
+      }
+    >
+      {children}
+    </CartContext.Provider>
+  );
+};
+
+export default CartProvider;

package/src/CartTotals.tsx

@@ -0,0 +1,106 @@
+import { useSelector } from 'react-redux';
+import { formatCurrency } from './utilities/currency';
+import { cartRequiresShipment } from './utilities/cart';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
+import { Table } from './components';
+import { useCartContext } from './CartProvider';
+
+interface Props {
+  attribute: string;
+}
+
+function CartTotal({ attribute }: Props) {
+  const {
+    cart,
+    fetchingCart,
+    loading,
+  } = useSelector((s: any) => s.stateCart);
+  const {
+    fetchingShipmentGroups,
+    fetchingShipmentQuote,
+  } = useSelector((s: any) => s.stateCartShipment);
+  const { domain } = cart;
+  const company = domain ? domain.company : null;
+  const currency = company ? company.defaultCurrency : 'AUD';
+  const isLoading =
+    fetchingCart ||
+    fetchingShipmentGroups ||
+    fetchingShipmentQuote ||
+    loading;
+  const money = cart[attribute] ? cart[attribute] : 0;
+  return (
+    <div style={{paddingRight: 8}}>
+      {isLoading ?
+        <FontAwesomeIcon
+          icon={faCircleNotch}
+          spin={true}
+        />
+      :
+        `${currency} ${formatCurrency(money, { currency })}`
+      }
+    </div>
+  );
+}
+
+interface RowProps {
+  attr: string;
+  name: string;
+}
+
+function CostsTableRow({ attr, name }: RowProps) {
+  const {
+    classNameCartTotalItem,
+    classNameCartTotalItemPrice,
+  } = useCartContext();
+  return (
+    <tr>
+      <td className={classNameCartTotalItem}>
+        {name}
+      </td>
+      <th className={classNameCartTotalItemPrice}>
+        <CartTotal attribute={attr} />
+      </th>
+    </tr>
+  );
+}
+
+function CartTotals() {
+  const {
+    classNameCartTotalContainer,
+    classNameCartTotalItemPrice
+  } = useCartContext();
+  const { cart } = useSelector((s: any) => s.stateCart);
+  const cartItems = cart.cartItems ? cart.cartItems : [];
+  return (
+    <div className={classNameCartTotalContainer}>
+      <Table>
+        <tbody>
+          <CostsTableRow
+            attr='cartItemsTotalCost'
+            name='Subtotal'
+          />
+          {
+            cartRequiresShipment({ ...cart, cartItems }) &&
+              <CostsTableRow
+                attr='shipmentTotalCost'
+                name='Shipping'
+              />
+          }
+          <CostsTableRow
+            attr='totalCost'
+            name='Total'
+          />
+          <tr>
+            <td />
+            <td className={classNameCartTotalItemPrice}>
+              Total price includes taxes
+            </td>
+          </tr>
+        </tbody>
+      </Table>
+    </div>
+  );
+}
+
+export default CartTotals;