@merchi/cart 1.4.4

package/src/modals.tsx

@@ -0,0 +1,65 @@
+import { CartComponents } from './Cart';
+import { Modal } from 'reactstrap';
+import { ButtonListWrappedOpenCart } from './buttons/ButtonOpenCartMerchiCartModal';
+import CartProvider, { PropsCart, useCartContext } from './CartProvider';
+
+interface Props extends PropsCart {
+  cartButtonWrappedInContainer?: boolean;
+  cartIconButtonClass?: string;
+  currentUser?: any;
+  customSuccessMessage?: string;
+  domainId?: number;
+  listContainerClass?: string;
+  listItemClass?: string;
+  showOpenCartButton?: boolean;
+  size?: string;
+  storeId?: number;
+}
+
+function CartModal(props: Props) {
+  const { isCartModalOpen, toggleCartModal } = useCartContext();
+  const {
+    cartButtonWrappedInContainer = true,
+    footer,
+    listContainerClass,
+    listItemClass,
+    showOpenCartButton = true,
+    size = 'xl',
+  } = props;
+  return (
+    <>
+      {showOpenCartButton && (
+        <ButtonListWrappedOpenCart
+          cartButtonWrappedInContainer={cartButtonWrappedInContainer}
+          listContainerClass={listContainerClass}
+          listItemClass={listItemClass}
+        />
+      )}
+      <Modal
+        size={size}
+        className='m-auto'
+        isOpen={isCartModalOpen}
+        toggle={toggleCartModal}
+      >
+        <CartComponents
+          footer={footer}
+        />
+      </Modal>
+    </>
+  );
+}
+
+export function MerchiCartModal(props: Props) {
+  return (
+    <CartProvider {...props}>
+      <CartModal {...props} />
+    </CartProvider>
+  );
+}
+
+export function MerchiShoppingCartModal(props: Props) {
+  const { storeId } = props;
+  return (
+    <MerchiCartModal {...props} domainId={storeId} />
+  );
+}

package/src/panels/PanelCartItems.tsx

@@ -0,0 +1,56 @@
+import CartItemRow from '../components/CartItemRow'
+import { tabIdItems } from '../utilities/tabs';
+import {
+  CartTableContainer,
+  CartTabPanel,
+  NoCartItems,
+  Table,
+} from '../components';
+import { useCartContext } from '../CartProvider';
+
+function PanelCartItems() {
+  const { cart } = useCartContext();
+  const cartItems = cart.cartItems ? cart.cartItems : [];
+  const hasItems = cartItems.length > 0;
+  return (
+    <CartTabPanel tabId={tabIdItems}>
+      <div>
+        {hasItems ? (
+          <CartTableContainer>
+            <Table>
+              <thead>
+                <tr>
+                  <th scope='col' className='merchi-cart-item-table-head'>
+                    Product
+                  </th>
+                  <th scope='col' className='merchi-cart-item-table-head-right'>
+                    Quantity
+                  </th>
+                  <th scope='col' className='merchi-cart-item-table-head-right'>
+                    Price
+                  </th>
+                  <th scope='col' className='merchi-cart-item-table-head-right'>
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {cartItems.map((cartItem: any, index: number) =>
+                  <CartItemRow
+                    key={cartItem.id}
+                    cartItem={cartItem}
+                    index={index}
+                  />)
+                }
+              </tbody>
+            </Table>
+          </CartTableContainer>
+        ) : (
+          <NoCartItems />
+        )}
+      </div>
+    </CartTabPanel>
+  );
+}
+
+export default PanelCartItems;

package/src/panels/PanelCartShipment.tsx

