@merchi/cart 1.4.4

package/src/CartTotals.tsx

@@ -0,0 +1,102 @@
+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;
+}
+
+export function CartTotal({ attribute }: Props) {
+  const {
+    loading,
+    loadingTotals
+  } = useCartContext();
+  const {
+    cart,
+    fetchingCart,
+  } = useCartContext();
+  const { domain } = cart;
+  const company = domain ? domain.company : null;
+  const currency = company ? company.defaultCurrency : 'AUD';
+  const isLoading =
+    fetchingCart ||
+    loadingTotals ||
+    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 {
+    cart,
+    classNameCartTotalContainer,
+    classNameCartTotalItemPrice
+  } = useCartContext();
+  const cartItems = cart?.cartItems || [];
+  return (
+    <div className={classNameCartTotalContainer}>
+      <Table className='merchi-cart-total-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;

package/src/buttons/Button.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { useCartContext } from "../CartProvider";
+
+interface Props {
+  children: any;
+  className?: string;
+  disabled?: boolean;
+  form?: string;
+  onClick?: () => void;
+  type?: string;
+}
+
+type ButtonType = "button" | "reset" | "submit" | undefined;
+
+export default function Button({
+  children,
+  className = '',
+  disabled,
+  form,
+  onClick,
+  type = 'button',
+}: Props) {
+  const { classNameBtn } = useCartContext();
+  return (
+    <button
+      className={`${classNameBtn} ${className}`}
+      disabled={disabled}
+      form={form}
+      onClick={onClick}
+      type={(type as ButtonType)}
+    >
+      {children}
+    </button>
+  );
+}

package/src/buttons/ButtonBack.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { useCartContext } from '../CartProvider';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import Button from './Button';
+
+interface Props {
+  text?: string;
+}
+
+function ButtonBack({ text }: Props) {
+  const {
+    activeTabIndex,
+    classNameBtnBack,
+    onClickClose,
+    setActiveTabIndex,
+    tabs,
+    toggleCartModal,
+  } = useCartContext();
+  const currentTabIndex = tabs.findIndex((t: any) => t.tabId === activeTabIndex);
+  let nextTab = null;
+  if (currentTabIndex > 0) {
+    nextTab = tabs[currentTabIndex - 1];
+  }
+  const nextTabId = nextTab ? nextTab.tabId : 0;
+  const close = onClickClose || toggleCartModal;
+  return (
+    <Button
+      className={classNameBtnBack}
+      onClick={activeTabIndex === 0 ?
+        close
+      :
+        () => setActiveTabIndex(nextTabId)
+      }
+    >
+      <FontAwesomeIcon icon={faArrowLeft} />
+      {text ? ` ${text}` : ''}
+    </Button>
+  );
+}
+
+export default ButtonBack;

package/src/buttons/ButtonClearCart.tsx

@@ -0,0 +1,17 @@
+import { useCartContext } from '../CartProvider';
+import { tabIdClearCart } from '../utilities/tabs';
+import Button from './Button';
+
+function ButtonClearCart() {
+  const { classNameBtnCartClear, setActiveTabIndex } = useCartContext();
+  return (
+    <Button
+      className={classNameBtnCartClear}
+      onClick={() => setActiveTabIndex(tabIdClearCart)}
+    >
+      Clear cart
+    </Button>
+  );
+}
+
+export default ButtonClearCart;

package/src/buttons/ButtonInvoiceDownload.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { useCartContext } from '../CartProvider';
+import { generatePublicInvoicePdf } from '../utilities/invoice';
+import { useState } from 'react';
+import { CgSpinner } from 'react-icons/cg';
+import { FaFileInvoiceDollar } from 'react-icons/fa';
+
+function ButtonInvoiceDownload() {
+  const {
+    alertError,
+    classNameBtnDownloadInvoice,
+    apiUrl,
+    invoiceJson
+  } = useCartContext();
+  const { unpaid } = invoiceJson;
+  const [loading, setLoading] = useState(false);
+  async function generate(receipt?: boolean) {
+    setLoading(true);
+    try {
+      await generatePublicInvoicePdf((apiUrl as string), invoiceJson, receipt);
+      setLoading(false);
+    } catch (e: any) {
+      alertError(e.message);
+      setLoading(false);
+    }
+  }
+  return (
+    <>
+      {unpaid ? (
+        <button
+          className={classNameBtnDownloadInvoice}
+          disabled={loading}
+          onClick={() => generate(false)}
+        >
+          {loading ? (
+            <CgSpinner fontSize='1.1rem' className='animate_spin mr-2' />
+          ) : (
+            <FaFileInvoiceDollar fontSize='1.1rem' className='mr-2' />
+          )}
+          Download Invoice
+        </button>
+      ) : (
+        <button
+          className={classNameBtnDownloadInvoice}
+          disabled={loading}
+          onClick={() => generate(true)}
+        >
+          {loading ? (
+            <CgSpinner fontSize='1.1rem' className='animate_spin mr-2' />
+          ) : (
+            <FaFileInvoiceDollar fontSize='1.1rem' className='mr-2' />
+          )}
+          Download Receipt
+        </button>
+      )}
+    </>
+  );
+}
+
+export default ButtonInvoiceDownload;

package/src/buttons/ButtonNext.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { tabIdCheckout } from '../utilities/tabs';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowRight, faCircleNotch, faCreditCard } from '@fortawesome/free-solid-svg-icons';
+import Button from './Button';
+import { useCartContext } from '../CartProvider';
+
+function ButtonNext() {
+  const {
+    activeTabIndex,
+    classNameBtnNext,
+    classNameBtnNextComplete,
+    loading,
+    setActiveTabIndex,
+    tabs,
+  } = useCartContext();
+  const currentTabIndex = tabs.findIndex((t: any) => t.tabId === activeTabIndex);
+  const nextTab = tabs[currentTabIndex + 1];
+  const isCheckoutTabOpen = activeTabIndex === tabIdCheckout;
+  const icon = loading ? faCircleNotch : isCheckoutTabOpen ? faCreditCard : faArrowRight;
+  return (
+    <Button
+      className={isCheckoutTabOpen ? classNameBtnNextComplete : classNameBtnNext}
+      onClick={nextTab ? () => setActiveTabIndex(nextTab.tabId) : undefined}
+      disabled={loading}
+    >
+      <FontAwesomeIcon icon={icon} spin={loading} />
+      <span style={{marginLeft: '5px'}}>
+        {loading ? 'Loading...' : 'Next'}
+      </span>
+    </Button>
+  );
+}
+
+export default ButtonNext;

package/src/buttons/ButtonNextDynamic.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useCartContext } from '../CartProvider';
+import {
+  tabIdCheckout,
+  tabIdItems,
+  tabIdPaymentSuccess,
+  tabIdShipment,
+} from '../utilities/tabs';
+import ButtonNext from './ButtonNext';
+import ButtonShipmentTabNext from './ButtonShipmentTabNext';
+
+function ButtonNextDynamic() {
+  const { cart, activeTabIndex } = useCartContext();
+  const cartItems = cart.cartItems;
+  const hasCartItems = cartItems && cartItems.length;
+  const isCartItemsTabActive = activeTabIndex === tabIdItems;
+  const isShipmentTabActive = activeTabIndex === tabIdShipment;
+  const isCheckoutTabOpen = activeTabIndex === tabIdCheckout;
+  const isPaymentSuccessOpen = activeTabIndex === tabIdPaymentSuccess;
+  return isCheckoutTabOpen || isPaymentSuccessOpen ? (
+    <></>
+  ) : isShipmentTabActive ? (
+    <ButtonShipmentTabNext />
+  ) : isCartItemsTabActive && !hasCartItems ? (
+    <></>
+  ) : (
+    <ButtonNext />
+  );
+}
+
+export default ButtonNextDynamic;

