merchi_cart 0.0.7-e → 0.0.7

package/src/components/Collapse.tsx

@@ -1,23 +0,0 @@
-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/LoadingTemplate.tsx

@@ -1,22 +0,0 @@
-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

@@ -1,15 +0,0 @@
-import * as 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} width={276} height={215} />
-      <p>No cart items.</p>
-    </div>
-  );
-}
-
-export default NoCartItems;

package/src/components/ShipmentGroupCard.tsx

@@ -1,156 +0,0 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
-import { setSelectedShipmentQuote } from '../store';
-import { addressInOneLine } from '../utilities/address';
-import { currencyTaxAndCost } from '../utilities/currency';
-import { useCartContext } from '../CartProvider';
-import pngProductNotFound from '../assets/product-not-found.png';
-
-function NoCartShipmentOptionsFound() {
-  const { classNameNoItems } = useCartContext();
-  return (
-    <div className={classNameNoItems}>
-      <img src={pngProductNotFound.src} width={276} height={215} />
-      <p>No cart items.</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 {
-  groupIndex: number;
-  quote: any;
-}
-
-function ShipmentQuote({ groupIndex, quote }: ShipmentOptionProps) {
-  const { classNameListItem } = useCartContext();
-  const { selectedQuotes } = useSelector((s: any) => s.stateCartShipment);
-  const isSelected = selectedQuotes[groupIndex].id === quote.id;
-  function doClick() {
-    setSelectedShipmentQuote(groupIndex, quote);
-  }
-  const icon = isSelected ? 'far fa-check-square' : 'far fa-square';
-  return (
-    <div
-      className={classNameListItem}
-      onClick={doClick}
-      style={{cursor: 'pointer'}}
-    >
-      <div
-        style={{
-          alignItems: 'center',
-          display: 'flex',
-          justifyContent: 'space-between',
-        }}
-      >
-        <ShipmentOptionInfo quote={quote} />
-        <div>
-          <i className={icon} />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-interface Props {
-  group: any;
-  groupIndex: number;
-}
-
-function ShipmentGroupCard({ group, groupIndex }: Props) {
-  const {
-    classNameList,
-    classNameListInline,
-  } = useCartContext();
-  const { cartItems, quotes = [] } = group;
-  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={q}
-              groupIndex={groupIndex}
-            />
-          )}
-        </div>
-      ) : (
-        <NoCartShipmentOptionsFound />
-      )}
-    </div>
-  );
-}
-
-export default ShipmentGroupCard;

package/src/components/Table.tsx

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

package/src/components/Title.tsx

@@ -1,22 +0,0 @@
-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/containers.tsx

@@ -1,40 +0,0 @@
-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

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

package/src/forms/FormNewCustomer.tsx

@@ -1,119 +0,0 @@
-import * as React from 'react';
-import { useForm } from 'react-hook-form';
-import { useSelector } from 'react-redux';
-import InputAcceptUserTermsAndConditions from './InputAcceptUserTermsAndConditions';
-import { actionCreateNewCustomer } from '../store';
-import { Button } from '../buttons';
-import InputSelect from './InputSelect';
-import InputText from './InputText';
-import { useCartContext } from '../CartProvider';
-import { phoneOptions } from '../utilities/helpers';
-import InputError from './InputError';
-
-export const emailValidation = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]/i;
-
-export function FormCustomerNew() {
-  const {
-    classNameBtnPrimary,
-    classNameCartFormGroup,
-    showUserTermsAndConditions,
-    urlApi,
-  } = useCartContext();
-  const {
-    creatingNewCustomer: loading,
-    serverError: error,
-  } = useSelector((s: any) => s.stateNewCustomerForm);
-  const [acceptConditions, setAcceptConditions] = React.useState(true);
-
-  const { control, handleSubmit, watch } = useForm({
-    defaultValues: {
-      emailAddresses: [{ emailAddress: '' }],
-      name: '',
-      phoneNumbers: [{ code: 'AU', number: '' }],
-      registeredAsGuest: false,
-    },
-  });
-
-  async function onSubmit(values: any) {
-    await actionCreateNewCustomer((urlApi as string), { ...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={classNameCartFormGroup}>
-        <Button
-          className={classNameBtnPrimary}
-          disabled={loading}
-          type='submit'
-        >
-          {loading ? 'Loading...' : 'Submit'}
-        </Button>
-      </div>
-    </form>
-  );
-}
-
-export default FormCustomerNew;

package/src/forms/FormReturningCustomer.tsx

@@ -1,70 +0,0 @@
-import { useSelector } from 'react-redux';
-import { useForm } from 'react-hook-form';
-import { tryReturningCustomer } from '../store';
-import { Button } from '../buttons';
-import InputError from './InputError';
-import { useCartContext } from '../CartProvider';
-
-const emailValidation = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]/i;
-
-function FormReturningCustomer() {
-  const {
-    classNameBtnPrimary,
-    classNameCartFormGroup,
-    classNameCartFormInput,
-    urlApi
-  } = useCartContext();
-  const {
-    returningCustomerError,
-    returningCustomerLoading,
-  } = useSelector((s: any) => s.stateFormReturningCustomer);
-  const hookForm = useForm({ defaultValues: { emailAddress: '' } });
-  const {
-    handleSubmit,
-    formState: { errors },
-    getValues,
-    register,
-  } = hookForm;
-  async function submit() {
-    const values = getValues();
-    await tryReturningCustomer(
-      (urlApi as string),
-      values.emailAddress
-    );
-  }
-  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} />
-        {returningCustomerError && <InputError error={returningCustomerError} />}
-      </div>
-      <div className={classNameCartFormGroup}>
-        <Button
-          className={classNameBtnPrimary}
-          disabled={returningCustomerLoading}
-          type='submit'
-        >
-          {returningCustomerLoading ? 'Loading...' : 'Submit'}
-        </Button>
-      </div>
-    </form>
-  );
-}
-
-export default FormReturningCustomer;