@@ -0,0 +1,86 @@
+import { faTruck } from '@fortawesome/free-solid-svg-icons';
+import { ActiveFormShipmentAddressAndNotes } from '../forms/FormShipmentAddressAndNotes';
+import {
+  CheckoutContainer,
+  InnerContainer,
+} from '../components/containers';
+import {
+  Alert,
+  CartBody,
+  CartTabPanel,
+  LoadingTemplateSm,
+  ShipmentGroupCard,
+  Title,
+} from '../components';
+import { tabIdShipment } from '../utilities/tabs';
+import { useCartContext } from '../CartProvider';
+
+function PanelCartShipment() {
+  const {
+    cart,
+    fetchingShipmentGroups,
+  } = useCartContext();
+  const { shipmentGroups = [] } = cart;
+  return (
+    <CartTabPanel tabId={tabIdShipment}>
+      <CartBody style={{ paddingTop: '2rem' }}>
+        <div className='merchi-cart-tab-content'>
+          <CheckoutContainer textAlign='left'>
+            <InnerContainer width={700} paddingBottom='3rem'>
+              <ActiveFormShipmentAddressAndNotes />
+            </InnerContainer>
+          </CheckoutContainer>
+          <CheckoutContainer textAlign='center'>
+            <InnerContainer
+              paddingBottom='0px'
+              width={700}
+            >
+              <Title
+                icon={faTruck}
+                title={
+                  shipmentGroups.length > 1
+                  ? 'Select shipment methods'
+                  : shipmentGroups.length
+                  ? 'Select a shipment method'
+                  : ''
+                }
+              />
+            </InnerContainer>
+          </CheckoutContainer>
+          {fetchingShipmentGroups ? (
+            <CheckoutContainer>
+              <InnerContainer width={700}>
+                <LoadingTemplateSm />
+                <p>Fetching shipping options.</p>
+              </InnerContainer>
+            </CheckoutContainer>
+          ) : (
+            <CheckoutContainer textAlign='left'>
+              <InnerContainer
+                paddingBottom='1rem'
+                width={700}
+              >
+                {shipmentGroups.length > 1 &&
+                  <Alert alertType='warning'>
+                    Items within this cart are warehoused in different locations
+                    and will be shipped separately. Please select how you would
+                    like your items to be shipped.
+                  </Alert>
+                }
+                {shipmentGroups.map((group: any, index: number) =>
+                  <ShipmentGroupCard
+                    group={group}
+                    groupIndex={index}
+                    key={`${index}-shipment-group`}
+                  />
+                )}
+              </InnerContainer>
+            </CheckoutContainer>
+          )}
+        </div>
+      </CartBody>
+    </CartTabPanel>
+  );
+}
+
+export default PanelCartShipment;

package/src/panels/PanelClearCart.tsx

@@ -0,0 +1,50 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { tabIdClearCart } from '../utilities/tabs';
+import { Button } from '../buttons';
+import { CartBody, CartTabPanel } from '../components';
+import { useCartContext } from '../CartProvider';
+
+function PanelClearCart() {
+  const { 
+    classNameBtnDanger,
+    classNameBtnDefault,
+    classNameClearCartContainer,
+    classNameClearCartText,
+    clearCart,
+    closeClearCart,
+   } = useCartContext();
+  return (
+    <CartTabPanel tabId={tabIdClearCart}>
+      <CartBody>
+        <div style={{display: 'flex', justifyContent: 'center', minHeight: '450px'}}>
+          <div className={classNameClearCartContainer}>
+            <h2><FontAwesomeIcon icon={faTrashAlt} /></h2>
+            <h3>Clear Cart</h3>
+            <p className={classNameClearCartText}>
+              Are you sure you would like to clear this cart?
+            </p>
+            <p>
+              <Button
+                className={classNameBtnDefault}
+                onClick={closeClearCart}
+              >
+                Cancel
+              </Button>
+            </p>
+            <p>
+              <Button
+                className={classNameBtnDanger}
+                onClick={() => clearCart()}
+              >
+                Yes, clear cart
+              </Button>
+            </p>
+          </div>
+        </div>
+      </CartBody>
+    </CartTabPanel>
+  );
+}
+
+export default PanelClearCart;

package/src/panels/PanelClientCheckout.tsx

