@merchi/cart 1.4.4

package/src/components/CartItemRow.tsx

@@ -0,0 +1,212 @@
+import * as React from 'react';
+import { cartItemCurrencyAndCost } from '../utilities/currency';
+import { productFeatureImageUrl } from '../utilities/product';
+import { valueString } from '../utilities/variations';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleNotch, faEdit, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { Button } from '../buttons';
+import { useCartContext } from '../CartProvider';
+import { makeCart } from '../utilities/cart';
+import { cartEmbed } from '../utilities/helpers';
+import { tabIdItem } from '../utilities/tabs';
+import { cartItemsNeedShipment } from '../utilities/shipment';
+import {
+  cartHasShippmentGroupsAndAllHaveSelectedGroups,
+  initTabs,
+  setDisableTab,
+  tabCheckout,
+  tabShipment,
+  tabsWithShipment,
+} from '../utilities/tabs';
+import { getCartCookieToken } from '../utilities/cookie';
+
+interface VariationListItemProps {
+  variation: any;
+}
+
+function VariationListItem(props: VariationListItemProps) {
+  const { variation } = props;
+  const { variationField: field } = variation;
+  return (
+    <li>{`${field.name}: ${valueString(variation)}`}</li>
+  );
+}
+
+interface VariationListProps {
+  variations: any[];
+}
+
+function VariationList({ variations }: VariationListProps) {
+  const { classNameVariationsList } = useCartContext();
+  return (
+    <ul className={classNameVariationsList}>
+      {variations.map((v: any, index: number) =>
+        <VariationListItem
+          key={`${index}-variation`}
+          variation={v}
+        />
+      )}
+    </ul>
+  );
+}
+
+interface GroupVariationItemsProps {
+  count: number;
+  group: any;
+}
+
+function GroupVariationItems(props: GroupVariationItemsProps) {
+  const { count, group } = props;
+  return (
+    <li>
+      Group {count} Quantity: {group.quantity}
+      <VariationList variations={group.variations} />
+    </li>
+  );
+}
+
+interface VariationsGroupsListProps {
+  groups: any[];
+}
+
+function VariationsGroupsList({ groups }: VariationsGroupsListProps) {
+  const { classNameVariationsList } = useCartContext();
+  return (
+    <ul className={classNameVariationsList}>
+      {groups.map((group: any, index: number) =>
+        <GroupVariationItems
+          key={`${index}-group-variations`}
+          group={group}
+          count={index + 1}
+        />
+      )}
+    </ul>
+  );
+}
+
+interface Props {
+  cartItem: any;
+  index: number;
+}
+
+function CartItemRow({ cartItem, index }: Props) {
+  const {
+    alertError,
+    cart,
+
+    domainId,
+    setCart,
+
+    classNameBtnLink,
+    classNameCartItemFeatureImage,
+    classNameCartItemInfo,
+    classNameCartItemInfoCell,
+    classNameCartItemInfoCellRight,
+    classNameCartItemInfoContainer,
+
+    setActiveTabIndex,
+    setCartItem,
+    tabs,
+    setTabs,
+
+    showCartItemInfo,
+  } = useCartContext();
+  const {
+    product,
+    quantity,
+    variations,
+    variationsGroups,
+  } = cartItem;
+  const { name } = product;
+
+  const [loading, setLoading] = React.useState(false);
+
+  async function actionDeleteCartItem() {
+    setLoading(true);
+    const cartToken = await getCartCookieToken((domainId as number));
+    try {
+      const cartEnt = makeCart({...cart}, false, cartToken);
+      const cartItems = (cartEnt as any).cartItems;
+      cartItems.splice(index, 1);
+      (cartEnt as any).cartItems = cartItems;
+      const r = await cartEnt.save({embed: cartEmbed});
+      const cartJson = r.toJson();
+      const needsShipping = cartItemsNeedShipment(cartJson);
+      setCart({...cartJson});
+      if (cart.cartItems.length === 0) {
+        setTabs([...initTabs]);
+      } else {
+        if (needsShipping) {
+          setTabs([...tabsWithShipment]);
+          if (cart.cartItems.length) {
+            const _tabs = [...tabs];
+            _tabs[1] = setDisableTab(tabShipment, false);
+            if (cartHasShippmentGroupsAndAllHaveSelectedGroups(cartJson)) {
+              _tabs[2] = setDisableTab(tabCheckout, false);
+            }
+            setTabs([..._tabs]);
+          }
+        } else {
+          setTabs([...initTabs]);
+        }
+      }
+    } catch(e: any) {
+      alertError(e.errorMessage || e.message || 'Unable to remove item from cart.');
+    } finally {
+      setLoading(false);
+    }
+  }
+  return (
+    <tr>
+      <td scope='row' className={classNameCartItemInfoCell}>
+        <img
+          src={productFeatureImageUrl(product)}
+          alt={name}
+          width='70'
+          className={classNameCartItemFeatureImage}
+        />
+        {showCartItemInfo && (
+          <div className={classNameCartItemInfoContainer}>
+            <div className={classNameCartItemInfo}>
+              <h5 style={{display: 'inline'}}>
+                {name}
+              </h5>
+              {variations && <VariationList variations={variations} />}
+            </div>
+            <div className={classNameCartItemInfo}>
+              {variationsGroups && <VariationsGroupsList groups={variationsGroups} />}
+            </div>
+          </div>
+        )}
+      </td>
+      <td className={classNameCartItemInfoCellRight}>
+        <strong>{quantity}</strong>
+      </td>
+      <td className={classNameCartItemInfoCellRight}>
+        <strong>{cartItemCurrencyAndCost(cartItem)}</strong>
+      </td>
+      <td className={classNameCartItemInfoCellRight}>
+        <Button
+          className={classNameBtnLink}
+          onClick={() => {
+            setCartItem({...cartItem});
+            setActiveTabIndex(tabIdItem);
+          }}
+        >
+          <FontAwesomeIcon icon={faEdit} />
+        </Button>
+        <Button
+          className={classNameBtnLink}
+          onClick={actionDeleteCartItem} //TODO modify delete action
+        >
+          <FontAwesomeIcon
+            icon={loading ? faCircleNotch : faTrashAlt}
+            spin={loading}
+          />
+        </Button>
+      </td>
+    </tr>
+  );
+}
+
+export default CartItemRow;