package/src/buttons/ButtonOpenCartMerchiCartModal.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleNotch, faShoppingCart } from '@fortawesome/free-solid-svg-icons';
+import Button from './Button';
+import { useCartContext } from '../CartProvider';
+
+const Badge = ({ color, children }: any) => {
+  return <span className={`merchi-cart-badge badge-${color}`}>{children}</span>;
+}
+
+export function ButtonOpenCart() {
+  const {
+    cart,
+    classNameCartToggleIconButton,
+    fetchingCart,
+    loading,
+    toggleCartModal,
+  } = useCartContext();
+  const cartItems = cart.cartItems || [];
+  return (
+    <Button
+      onClick={toggleCartModal}
+      className={classNameCartToggleIconButton}
+    >
+      <FontAwesomeIcon
+        icon={loading || fetchingCart ? faCircleNotch : faShoppingCart}
+        spin={loading || fetchingCart}
+      />
+      {cartItems.length > 0 ? (
+        <Badge color='danger'>
+          {cartItems.length}
+        </Badge>
+      ) : null}
+    </Button>
+  );
+}
+
+interface Props {
+  cartButtonWrappedInContainer?: boolean;
+  listContainerClass?: string;
+  listItemClass?: string;
+}
+
+export function ButtonListWrappedOpenCart(props: Props) {
+  const {
+    cartButtonWrappedInContainer = true,
+    listContainerClass,
+    listItemClass,
+  } = props;
+  return (
+    cartButtonWrappedInContainer ? (
+      <ul className={listContainerClass}>
+        <li className={listItemClass}>
+          <ButtonOpenCart />
+        </li>
+      </ul>
+    ) : (
+      <ButtonOpenCart />
+    )
+  );
+}

