@merchi/cart 1.4.4

package/src/components/DiscountInputGroup.tsx

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import { useForm } from 'react-hook-form';
+import { Merchi } from '@merchi/sdk';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleNotch, faTags, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { useCartContext } from '../CartProvider';
+import Title from './CartTitle';
+import { makeCart, makeDiscountItem } from '../utilities/cart';
+import { cartEmbed } from '../utilities/helpers';
+import { getCartCookieToken } from '../utilities/cookie';
+
+export default function DiscountInputGroup() {
+  const {
+    alertError,
+    cart,
+    setCart,
+    discountButtonText = 'Apply',
+    discountClassName = 'merchi-discount-group-container',
+    discountClassNameButton = 'btn btn-primary',
+    discountClassNameButtonContainer = 'col-auto',
+    discountClassNameButtonItemRemove = 'btn btn-lg btn-link',
+    discountClassNameErrorMessage = 'text-danger',
+    discountClassNameInput = 'form-control input-lg',
+    discountClassNameInputContainer,
+    discountClassNameListItem = 'list-group-item d-flex align-items-center justify-content-between mt-2',
+    discountClassNameListItems = 'list-group',
+    discountClassNameMainContainer,
+    discountShowAppliedItems,
+    domainId,
+  } = useCartContext();
+  const { discountItems = [] } = cart;
+  const defaultCodes = discountItems.map((i: any) => i.code).join(',');
+  const merchi = new Merchi();
+  const hookForm = useForm({
+    defaultValues: { codes: defaultCodes },
+  });
+  const {
+    getValues,
+    register,
+    setValue,
+    trigger,
+    formState: { errors },
+  } = hookForm;
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(({} as any));
+
+  const onSubmit = async (data: { codes: string }) => {
+    const validate = await trigger();
+    if (validate) {
+      await validateCodes(data.codes);
+    }
+  };
+
+  async function actionPatchCart(cartEnt: any) {
+    try {
+      const cart = await cartEnt.save({embed: cartEmbed});
+      setCart(cart.toJson());
+    } catch (e: any) {
+      alertError(e.errorMessage || e.message || 'nknown server error.');
+    }
+  }
+
+  async function validateCodes(codes: string) {
+    const query: Array<any> = [['codes', codes]];
+    setLoading(true);
+    setError({});
+    const cartToken = await getCartCookieToken((domainId as string | number));
+    try {
+      let url = `/carts/${cart.id}/check_discount_code/`;
+      const r = await merchi.authenticatedFetch(url, { query });
+      const updatedItems = r.items || [];
+      setItems(updatedItems);
+      const cartEnt = makeCart({...cart}, false, cartToken);
+      cartEnt.discountItems = updatedItems.map(
+        (r: any) => makeDiscountItem({...r}, true)
+      );
+      actionPatchCart(cartEnt);
+    } catch (e: any) {
+      setError({message: `Error: ${e.errorMessage || e.message || 'Unexpected error.'}`});
+      const cartEnt = makeCart({...cart, discountItems: []}, false, cartToken);
+      const discountItems = cartEnt.discountItems;
+      cartEnt.discountItems = discountItems;
+      actionPatchCart(cartEnt);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleClick() {
+    const { codes } = getValues();
+    await onSubmit({ codes });
+  }
+
+  const [items, setItems] = React.useState(discountItems || []);
+
+  async function removeItem(index: number) {
+    const item: any = {...(items[index] as any)};
+    const codes = getValues('codes');
+    const newValues = codes.replace(item.code, "");
+    setValue('codes', newValues);
+    await validateCodes(newValues);
+  }
+
+  return (
+    <div className={discountClassNameMainContainer}>
+      <Title icon={faTags} title='Apply discount code' />
+      <div className={discountClassName}>
+        <div className={discountClassNameInputContainer}>
+          <input
+            type="text"
+            className={discountClassNameInput}
+            placeholder='discount20,discount10'
+            {...register('codes', {required: 'Codes must be provided.'})}
+          />
+        </div>
+        <div className={discountClassNameButtonContainer}>
+          <button
+            className={discountClassNameButton}
+            disabled={loading}
+            onClick={handleClick}
+          >
+            {loading ? (
+              <FontAwesomeIcon icon={faCircleNotch} />
+            ) : discountButtonText}
+          </button>
+        </div>
+      </div>
+      {error.message && (
+        <div className={discountClassNameErrorMessage}>
+          {error.message}
+        </div>
+      )}
+      {errors.codes && (
+        <div className={discountClassNameErrorMessage}>
+          {(errors as any)?.codes?.message}
+        </div>
+      )}
+      {discountShowAppliedItems && (
+        <div className={discountClassNameListItems}>
+          {items.map((item: any, index: number) =>
+            <div
+              className={discountClassNameListItem}
+              key={index}
+            >
+              <div>{item.code} {item.description}</div>
+              <div>
+                <button
+                  className={discountClassNameButtonItemRemove}
+                  onClick={() => removeItem(index)}
+                >
+                  <FontAwesomeIcon icon={faTimes} />
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/LoadingTemplate.tsx

@@ -0,0 +1,22 @@
+import { useCartContext } from "../CartProvider";
+
+interface Props {
+  height?: number;
+}
+
+export default function LoadingTemplate({ height }: Props) {
+  const {
+    classNameLoadingTemplate,
+    classNameLoadingTemplateContainer,
+  } = useCartContext();
+  const style = height ? { height } : {};
+  return (
+    <div className={classNameLoadingTemplateContainer} style={style}>
+      <div className={classNameLoadingTemplate} />
+    </div>
+  );
+}
+
+export function LoadingTemplateSm() {
+  return <LoadingTemplate height={300} />;
+}

package/src/components/NoCartItems.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useCartContext } from "../CartProvider";
+import pngProductNotFound from "../assets/product-not-found.png";
+
+function NoCartItems() {
+  const { classNameNoItems } = useCartContext();
+  return (
+    <div className={classNameNoItems}>
+      <img
+        src={pngProductNotFound?.src || pngProductNotFound || ''}
+        alt="Cart items not found"
+        width={276}
+        height={215}
+      />
+      <p>No cart items.</p>
+    </div>
+  );
+}
+
+export default NoCartItems;

package/src/components/ShipmentGroupCard.tsx

@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import { addressInOneLine } from "../utilities/address";
+import { currencyTaxAndCost } from "../utilities/currency";
+import { useCartContext } from "../CartProvider";
+import pngProductNotFound from "../assets/product-not-found.png";
+import { makeCart, makeCartShipmentQuote } from "../utilities/cart";
+import { cartEmbed } from "../utilities/helpers";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheckSquare, faSquare } from "@fortawesome/free-solid-svg-icons";
+import { getCartCookieToken } from "../utilities/cookie";
+
+function NoCartShipmentOptionsFound() {
+  const { classNameNoItems } = useCartContext();
+  return (
+    <div className={classNameNoItems}>
+      <img
+        src={
+          (pngProductNotFound && "src" in pngProductNotFound
+            ? pngProductNotFound.src
+            : pngProductNotFound) || ""
+        }
+        width={276}
+        height={215}
+      />
+      <p>No shipment options found.</p>
+    </div>
+  );
+}
+
+interface PropsPickupInfo {
+  originAddress: any;
+}
+
+function PickupInfo({ originAddress }: PropsPickupInfo) {
+  return <small>Pick up from: {addressInOneLine(originAddress)}</small>;
+}
+
+function ShipmentPrice({ quote }: any) {
+  const { shipmentMethod, taxType, totalCost } = quote;
+  const { currency } = shipmentMethod;
+  return (
+    <div>
+      <small>
+        <strong>
+          {totalCost > 0
+            ? currencyTaxAndCost(currency, taxType, totalCost)
+            : ""}
+        </strong>
+      </small>
+    </div>
+  );
+}
+
+interface PropsShipmentOptionInfo {
+  quote: any;
+}
+
+function ShipmentOptionInfo({ quote }: PropsShipmentOptionInfo) {
+  const { classNameShipmentOption } = useCartContext();
+  const { name, shipmentMethod } = quote;
+  const { originAddress, pickUp, transportCompanyName } = shipmentMethod;
+  return (
+    <div className={classNameShipmentOption}>
+      {!name ? (
+        <>
+          {transportCompanyName && (
+            <p className="mb-0">{shipmentMethod.name}</p>
+          )}
+          {pickUp ? (
+            <PickupInfo originAddress={originAddress} />
+          ) : (
+            <small>{transportCompanyName}</small>
+          )}
+        </>
+      ) : (
+        <>
+          <p className="m-0">{name}</p>
+          {pickUp && <PickupInfo originAddress={originAddress} />}
+        </>
+      )}
+      <ShipmentPrice quote={quote} />
+    </div>
+  );
+}
+
+interface ShipmentOptionProps {
+  isSelected: boolean;
+  doClick: () => void;
+  quote: any;
+}
+
+function ShipmentQuote({ isSelected, doClick, quote }: ShipmentOptionProps) {
+  const { classNameListItem } = useCartContext();
+  return (
+    <div
+      className={classNameListItem}
+      onClick={doClick}
+      style={{ cursor: "pointer" }}
+    >
+      <div
+        style={{
+          alignItems: "center",
+          display: "flex",
+          justifyContent: "space-between",
+        }}
+      >
+        <ShipmentOptionInfo quote={quote} />
+        <div>
+          <FontAwesomeIcon icon={isSelected ? faCheckSquare : faSquare} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface Props {
+  group: any;
+  groupIndex: number;
+}
+
+function ShipmentGroupCard({ group, groupIndex }: Props) {
+  const { alertError, cart, classNameList, classNameListInline, domainId, setCart } = useCartContext();
+  const { cartItems, quotes = [] } = group;
+  const [selectedQuote, setSelectedQuote] = useState(group.selectedQuote || {});
+  async function doClick(groupIndex: number, quote: any) {
+    setSelectedQuote(quote);
+    try {
+      const token = await getCartCookieToken((domainId as string | number));
+      const cartEnt = makeCart({ ...cart }, false, token);
+      const cartShipmentQuote = makeCartShipmentQuote({ ...quote });
+      (cartEnt as any).shipmentGroups[groupIndex].selectedQuote = cartShipmentQuote;
+      await cartEnt.save({ embed: cartEmbed });
+      const cartJson = await cartEnt.toJson();
+      setCart({ ...cart, ...cartJson });
+    } catch (e: any) {
+      alertError(
+        e.errorMessage || e.message || "Unable to select shipment option."
+      );
+      setSelectedQuote({});
+    }
+  }
+  return (
+    <div>
+      <ul className={classNameListInline}>
+        <li>
+          <strong>Shipment {groupIndex + 1} contents:</strong>
+        </li>
+        {cartItems.map((item: any, index: number) => (
+          <li key={index}>{item.product.name}</li>
+        ))}
+      </ul>
+      {quotes.length ? (
+        <div className={classNameList}>
+          {quotes.map((q: any, i: number) => (
+            <ShipmentQuote
+              key={`${i}-group-quote`}
+              quote={q}
+              isSelected={(selectedQuote as any)?.id === q.id}
+              doClick={() => doClick(groupIndex, q)}
+            />
+          ))}
+        </div>
+      ) : (
+        <NoCartShipmentOptionsFound />
+      )}
+    </div>
+  );
+}
+
+export default ShipmentGroupCard;

package/src/components/Table.tsx

@@ -0,0 +1,15 @@
+import { useCartContext } from "../CartProvider";
+
+interface Props {
+  children: any;
+  className?: string;
+}
+
+export default function Table({ children, className = '' }: Props) {
+  const { classNameTable } = useCartContext();
+  return (
+    <table className={`${classNameTable} ${className}`}>
+      {children}
+    </table>
+  );
+}

package/src/components/containers.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+interface CheckoutContainerProps {
+  children: any;
+  textAlign?: any;
+}
+
+export function CheckoutContainer({ children, textAlign = 'center' }: CheckoutContainerProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        textAlign: textAlign,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface InnerProps {
+  children: any;
+  paddingBottom?: string;
+  paddingTop?: string;
+  width?: number;
+}
+
+export function InnerContainer({ children, paddingBottom, paddingTop, width = 400 }: InnerProps) {
+  return (
+    <div style={{
+      padding: '3rem',
+      paddingBottom: paddingBottom,
+      paddingTop: paddingTop,
+      width: width,
+    }}>
+      {children}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,38 @@
+import Alert from './Alert';
+import CartBody from './CartBody';
+import CartClient from './CartClient';
+import CartFooter from './CartFooter';
+import CartPaymentSettingsInvalid from './CartPaymentSettingsInvalid';
+import CartShipment from './CartShipment';
+import CartTabContent from './CartTabContent';
+import CartTableContainer from './CartTableContainer';
+import CartTabPanel from './CartTabPanel';
+import Collapse from './Collapse';
+import CustomerCheckoutMethodTabs from './CustomerCheckoutMethodTabs';
+import DiscountInputGroup from './DiscountInputGroup';
+import LoadingTemplate, { LoadingTemplateSm } from './LoadingTemplate';
+import NoCartItems from './NoCartItems';
+import ShipmentGroupCard from './ShipmentGroupCard';
+import Table from './Table';
+import Title from './CartTitle';
+
+export {
+  Alert,
+  CartBody,
+  CartClient,
+  CartFooter,
+  CartPaymentSettingsInvalid,
+  CartShipment,
+  CartTabContent,
+  CartTableContainer,
+  CartTabPanel,
+  Collapse,
+  CustomerCheckoutMethodTabs,
+  DiscountInputGroup,
+  LoadingTemplate,
+  LoadingTemplateSm,
+  NoCartItems,
+  ShipmentGroupCard,
+  Table,
+  Title,
+};

package/src/components/product-form-sdk-externals.ts

@@ -0,0 +1,67 @@
+/**
+ * Full @merchi/product-form-sdk runtime for window.MerchiProductFormSdk.
+ * Keep in sync with merchi_api/common/js/product_form_gate.cjs SDK_EXPORTS.
+ */
+import {
+  SDK_VERSION,
+  serializeJob,
+  nonEmptyGroups,
+  formatCurrency,
+  urlFor,
+  createPricing,
+  createProductFormRuntime,
+  productHasGroups,
+  groupFieldsOf,
+  independentFieldsOf,
+  isOptionQuantityGridProduct,
+  buildProductFormJob,
+  jobToFormState,
+  selectionsToVariations,
+  Section,
+  Stack,
+  Card,
+  Heading,
+  Text,
+  Divider,
+  Field,
+  GroupRows,
+  OptionQuantityGrid,
+  ProductFormProvider,
+  ProductFormShell,
+  ProductFormActions,
+  useProductForm,
+  OPTION_FIELD_TYPES,
+  theme,
+} from '@merchi/product-form-sdk';
+
+export const MerchiProductFormSdkExternals = {
+  SDK_VERSION,
+  serializeJob,
+  nonEmptyGroups,
+  formatCurrency,
+  urlFor,
+  createPricing,
+  createProductFormRuntime,
+  productHasGroups,
+  groupFieldsOf,
+  independentFieldsOf,
+  isOptionQuantityGridProduct,
+  buildProductFormJob,
+  jobToFormState,
+  selectionsToVariations,
+  Section,
+  Stack,
+  Card,
+  Heading,
+  Text,
+  Divider,
+  Field,
+  GroupRows,
+  OptionQuantityGrid,
+  ProductFormProvider,
+  ProductFormShell,
+  ProductFormActions,
+  useProductForm,
+  OPTION_FIELD_TYPES,
+  theme,
+};