package/src/components/CartPaymentSettingsInvalid.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export default function CartPaymentSettingsInvalid() {
+  return (
+    <div className='merchi-loading-container'>
+      <div className='merchi-payment-gateway-inactive' />
+      <p className="merchi-loading-container-text">
+        Payment gateway is currently inactive.
+      </p>
+    </div>
+  );
+}

package/src/components/CartShipment.tsx

@@ -0,0 +1,56 @@
+import Title from './CartTitle';
+import { tabIdShipment } from '../utilities/tabs';
+import { addressInOneLine } from '../utilities/address';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEdit, faTruck } from '@fortawesome/free-solid-svg-icons';
+import { Button } from '../buttons';
+import { useCartContext } from '../CartProvider';
+
+interface Props {
+  cart: any;
+}
+
+function CartShipment({ cart }: Props) {
+  const {
+    classNameBtnDefault,
+    classNameListContainer,
+    classNameListUnstyled,
+    setActiveTabIndex,
+  } = useCartContext();
+  const { receiverAddress, receiverNotes } = cart;
+  const address = receiverAddress ? receiverAddress : null;
+  function openShipmentTab() {
+    setActiveTabIndex(tabIdShipment);
+  }
+  return (
+    <div className={classNameListContainer}>
+      <Title
+        icon={faTruck}
+        title='Ship to'
+      />
+      <ul
+        className={classNameListUnstyled}
+        style={{fontSize: '15px', marginBottom: '1rem'}}
+      >
+        <li>
+          <span style={{display: 'inline-block'}}>
+            {address ? addressInOneLine(address) : 'Shipping address not set'}
+          </span>
+        </li>
+        {receiverNotes && (
+          <li>
+            {receiverNotes}
+          </li>
+        )}
+      </ul>
+      <Button
+        onClick={openShipmentTab}
+        className={classNameBtnDefault}
+      >
+        <FontAwesomeIcon icon={faEdit} /> {address ? ' Change' : ' Set'}
+      </Button>
+    </div>
+  );
+}
+
+export default CartShipment;

