merchi_cart 0.0.7-e → 0.0.7

package/package.json

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

package/src/Cart.tsx

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

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

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

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

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