package/src/buttons/ButtonPay.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { useCartContext } from '../CartProvider';
+import { currencyMap } from '../utilities/currency';
+import Button from './Button';
+
+interface Props {
+  cart: any;
+  loading: boolean;
+}
+
+function ButtonPay({ cart, loading }: Props) {
+  const { classNameBtnPay } = useCartContext();
+  const { currency, totalCost } = cart;
+  return (
+    <Button
+      className={classNameBtnPay}
+      disabled={loading}
+      type='submit'
+    >
+      {loading ? (
+        <span>Loading...</span>
+      ) : (
+        <span>
+          Pay {currencyMap[currency]}
+          {totalCost}<small> / inc tax</small>
+        </span>
+      )}
+    </Button>
+  );
+}
+
+export default ButtonPay;

package/src/buttons/ButtonShipmentTabNext.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { shipmentFormId } from '../utilities/shipment';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowRight, faCircleNotch } from '@fortawesome/free-solid-svg-icons';
+import Button from './Button';
+import { useCartContext } from '../CartProvider';
+
+export default function ButtonShipmentTabNext() {
+  const { classNameBtnNext, loadingTotals } = useCartContext();
+  const icon = loadingTotals ? faCircleNotch : faArrowRight;
+  return (
+    <Button
+      className={classNameBtnNext}
+      form={shipmentFormId}
+      disabled={loadingTotals}
+      type='submit'
+    >
+      <FontAwesomeIcon icon={icon} spin={loadingTotals} />
+      <span style={{marginLeft: '5px'}}>
+        {loadingTotals ? 'Loading...' : 'Next'}
+      </span>
+    </Button>
+  );
+}

package/src/buttons/index.ts

@@ -0,0 +1,15 @@
+import Button from './Button';
+import ButtonBack from './ButtonBack';
+import ButtonClearCart from './ButtonClearCart';
+import ButtonInvoiceDownload from './ButtonInvoiceDownload';
+import ButtonNextDynamic from './ButtonNextDynamic';
+import ButtonPay from './ButtonPay';
+
+export {
+  Button,
+  ButtonBack,
+  ButtonClearCart,
+  ButtonNextDynamic,
+  ButtonPay,
+  ButtonInvoiceDownload,
+};

package/src/components/Alert.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useCartContext } from '../CartProvider';
+
+interface Props {
+  alertType?: 'success' | 'danger' | 'warning' | 'info';
+  children: any;
+}
+
+export default function Alert({ alertType, children }: Props) {
+  const { 
+    classNameAlertError,
+    classNameAlertInfo,
+    classNameAlertSuccess,
+    classNameAlertWarning,
+   } = useCartContext();
+  let className = classNameAlertInfo;
+  if (alertType === 'success') {
+    className = classNameAlertSuccess;
+  }
+  if (alertType === 'danger') {
+    className = classNameAlertError;
+  }
+  if (alertType === 'warning') {
+    className = classNameAlertWarning;
+  }
+  return (
+    <div className={`merchi-cart-modal-alert ${className}`}>
+      {children}
+    </div>
+  );
+}

package/src/components/CartBody.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useCartContext } from '../CartProvider';
+
+interface Props {
+  children: any;
+  style?: any;
+}
+
+export default function CartBody({ children, style }: Props) {
+  const { classNameCartBody } = useCartContext();
+  return (
+    <div className={classNameCartBody} style={style}>
+      {children}
+    </div>
+  );
+}

package/src/components/CartClient.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import {
+  primaryEmail,
+  primaryPhone,
+} from '../utilities/user';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserCircle, faUserTimes } from '@fortawesome/free-solid-svg-icons';
+import Button from '../buttons/Button';
+import Title from './CartTitle';
+import { useCartContext } from '../CartProvider';
+
+export function ClientInfo({ client }: any) {
+  const { classNameListClientInfo } = useCartContext();
+  const { name = 'Returning customer' } = client;
+  const emailAddress = primaryEmail(client) || 'Email not shown';
+  const phoneNumber = primaryPhone(client) || 'Phone number not shown';
+  return (
+    <ul className={classNameListClientInfo}>
+      <li>{name}</li>
+      <li>{emailAddress}</li>
+      <li>{phoneNumber}</li>
+    </ul>
+  );
+}
+
+function CartClient() {
+  const {
+    cart,
+    cartClient,
+    classNameBtnDefault,
+    setCart,
+    setCartClient,
+  } = useCartContext();
+  function clearClient() {
+    setCartClient(null);
+    setCart({...cart, client: null});
+  }
+  return (
+    <div>
+      <Title icon={faUserCircle} title='Checkout as' />
+      {cartClient && <ClientInfo client={cartClient} />}
+      <Button
+        className={classNameBtnDefault}
+        onClick={clearClient}
+      >
+        <FontAwesomeIcon icon={faUserTimes} /> Change
+      </Button>
+    </div>
+  );
+}
+
+export default CartClient;

package/src/components/CartFooter.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useCartContext } from "../CartProvider";
+
+interface Props {
+  children: any;
+}
+
+export default function CartFooter({ children }: Props) {
+  const { classNameCartFooter } = useCartContext();
+  return (
+    <div className={classNameCartFooter}>
+      {children}
+    </div>
+  );
+}