package/src/components/CartTabContent.tsx

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

package/src/components/CartTabPanel.tsx

@@ -0,0 +1,25 @@
+import { useCartContext } from '../CartProvider';
+
+interface Props {
+  children: any;
+  tabId: number;
+}
+
+export default function CartTabPanel({ children, tabId }: Props) {
+  const { activeTabIndex, classNameCartTabPanel, tabs } = useCartContext();
+  const currentTabIndex = tabs.findIndex((t: any) => t.tabId === activeTabIndex);
+  const activeTabValues = tabs[currentTabIndex];
+  const isActive =
+    (tabId === -1 && activeTabIndex === -1) ||
+    (tabId === -2 && activeTabIndex === -2) ||
+    !!(activeTabValues && tabId === activeTabValues.tabId);
+
+  // Unmount inactive tabs so heavy children (payments, product form) stay out of the tree.
+  if (!isActive) return null;
+
+  return (
+    <div className={classNameCartTabPanel} style={{ display: 'block' }}>
+      {children}
+    </div>
+  );
+}

package/src/components/CartTableContainer.tsx

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

package/src/components/CartTitle.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useCartContext } from '../CartProvider';
+
+export default function Title({ icon, title }: any) {
+  const {
+    classNameCartTitle,
+  } = useCartContext();
+  return (
+    <div className={classNameCartTitle}>
+      {typeof icon === 'string' ? (
+        <i className={`${icon} fa-2x`}></i>
+      ) : (
+        <FontAwesomeIcon icon={icon} size='2x' />
+      )}
+      <br />
+      <div style={{ marginTop: '1rem' }}>
+        <strong>{title}</strong>
+      </div>
+    </div>
+  );
+}