@@ -0,0 +1,102 @@
+import { tabIdCheckout } from '../utilities/tabs';
+import {
+  CheckoutContainer,
+  InnerContainer,
+} from '../components/containers';
+import CartClient from '../components/CartClient';
+import CartShipment from '../components/CartShipment';
+import {
+  CartBody,
+  CartTabPanel,
+  CustomerCheckoutMethodTabs,
+  Title,
+} from '../components';
+import FormSquarePayment from '../forms/FormSquarePayment';
+import FormStripePayment from '../forms/FormStripePayment';
+import { faCoins, faCreditCard } from '@fortawesome/free-solid-svg-icons';
+import { useCartContext } from '../CartProvider';
+import DiscountInputGroup from '../components/DiscountInputGroup';
+import CartTotalsListGroup from '../components/CartTotalsListGroup';
+import { cartItemsNeedShipment } from '../utilities/shipment';
+
+function PanelClientCheckout() {
+  const { cart, cartClient, showDiscountCode } = useCartContext();
+  const needsShipping = cartItemsNeedShipment(cart);
+  const { domain } = cart;
+  const company = domain && domain.company;
+  const whatsappEnabled = Boolean(domain?.enableWhatsappNotifications);
+  return (
+    <CartTabPanel tabId={tabIdCheckout}>
+      <CartBody style={{ paddingTop: '2rem' }}>
+        {cartClient && cartClient.id > -1 ?
+          <>
+            <CheckoutContainer>
+              <InnerContainer paddingBottom='3rem'>
+                <CartClient />
+              </InnerContainer>
+            </CheckoutContainer>
+            {needsShipping &&
+              <CheckoutContainer>
+                <InnerContainer
+                  paddingBottom='3rem'
+                >
+                  <CartShipment cart={cart} />
+                </InnerContainer>
+              </CheckoutContainer>
+            }
+            {showDiscountCode && (
+              <CheckoutContainer>
+                <InnerContainer
+                  paddingBottom='3rem'
+                >
+                  <DiscountInputGroup />
+                </InnerContainer>
+              </CheckoutContainer>
+            )}
+            {Boolean(company) && company.acceptSquare &&
+              <CheckoutContainer>
+                <InnerContainer
+                  paddingTop='3rem'
+                  paddingBottom='3rem'
+                >
+                  <FormSquarePayment />
+                </InnerContainer>
+              </CheckoutContainer>
+            }
+            <CheckoutContainer>
+              <InnerContainer
+                paddingBottom='3rem'
+              >
+                <Title
+                  icon={faCoins}
+                  title='Cart total'
+                />
+                <CartTotalsListGroup />
+              </InnerContainer>
+            </CheckoutContainer>
+            <CheckoutContainer>
+              <InnerContainer
+                paddingBottom='3rem'
+              >
+               <Title
+                  icon={faCreditCard}
+                  title='Credit card payment'
+                />
+                <FormStripePayment />
+              </InnerContainer>
+            </CheckoutContainer>
+
+          </>
+        :
+          <CheckoutContainer>
+            <InnerContainer paddingBottom='0px'>
+              <CustomerCheckoutMethodTabs whatsappEnabled={whatsappEnabled} />
+            </InnerContainer>
+          </CheckoutContainer>
+        }
+      </CartBody>
+    </CartTabPanel>
+  );
+}
+
+export default PanelClientCheckout;

package/src/panels/PanelEditCartItem.tsx