package/src/forms/FormShipmentAddressAndNotes.tsx

@@ -1,142 +0,0 @@
-import { useDispatch, useSelector } from 'react-redux';
-import { useForm } from 'react-hook-form';
-import InputsAddress from './InputsAddress';
-import {
-  CheckoutContainer,
-  InnerContainer,
-} from '../components/containers';
-import { Title } from '../components';
-import {
-  updateCartShipmentAddress,
-  saveCartShipmentAddressAndGoToNextTab,
-} from '../store';
-import { shipmentFormId, sliceCartShipment } from '../slices/sliceCartShipment';
-import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons';
-import { useCartContext } from '../CartProvider';
-
-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;
-  toggleAddressFields: () => void;
-  updateCartShipmentAddress: (address: any) => void;
-}
-
-function FormShipmentAddressAndNotes({
-    address = {},
-    formId,
-    notes = '',
-    showIcon = true,
-    deliveryNomenclature = false,
-    showHeadings = true,
-    setCartShipmentAddress,
-    updateCartShipmentAddress,
-  }: Props) {
-  const { classNameCartFormGroup } = useCartContext();
-  const hookForm = useForm({
-    defaultValues: {
-      receiverAddress: address,
-      receiverNotes: notes,
-    },
-  });
-  const {
-    getValues,
-    handleSubmit,
-    register,
-    reset,
-  } = hookForm;
-
-  function onSubmit() {
-    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='1rem'>
-            <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 dispatch = useDispatch();
-  const {
-    addressFieldsOpen,
-    receiverAddress,
-    receiverNotes,
-  } = useSelector((s: any) => s.stateCartShipment);
-  function toggleAddressFieldsOpen() {
-    dispatch(sliceCartShipment.actions.toggleAddressFields());
-  }
-  function actionUpdateCartShipmentAddress(address: any) {
-    dispatch(sliceCartShipment.actions.
-      updateShipmentAddress(address));
-    updateCartShipmentAddress();
-  }
-  return (
-    <FormShipmentAddressAndNotes
-      address={receiverAddress}
-      addressFieldsOpen={addressFieldsOpen}
-      formId={shipmentFormId}
-      notes={receiverNotes}
-      setCartShipmentAddress={saveCartShipmentAddressAndGoToNextTab}
-      toggleAddressFields={toggleAddressFieldsOpen}
-      updateCartShipmentAddress={actionUpdateCartShipmentAddress}
-    />
-  );
-}
-
-export default FormShipmentAddressAndNotes;

package/src/forms/FormSquarePayment.tsx

@@ -1,14 +0,0 @@
-import { useSelector } from 'react-redux';
-import SquareCard from '../square/SquareCard';
-
-function FormSquarePayment() {
-  const { cart } = useSelector((s: any) => s.stateCart);
-  const company = cart && cart.domain && cart.domain.company;
-  return (
-    <>
-      {Boolean(company) && company.acceptSquare && <SquareCard />}
-    </>
-  );
-}
-
-export default FormSquarePayment;

package/src/forms/FormStripePayment.tsx

@@ -1,14 +0,0 @@
-import { useSelector } from 'react-redux';
-import StripeCardForm from '../stripe/StripeCardForm';
-
-function FormStripePayment() {
-  const { cart } = useSelector((s: any) => s.stateCart);
-  const company = cart && cart.domain && cart.domain.company;
-  return (
-    <>
-      {Boolean(company) && <StripeCardForm />}
-    </>
-  );
-}
-
-export default FormStripePayment;