package/src/components/CartTotalsListGroup.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useCartContext } from '../CartProvider';
+import { cartRequiresShipment } from '../utilities/cart';
+import { CartTotal } from '../CartTotals';
+
+interface RowProps {
+  attr: string;
+  name: string;
+}
+
+function CostsListItem({ attr, name }: RowProps) {
+  const {
+    classNameCartTotalItem,
+    classNameCartTotalItemPrice,
+    classNameListItemCartTotals,
+  } = useCartContext();
+
+  return (
+    <li className={classNameListItemCartTotals}>
+      <span className={classNameCartTotalItem}>{name}</span>
+      <span className={classNameCartTotalItemPrice}>
+        <CartTotal attribute={attr} />
+      </span>
+    </li>
+  );
+}
+
+function CartTotalsListGroup() {
+  const {
+    cart,
+    classNameCartTotaListContainer,
+    classNameCartTotalItemPrice,
+    classNameList,
+    classNameListItem
+  } = useCartContext();
+  const cartItems = cart.cartItems ? cart.cartItems : [];
+
+  return (
+    <div className={classNameCartTotaListContainer}>
+      <ul className={classNameList}>
+        {!!Number(cart.discountedAmount) && (
+          <CostsListItem attr="discountedAmount" name="Discount" />
+        )}
+        <CostsListItem attr="cartItemsSubtotalCost" name="Subtotal" />
+        {cartRequiresShipment({ ...cart, cartItems }) && (
+          <CostsListItem attr="shipmentTotalCost" name="Shipping" />
+        )}
+        {!!cart.taxAmount && (<CostsListItem attr="taxAmount" name="Tax" />)}
+        <CostsListItem attr="totalCost" name="Total" />
+        <li className={classNameListItem}>
+          <div className={classNameCartTotalItemPrice}>Total price includes taxes</div>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export default CartTotalsListGroup;

package/src/components/Collapse.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { useState, useRef, useEffect } from 'react';
+
+function Collapse({ isOpen, children }: any) {
+  const [height, setHeight] = useState(isOpen ? 'auto' : '0');
+  const ref = useRef(null);
+
+  useEffect(() => {
+    setHeight(isOpen ? `${(ref as any).current.scrollHeight}px` : '0');
+  }, [isOpen]);
+
+  return (
+    <div
+      className={`merchi-collapse ${isOpen ? 'show' : ''}`}
+      ref={ref}
+      style={{ transition: 'height 0.35s ease', overflow: 'hidden', height }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Collapse;

package/src/components/CustomCartProductForm.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { MerchiProductFormSdkExternals } from './product-form-sdk-externals';
+import { loadFormBundle, publishedFormBundle } from '../utilities/customForm';
+import { LoadingTemplateSm } from './LoadingTemplate';
+
+interface Props {
+  product: any;
+  /** Current cart item used to hydrate quantity / selections. */
+  initialJob: any;
+  apiUrl?: string;
+  onSave: (job: any) => void;
+  /** Rendered when there is no published bundle or load/runtime fails. */
+  fallback: React.ReactNode;
+  /** Notifies the host when the custom form is actively rendering. */
+  onActiveChange?: (active: boolean) => void;
+}
+
+/**
+ * Loads a product's published custom form for cart-item edit. On any failure
+ * renders `fallback` (the default @merchi/product-form) so the cart stays usable.
+ */
+export function CustomCartProductForm({
+  product,
+  initialJob,
+  apiUrl,
+  onSave,
+  fallback,
+  onActiveChange,
+}: Props) {
+  const [Loaded, setLoaded] = useState<React.ComponentType<any> | null>(null);
+  const [failed, setFailed] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
+  const onActiveChangeRef = useRef(onActiveChange);
+  onActiveChangeRef.current = onActiveChange;
+
+  const bundleKey = publishedFormBundle(product)?.url ?? '';
+
+  useEffect(() => {
+    let active = true;
+    setLoaded(null);
+    setFailed(false);
+    setLoading(true);
+    const bundle = publishedFormBundle(product);
+    if (!bundle) {
+      setFailed(true);
+      setLoading(false);
+      return;
+    }
+    const w = window as any;
+    w.React = React;
+    w.MerchiProductFormSdk = MerchiProductFormSdkExternals;
+    loadFormBundle(bundle)
+      .then((Component) => {
+        if (active) {
+          setLoaded(() => Component);
+          setLoading(false);
+        }
+      })
+      .catch((e) => {
+        console.error('[merchi_cart] custom form load failed', e);
+        if (active) {
+          setFailed(true);
+          setLoading(false);
+        }
+      });
+    return () => {
+      active = false;
+    };
+  }, [product, bundleKey]);
+
+  const props = useMemo(() => {
+    try {
+      const runtime = MerchiProductFormSdkExternals.createProductFormRuntime({
+        apiUrl: apiUrl || '',
+        product,
+        onAddToCart: (job: any) => onSaveRef.current?.(job),
+      });
+      return {
+        product,
+        pricing: runtime.pricing,
+        actions: runtime.actions,
+        helpers: runtime.helpers,
+      };
+    } catch (e) {
+      console.error('[merchi_cart] custom form props build failed', e);
+      return null;
+    }
+  }, [product, apiUrl]);
+
+  const isActive = !failed && !loading && !!Loaded && !!props;
+  useEffect(() => {
+    onActiveChangeRef.current?.(isActive);
+    return () => onActiveChangeRef.current?.(false);
+  }, [isActive]);
+
+  if (loading) return <LoadingTemplateSm />;
+  if (failed || !Loaded || !props) return <>{fallback}</>;
+
+  const Shell = MerchiProductFormSdkExternals.ProductFormShell;
+
+  return (
+    <>
+      {Shell ? (
+        <Shell
+          product={props.product}
+          pricing={props.pricing}
+          actions={props.actions}
+          helpers={props.helpers}
+          initialJob={initialJob}
+          actionLabels={{ addToCart: 'Save' }}
+        >
+          <Loaded {...props} />
+        </Shell>
+      ) : (
+        <Loaded {...props} />
+      )}
+    </>
+  );
+}
+
+export default CustomCartProductForm;

package/src/components/CustomerCheckoutMethodTabs.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { BiCheck, BiUser } from 'react-icons/bi';
+import { FaWhatsapp } from 'react-icons/fa';
+import FormNewCustomer from '../forms/FormNewCustomer';
+import FormReturningCustomer from '../forms/FormReturningCustomer';
+import FormWhatsappCustomer from '../forms/FormWhatsappCustomer';
+
+type CheckoutMethod = 'new' | 'returning' | 'whatsapp';
+type SectionIconType = 'user' | 'whatsapp';
+
+interface CustomerCheckoutMethodTabsProps {
+  whatsappEnabled?: boolean;
+}
+
+function renderSectionIcon(iconType: SectionIconType) {
+  if (iconType === 'whatsapp') {
+    return (
+      <FaWhatsapp className="merchi-customer-checkout-option__icon-svg merchi-customer-checkout-option__icon-svg--whatsapp" />
+    );
+  }
+
+  return <BiUser className="merchi-customer-checkout-option__icon-svg" />;
+}
+
+export default function CustomerCheckoutMethodTabs({
+  whatsappEnabled = false,
+}: CustomerCheckoutMethodTabsProps) {
+  const [activeMethod, setActiveMethod] = useState<CheckoutMethod | null>(null);
+
+  const sections: Array<{
+    id: CheckoutMethod;
+    label: string;
+    iconType: SectionIconType;
+    form: React.ReactNode;
+  }> = [
+    {
+      id: 'returning',
+      label: 'Returning customer',
+      iconType: 'user',
+      form: <FormReturningCustomer />,
+    },
+    {
+      id: 'new',
+      label: 'New customer',
+      iconType: 'user',
+      form: <FormNewCustomer />,
+    },
+  ];
+
+  if (whatsappEnabled) {
+    sections.push({
+      id: 'whatsapp',
+      label: 'WhatsApp checkout',
+      iconType: 'whatsapp',
+      form: <FormWhatsappCustomer />,
+    });
+  }
+
+  return (
+    <>
+      <p className="merchi-customer-checkout__heading">Choose a checkout option</p>
+      <div
+        className="merchi-customer-checkout-options"
+        role="radiogroup"
+        aria-label="Choose a checkout option"
+      >
+        {sections.map((section) => {
+          const isSelected = activeMethod === section.id;
+          return (
+            <div
+              key={section.id}
+              className={`merchi-customer-checkout-option${isSelected ? ' is-selected' : ''}`}
+            >
+              <button
+                type="button"
+                role="radio"
+                aria-checked={isSelected}
+                aria-expanded={isSelected}
+                className="merchi-customer-checkout-option__header"
+                onClick={() => setActiveMethod(section.id)}
+              >
+                <span className="merchi-customer-checkout-option__title">
+                  <span className="merchi-customer-checkout-option__icon">
+                    {renderSectionIcon(section.iconType)}
+                  </span>
+                  <span className="merchi-customer-checkout-option__label">
+                    {section.label}
+                  </span>
+                </span>
+                <span className="merchi-customer-checkout-option__checkbox" aria-hidden>
+                  {isSelected && <BiCheck />}
+                </span>
+              </button>
+              {isSelected && (
+                <div className="merchi-customer-checkout-option__body">
+                  {section.form}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}