@merchi/cart 1.4.4

package/src/forms/FormNewCustomer.tsx

@@ -0,0 +1,170 @@
+import * as React from 'react';
+import { useForm } from 'react-hook-form';
+import InputAcceptUserTermsAndConditions from './InputAcceptUserTermsAndConditions';
+import { Button } from '../buttons';
+import InputSelect from './InputSelect';
+import InputText from './InputText';
+import { useCartContext } from '../CartProvider';
+import { cartEmbed, phoneOptions } from '../utilities/helpers';
+import InputError from './InputError';
+import { createNewCustomer, makeUser } from '../utilities/user';
+import { makeCart } from '../utilities/cart';
+import { getCartCookieToken } from '../utilities/cookie';
+import {
+  getSavedCheckoutCustomer,
+  saveCheckoutCustomer,
+} from '../utilities/local_storage';
+
+export const emailValidation = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]/i;
+
+export function FormCustomerNew() {
+  const {
+    cart,
+    classNameBtnPrimary,
+    classNameCartFormGroup,
+    classNameCartFormGroupButton,
+    domainId,
+    setCart,
+    setCartClient,
+    showUserTermsAndConditions,
+  } = useCartContext();
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(({} as any));
+  const [acceptConditions, setAcceptConditions] = React.useState(true);
+  const savedCustomer = getSavedCheckoutCustomer(domainId);
+
+  async function actionCreateNewCustomer(customerJson: any) {
+    setError({});
+    setLoading(true);
+    try {
+      const r = await createNewCustomer(
+        {...customerJson, registeredUnderDomains: [{id: domainId}]}
+      );
+      const { user } = r;
+      if (!user?.id) {
+        throw new Error('Unable to create customer.');
+      }
+
+      // patch cart with new user
+      const cartToken = await getCartCookieToken((domainId as number));
+      const clientEnt = makeUser({id: user.id}, true);
+      const cartEnt = makeCart({ ...cart }, false, cartToken);
+      cartEnt.sendWhatsapp = false;
+      cartEnt.client = clientEnt;
+      const _cart = await cartEnt.save({embed: cartEmbed});
+      const cartJson = _cart.toJson();
+      if (!cartJson?.client?.id) {
+        throw new Error('Unable to attach client to cart.');
+      }
+      saveCheckoutCustomer(domainId, {
+        id: user.id,
+        name: customerJson.name,
+        emailAddress: customerJson.emailAddresses?.[0]?.emailAddress,
+        phoneNumbers: customerJson.phoneNumbers,
+      });
+      setCartClient(cartJson.client);
+      setCart(cartJson);
+    } catch (e: any) {
+      setError({message: e.errorMessage || e.message || 'Unable to attach client to cart.'});
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const { control, handleSubmit, watch } = useForm({
+    defaultValues: {
+      emailAddresses: [{
+        emailAddress: savedCustomer?.emailAddress || '',
+      }],
+      name: savedCustomer?.name || '',
+      phoneNumbers: [{
+        code: savedCustomer?.phoneNumbers?.[0]?.code || 'AU',
+        number: savedCustomer?.phoneNumbers?.[0]?.number || '',
+      }],
+      registeredAsGuest: false,
+    },
+  });
+
+  async function onSubmit(values: any) {
+    await actionCreateNewCustomer({ ...values });
+  }
+
+  // Basic validation for phone. Checking that phone is a number. Can make more complex if we want.
+  function validatePhone() {
+    const phone = watch('phoneNumbers.0.number');
+    if (isNaN(phone as any)) return 'Phone number must be a number';
+    else return true;
+  }
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <InputText
+        control={control}
+        label='Full Name'
+        name='name'
+        placeholder='John Smith'
+        rules={{ required: 'Full name is required.' }}
+      />
+      <InputText
+        control={control}
+        label='Email'
+        name='emailAddresses[0].emailAddress'
+        placeholder='john@example.com'
+        rules={{
+          required: 'Email is required.',
+          validate: emailValidation,
+        }}
+      />
+      <div style={{ display: 'flex', gap: '1rem' }}>
+        <div style={{ flexGrow: 1 }}>
+          <InputSelect
+            control={control}
+            label='Country Code'
+            name='phoneNumbers[0].code'
+            options={phoneOptions}
+          />
+        </div>
+        <div style={{ flexGrow: 1 }}>
+          <InputText
+            control={control}
+            label='Phone Number'
+            name='phoneNumbers[0].number'
+            placeholder='0400 000 000'
+            rules={{
+              required: 'Phone number is required',
+              validate: validatePhone,
+            }}
+            type='phone'
+          />
+        </div>
+      </div>
+      {showUserTermsAndConditions && (
+        <div className={classNameCartFormGroup}>
+          <InputAcceptUserTermsAndConditions
+            isChecked={acceptConditions}
+            setIsChecked={setAcceptConditions}
+          />
+          {!acceptConditions && (
+            <InputError
+              error={{
+                message:
+                  'You must agree to the user profile terms and conditions to proceed.',
+              }}
+            />
+          )}
+        </div>
+      )}
+      <InputError error={error || {}} />
+      <div className={classNameCartFormGroupButton}>
+        <Button
+          className={classNameBtnPrimary}
+          disabled={loading}
+          type='submit'
+        >
+          {loading ? 'Loading...' : 'Submit'}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export default FormCustomerNew;

package/src/forms/FormReturningCustomer.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { useForm } from 'react-hook-form';
+import { Button } from '../buttons';
+import InputError from './InputError';
+import { useCartContext } from '../CartProvider';
+import {
+  makeUser,
+  tryReturningCustomerEmail,
+} from '../utilities/user';
+import { makeCart } from '../utilities/cart';
+import { getCartCookieToken } from '../utilities/cookie';
+import { cartEmbed } from '../utilities/helpers';
+import {
+  getSavedCheckoutCustomer,
+  saveCheckoutCustomer,
+} from '../utilities/local_storage';
+
+const emailValidation = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]/i;
+
+function FormReturningCustomer() {
+  const {
+    alertError,
+    cart,
+    classNameBtnPrimary,
+    classNameCartFormGroup,
+    classNameCartFormInput,
+    classNameCartFormGroupButton,
+    domainId,
+    setCart,
+    setCartClient,
+  } = useCartContext();
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(({} as any));
+  const savedCustomer = getSavedCheckoutCustomer(domainId);
+
+  const hookForm = useForm({
+    defaultValues: { emailAddress: savedCustomer?.emailAddress || '' },
+  });
+  const {
+    handleSubmit,
+    formState: { errors },
+    getValues,
+    register,
+  } = hookForm;
+  async function submit() {
+    setError({});
+    const { emailAddress } = getValues();
+    setLoading(true);
+    try {
+      const user: any = await tryReturningCustomerEmail(emailAddress);
+      // /user-check-email/ returns user_id (not id)
+      const userId = user.user_id ?? user.id;
+      if (!userId) {
+        throw new Error('Unable to find returning customer.');
+      }
+
+      // Attach by id only — extra user fields trigger a forbidden user PATCH.
+      const cartToken = await getCartCookieToken((domainId as number));
+      const clientEnt = makeUser({id: userId}, true);
+      const cartEnt = makeCart({ ...cart }, false, cartToken);
+      cartEnt.sendWhatsapp = false;
+      cartEnt.client = clientEnt;
+      const _cart = await cartEnt.save({embed: cartEmbed});
+      const cartJson = _cart.toJson();
+      if (!cartJson?.client?.id) {
+        throw new Error('Unable to attach client to cart.');
+      }
+      saveCheckoutCustomer(domainId, {
+        id: userId,
+        name: user.name || savedCustomer?.name,
+        emailAddress,
+      });
+      setCartClient(cartJson.client);
+      setCart(cartJson);
+    } catch(e: any) {
+      alertError(e.errorMessage || e.message);
+      setError({message: e.errorMessage || e.message || 'Server error.'});
+    } finally {
+      setLoading(false);
+    }
+  }
+  return (
+    <form onSubmit={handleSubmit(submit)}>
+      <div className={classNameCartFormGroup}>
+        <input
+          className={classNameCartFormInput}
+          placeholder='info@example.com'
+          type='email'
+          {...register('emailAddress', {
+            required: 'Email address required',
+            pattern: {
+              value: emailValidation,
+              message: 'Invalid email address'
+            }
+          })}
+        />
+        <small>
+          If you are a returning customer please use the same email
+          which you used previously.
+        </small>
+        <InputError error={errors.emailAddress} />
+        {error && <InputError error={error} />}
+      </div>
+      <div className={classNameCartFormGroupButton}>
+        <Button
+          className={classNameBtnPrimary}
+          disabled={loading}
+          type='submit'
+        >
+          {loading ? 'Loading...' : 'Submit'}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export default FormReturningCustomer;

package/src/forms/FormShipmentAddressAndNotes.tsx

@@ -0,0 +1,165 @@
+import { useForm } from "react-hook-form";
+import InputsAddress from "./InputsAddress";
+import { CheckoutContainer, InnerContainer } from "../components/containers";
+import { Title } from "../components";
+import { shipmentFormId } from "../utilities/shipment";
+import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons";
+import { useCartContext } from "../CartProvider";
+import { useState } from "react";
+import { getCartCookieToken } from "../utilities/cookie";
+import { makeAddress, sanitizeAddressFields } from "../utilities/address";
+import { makeCart } from "../utilities/cart";
+import { cartEmbed } from "../utilities/helpers";
+import { tabIdCheckout } from "../utilities/tabs";
+import {
+  addressHasContent,
+  getSavedCheckoutAddress,
+  saveCheckoutAddress,
+} from "../utilities/local_storage";
+
+interface PropsAddress {
+  defaultAddress?: any;
+  labelGeoSuggest?: string;
+  hookForm: any;
+  name?: string;
+  placeholder?: string;
+  updateAddress: (address: any) => void;
+}
+
+const AddressGeoSuggestInput = (props: PropsAddress) => (
+  <InputsAddress {...props} name="receiverAddress" />
+);
+
+interface Props {
+  address?: any;
+  addressFieldsOpen: boolean;
+  formId: string;
+  notes?: string;
+  showIcon?: boolean;
+  deliveryNomenclature?: boolean;
+  showHeadings?: boolean;
+  setCartShipmentAddress: (values: any) => void | Promise<void>;
+  toggleAddressFields: () => void;
+}
+
+function FormShipmentAddressAndNotes({
+  address = {},
+  formId,
+  notes = "",
+  showIcon = true,
+  deliveryNomenclature = false,
+  showHeadings = true,
+  setCartShipmentAddress,
+}: Props) {
+  const { classNameCartFormGroup, updateCartShipmentAddress } =
+    useCartContext();
+  const hookForm = useForm({
+    defaultValues: {
+      receiverAddress: address,
+      receiverNotes: notes,
+    },
+  });
+  const { getValues, handleSubmit, register, reset } = hookForm;
+
+  async function onSubmit() {
+    await setCartShipmentAddress(getValues());
+  }
+  function updateAddress(addr: any) {
+    const oldAddresses: any = getValues();
+    const newAddress = addr ? { ...addr } : {};
+    oldAddresses["receiverAddress"] = newAddress;
+    reset(oldAddresses);
+    updateCartShipmentAddress(newAddress);
+  }
+  return (
+    <form id={formId} onSubmit={handleSubmit(onSubmit)}>
+      {showHeadings && (
+        <CheckoutContainer>
+          <InnerContainer paddingBottom="0px">
+            <Title
+              icon={showIcon ? faMapMarkerAlt : null}
+              title="Delivery / billing address"
+            />
+          </InnerContainer>
+        </CheckoutContainer>
+      )}
+      <AddressGeoSuggestInput
+        defaultAddress={address}
+        hookForm={hookForm}
+        labelGeoSuggest={`Enter your ${
+          deliveryNomenclature ? "delivery" : "shipping"
+        } address`}
+        name="receiverAddress"
+        updateAddress={updateAddress}
+      />
+      <div className={classNameCartFormGroup}>
+        <label>{deliveryNomenclature ? "Delivery" : "Shipment"} notes</label>
+        <textarea
+          className="form-control input"
+          defaultValue={notes}
+          placeholder="Example - Leave at top of stairs"
+          rows={4}
+          {...register("receiverNotes")}
+        ></textarea>
+      </div>
+    </form>
+  );
+}
+
+export function ActiveFormShipmentAddressAndNotes() {
+  const {
+    alertError,
+    domainId,
+    cart,
+    setCart,
+    setLoadingTotals,
+    setActiveTabAndEditDisabled,
+  } = useCartContext();
+  const saved = getSavedCheckoutAddress(domainId);
+  const cartAddress = cart?.receiverAddress;
+  const receiverAddress = addressHasContent(cartAddress)
+    ? cartAddress
+    : saved.address || {};
+  const receiverNotes = cart?.receiverNotes || saved.receiverNotes || "";
+  const [addressFieldsOpen, setAddressFieldsOpen] = useState(false);
+
+  async function saveCartShipmentAddressAndGoToNextTab(values: any) {
+    const { receiverAddress: address, receiverNotes } = values;
+    setLoadingTotals(true);
+    try {
+      const cartToken = await getCartCookieToken(domainId as number);
+      // Never PATCH an existing Address via cart token — create a fresh embed.
+      const addressFields = sanitizeAddressFields(address);
+      const receiverAddress = makeAddress(addressFields, true);
+      const cartEnt = makeCart(cart, false, cartToken);
+      cartEnt.receiverAddress = receiverAddress;
+      cartEnt.receiverNotes = receiverNotes;
+      await cartEnt.save({ embed: cartEmbed });
+      saveCheckoutAddress(domainId, addressFields, receiverNotes);
+      setCart(cartEnt.toJson());
+      setActiveTabAndEditDisabled({
+        tabId: tabIdCheckout,
+        tabIndexToSet: 2,
+        disabled: false,
+      });
+    } catch (e: any) {
+      alertError(
+        e.errorMessage || e.message || "Unable to set shipment address."
+      );
+    } finally {
+      setLoadingTotals(false);
+    }
+  }
+  return (
+    <FormShipmentAddressAndNotes
+      address={receiverAddress}
+      addressFieldsOpen={addressFieldsOpen}
+      formId={shipmentFormId}
+      notes={receiverNotes}
+      setCartShipmentAddress={saveCartShipmentAddressAndGoToNextTab}
+      toggleAddressFields={() => setAddressFieldsOpen(!addressFieldsOpen)}
+    />
+  );
+}
+
+export default FormShipmentAddressAndNotes;

package/src/forms/FormSquarePayment.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Suspense, lazy } from 'react';
+import { useCartContext } from '../CartProvider';
+import { LoadingTemplateSm } from '../components/LoadingTemplate';
+
+const SquareCard = lazy(() => import('../square/SquareCard'));
+
+function FormSquarePayment() {
+  const { cart } = useCartContext();
+  const company = cart && cart.domain && cart.domain.company;
+  if (!company?.acceptSquare) return null;
+  return (
+    <Suspense fallback={<LoadingTemplateSm />}>
+      <SquareCard />
+    </Suspense>
+  );
+}
+
+export default FormSquarePayment;

package/src/forms/FormStripePayment.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Suspense, lazy } from 'react';
+import { useCartContext } from '../CartProvider';
+import { LoadingTemplateSm } from '../components/LoadingTemplate';
+
+const StripeCardForm = lazy(() => import('../stripe/StripeCardForm'));
+
+function FormStripePayment() {
+  const { cart } = useCartContext();
+  const company = cart && cart.domain && cart.domain.company;
+  if (!company) return null;
+  return (
+    <Suspense fallback={<LoadingTemplateSm />}>
+      <StripeCardForm />
+    </Suspense>
+  );
+}
+
+export default FormStripePayment;

package/src/forms/FormWhatsappCustomer.tsx

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import { useForm } from 'react-hook-form';
+import InputAcceptUserTermsAndConditions from './InputAcceptUserTermsAndConditions';
+import { Button } from '../buttons';
+import InputSelect from './InputSelect';
+import InputText from './InputText';
+import { useCartContext } from '../CartProvider';
+import { cartEmbed, phoneOptions } from '../utilities/helpers';
+import InputError from './InputError';
+import { createNewCustomer, makeUser } from '../utilities/user';
+import { makeCart } from '../utilities/cart';
+import { getCartCookieToken } from '../utilities/cookie';
+import {
+  getSavedCheckoutCustomer,
+  saveCheckoutCustomer,
+} from '../utilities/local_storage';
+import { emailValidation } from './FormNewCustomer';
+
+function FormWhatsappCustomer() {
+  const {
+    cart,
+    classNameBtnPrimary,
+    classNameCartFormGroup,
+    classNameCartFormGroupButton,
+    domainId,
+    setCart,
+    setCartClient,
+    showUserTermsAndConditions,
+  } = useCartContext();
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(({} as any));
+  const [acceptConditions, setAcceptConditions] = React.useState(true);
+  const savedCustomer = getSavedCheckoutCustomer(domainId);
+
+  async function actionWhatsappCheckout(customerJson: any) {
+    setError({});
+    setLoading(true);
+    try {
+      const r = await createNewCustomer({
+        ...customerJson,
+        registeredUnderDomains: [{ id: domainId }],
+      });
+      const { user } = r;
+      if (!user?.id) {
+        throw new Error('Unable to create customer.');
+      }
+
+      const cartToken = await getCartCookieToken((domainId as number));
+      const clientEnt = makeUser({ id: user.id }, true);
+      const cartEnt = makeCart({ ...cart }, false, cartToken);
+      cartEnt.sendWhatsapp = true;
+      cartEnt.client = clientEnt;
+      const _cart = await cartEnt.save({ embed: cartEmbed });
+      const cartJson = _cart.toJson();
+      if (!cartJson?.client?.id) {
+        throw new Error('Unable to attach client to cart.');
+      }
+      saveCheckoutCustomer(domainId, {
+        id: user.id,
+        name: customerJson.name,
+        emailAddress: customerJson.emailAddresses?.[0]?.emailAddress,
+        phoneNumbers: customerJson.phoneNumbers,
+      });
+      setCartClient(cartJson.client);
+      setCart(cartJson);
+    } catch (e: any) {
+      setError({
+        message:
+          e.errorMessage || e.message || 'Unable to attach client to cart.',
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const { control, handleSubmit, watch } = useForm({
+    defaultValues: {
+      emailAddresses: [{
+        emailAddress: savedCustomer?.emailAddress || '',
+      }],
+      name: savedCustomer?.name || '',
+      phoneNumbers: [{
+        code: savedCustomer?.phoneNumbers?.[0]?.code || 'AU',
+        number: savedCustomer?.phoneNumbers?.[0]?.number || '',
+      }],
+    },
+  });
+
+  async function onSubmit(values: any) {
+    if (showUserTermsAndConditions && !acceptConditions) {
+      return;
+    }
+    await actionWhatsappCheckout({ ...values });
+  }
+
+  function validatePhone() {
+    const phone = watch('phoneNumbers.0.number');
+    if (!phone) return 'Phone number is required for WhatsApp checkout';
+    if (isNaN(phone as any)) return 'Phone number must be a number';
+    return true;
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <InputText
+        control={control}
+        label='Full Name'
+        name='name'
+        placeholder='John Smith'
+        rules={{ required: 'Full name is required.' }}
+      />
+      <InputText
+        control={control}
+        label='Email'
+        name='emailAddresses[0].emailAddress'
+        placeholder='john@example.com'
+        rules={{
+          required: 'Email is required.',
+          validate: emailValidation,
+        }}
+      />
+      <div style={{ display: 'flex', gap: '1rem' }}>
+        <div style={{ flexGrow: 1 }}>
+          <InputSelect
+            control={control}
+            label='Country Code'
+            name='phoneNumbers[0].code'
+            options={phoneOptions}
+          />
+        </div>
+        <div style={{ flexGrow: 1 }}>
+          <InputText
+            control={control}
+            label='WhatsApp Number'
+            name='phoneNumbers[0].number'
+            placeholder='0400 000 000'
+            rules={{
+              required: 'WhatsApp number is required',
+              validate: validatePhone,
+            }}
+            type='phone'
+          />
+        </div>
+      </div>
+      <small className={classNameCartFormGroup}>
+        By continuing, you agree to receive order updates via WhatsApp at this
+        number.
+      </small>
+      {showUserTermsAndConditions && (
+        <div className={classNameCartFormGroup}>
+          <InputAcceptUserTermsAndConditions
+            isChecked={acceptConditions}
+            setIsChecked={setAcceptConditions}
+          />
+          {!acceptConditions && (
+            <InputError
+              error={{
+                message:
+                  'You must agree to the user profile terms and conditions to proceed.',
+              }}
+            />
+          )}
+        </div>
+      )}
+      <InputError error={error || {}} />
+      <div className={classNameCartFormGroupButton}>
+        <Button
+          className={classNameBtnPrimary}
+          disabled={loading}
+          type='submit'
+        >
+          {loading ? 'Loading...' : 'Continue with WhatsApp'}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export default FormWhatsappCustomer;