@@ -0,0 +1,172 @@
+import { Suspense, lazy, useState } from 'react';
+import { tabIdItem, tabIdItems } from '../utilities/tabs';
+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 { LoadingTemplateSm } from '../components/LoadingTemplate';
+import { useCartContext } from '../CartProvider';
+import { makeCartItem } from '../utilities/cart';
+import { getCartCookieToken } from '../utilities/cookie';
+import { publishedFormBundle } from '../utilities/customForm';
+import CustomCartProductForm from '../components/CustomCartProductForm';
+
+const MerchiProductForm = lazy(() => import('@merchi/product-form'));
+
+function cleanVariation(variation: any) {
+  const { variationField = {}, variationFiles = [] } = variation;
+  return {
+    ...variation,
+    id: undefined,
+    value: variation.value,
+    variationField: {id: variationField.id},
+    variationFiles: variationFiles.map((f: any) => ({id: f.id})),
+  };
+}
+
+function cleanVariationGroups(variationsGroup: any) {
+  const { quantity = 0, variations = [] } = variationsGroup;
+  return {
+    idL: undefined,
+    quantity,
+    variations: variations?.map(cleanVariation),
+  };
+}
+
+interface Props {
+  cart: any;
+}
+
+function PanelEditCartItem({ cart }: Props) {
+  const {
+    activeTabIndex,
+    alertError,
+    alertSuccess,
+    cartItem,
+    domainId,
+    productFormClassNames,
+    classNameBtnEditCartItem,
+    apiUrl,
+    refetchCart,
+    setActiveTabIndex,
+    setCartItem,
+  } = useCartContext();
+  const [loading, setLoading] = useState(false);
+  const [customFormActive, setCustomFormActive] = useState(false);
+  const formId = 'edit-cart-item-form';
+
+  // This action patches the cart item
+  async function actionCartItemEdit(cartItemJson: any) {
+    setLoading(true);
+    const cartToken = await getCartCookieToken((domainId as number));
+    try {
+      const {
+        product,
+        quantity = 0,
+        taxType,
+        variations = [],
+        variationsGroups = [],
+      } = cartItemJson;
+
+      const cartItemEnt = makeCartItem({
+        ...cartItem,
+        id: (cartItem as any).id,
+        cart: {id: (cart as any).id},
+        product: product ? {id: product.id} : undefined,
+        taxType: taxType ? {id: taxType.id} : undefined,
+        quantity,
+        variations: variations.map(cleanVariation),
+        variationsGroups: variationsGroups.map(cleanVariationGroups),
+      }, true, cartToken);
+
+      // Save changes to the Cart Item
+      await cartItemEnt.save();
+
+      // Refetch the Cart and all it's relationships
+      await refetchCart();
+
+      // Show success alert
+      alertSuccess('Item updated.');
+
+      // Set active Cart tab
+      setActiveTabIndex(tabIdItems);
+
+      // Clear Cart Item from state
+      setCartItem({});
+    } catch (e: any) {
+      alertError(e.errorMessage || e.message || 'Unable to edit Cart Item.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function onSubmit(jobJson: any) {
+    actionCartItemEdit(jobJson);
+  }
+  const cleanCartItem = {
+    ...cartItem,
+    id: undefined,
+  };
+  const showForm =
+    activeTabIndex === tabIdItem && !!cartItem?.id && !!cartItem?.product?.id;
+  const hasPublishedCustomForm = !!publishedFormBundle(cartItem?.product);
+
+  const defaultForm = (
+    <Suspense fallback={<LoadingTemplateSm />}>
+      <MerchiProductForm
+        apiUrl={apiUrl}
+        isCartItem={true}
+        initJob={{...cleanCartItem}}
+        initProduct={cartItem.product}
+        onSubmit={onSubmit}
+        productFormId={formId}
+        hideRequestQuotationButton={true}
+        hidePaymentUpfrontButton={true}
+        {...productFormClassNames}
+      />
+    </Suspense>
+  );
+
+  return (
+    <CartTabPanel tabId={tabIdItem}>
+      <CartBody style={{padding: '2rem'}}>
+        {showForm && (
+          hasPublishedCustomForm ? (
+            <CustomCartProductForm
+              product={cartItem.product}
+              initialJob={cleanCartItem}
+              apiUrl={apiUrl}
+              onSave={onSubmit}
+              fallback={defaultForm}
+              onActiveChange={setCustomFormActive}
+            />
+          ) : (
+            defaultForm
+          )
+        )}
+      </CartBody>
+      <CartFooter>
+        <ButtonBack />
+        {/* Custom forms render their own Save in ProductFormShell; keep the
+            HTML-form Save only for the default @merchi/product-form path. */}
+        {!customFormActive && (
+          <Button
+            className={classNameBtnEditCartItem}
+            disabled={loading}
+            form={formId}
+            type='submit'
+          >
+            {loading && <FontAwesomeIcon icon={faCircleNotch} spin />}
+            {loading ? ' Loading...' : 'Save'}
+          </Button>
+        )}
+      </CartFooter>
+    </CartTabPanel>
+  );
+}
+
+export default PanelEditCartItem;

package/src/panels/PanelPaymentSuccess.tsx

@@ -0,0 +1,66 @@
+import {
+  CheckoutContainer,
+  InnerContainer,
+} from '../components/containers';
+import { tabIdPaymentSuccess } from '../utilities/tabs';
+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,
+    fetchingCart,
+    invoiceJson,
+    setCartComplete,
+    urlTrackingPage,
+  } = useCartContext();
+  const { domain, id, unpaid } = invoiceJson;
+  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={fetchingCart}
+                onClick={setCartComplete}
+              >
+                {fetchingCart ? '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/square/SquareCard.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { CreditCard, PaymentForm } from 'react-square-web-payments-sdk';
+import { currencyMap } from '../utilities/currency';
+import { useCartContext } from '../CartProvider';
+import { tabIdPaymentSuccess } from '../utilities/tabs';
+import { Merchi } from '@merchi/sdk';
+
+declare const SQUARE_APPLICATION_ID: string;
+
+function SquareCard() {
+  const {
+    alertError,
+    cart,
+    setActiveTabIndex,
+    setInvoiceJson,
+  } = useCartContext();
+  const { currency, domain, totalCost } = cart;
+  const [loading, setLoading] = React.useState(false);
+  const company = domain.company;
+  function ButtonText() {
+    return (
+      <span>
+        Pay {currencyMap[currency]}
+        {totalCost}<small> / inc tax</small>
+      </span>
+    );
+  }
+  const squareWebLocationId = company.squareWebLocationId;
+  function callbackCreditCardPaymentSuccess(invoiceJson: any) {
+    setInvoiceJson(invoiceJson);
+    setActiveTabIndex(tabIdPaymentSuccess);
+  }
+
+  async function actionSquarePaymentProcess(
+    sourceId: string,
+    callbackPaymentSuccess: any,
+  ) {
+    setLoading(true);
+    let url = `/cart/${cart.id}/square/payment/`;
+    const fetchOptions: any = {
+      method: 'GET',
+      query: [['sourceId', sourceId], ['cart_token', cart.token]],
+    };
+    try {
+      const merchi = new Merchi();
+      const r = await merchi.authenticatedFetch(url, fetchOptions);
+      callbackPaymentSuccess(r.invoice);
+    } catch(e: any) {
+      alertError(e.errorMessage || e.message || 'Server eror.');
+    } finally {
+      setLoading(false);
+    }
+  }
+  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(
+          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;