merchi_cart 0.0.7-e → 0.0.7

package/src/forms/InputAcceptUserTermsAndConditions.tsx

@@ -1,43 +0,0 @@
-import { useCartContext } from '../CartProvider';
-
-
-interface Props {
-  isChecked: boolean;
-  setIsChecked: (isChecked: boolean) => void;
-}
-
-function InputAcceptUserTermsAndConditions({ isChecked, setIsChecked }: Props) {
-  const {
-    classNameCartFormCheckbox,
-    classNameCartFormGroupCheckbox,
-    classNameCartFormLabelCheckbox,
-  } = useCartContext();
-  return (
-    <div
-      onClick={
-        () => setIsChecked(!isChecked)
-      }
-      className={classNameCartFormGroupCheckbox}
-    >
-      <label className={classNameCartFormLabelCheckbox}>
-        <input
-          className={classNameCartFormCheckbox}
-          defaultChecked={isChecked}
-          type='checkbox'
-        />
-        {' '}
-        <span style={{ fontSize: '14px' }} className='text-muted'>
-          I agree to the user profile{' '}
-          <a
-            href='/terms-and-conditions/user/'
-            target='_blank'
-          >
-            terms &amp; conditions
-          </a>.
-        </span>
-      </label>
-    </div>
-  );
-}
-
-export default InputAcceptUserTermsAndConditions;

package/src/forms/InputError.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { useCartContext } from '../CartProvider';
-
-interface InputErrorProps {
-  error?: {
-    message?: string;
-  };
-}
-
-const InputError: React.FC<InputErrorProps> = ({ error }) => {
-  const { classNameCartInputError } = useCartContext();
-  if (!error || !error.message) {
-    return null;
-  }
-
-  return (
-    <div className={classNameCartInputError}>
-      {error.message}
-    </div>
-  );
-};
-
-export default InputError;

package/src/forms/InputSelect.tsx

@@ -1,58 +0,0 @@
-import { v4 as uuidv4 } from 'uuid';
-import { useController } from 'react-hook-form';
-import InputError from './InputError';
-import { useCartContext } from '../CartProvider';
-
-interface Option {
-  label: string;
-  value: string;
-}
-
-interface Props {
-  control: any;
-  label?: string;
-  name: string;
-  options: Option[];
-  rules?: any;
-}
-
-function InputSelect({
-  control,
-  label,
-  name,
-  options,
-  rules,
-}: Props) {
-  const {
-    classNameCartFormGroup,
-    classNameCartFormInput,
-  } = useCartContext();
-  const {
-    field,
-    fieldState: { error, invalid }
-  } = useController({
-    name,
-    control,
-    rules,
-    defaultValue: '',
-  });
-
-  return (
-    <div className={classNameCartFormGroup}>
-      {label && <label>{label}</label>}
-      <select
-        {...field}
-        className={`${classNameCartFormInput} ${invalid && ' is-invalid'}`}
-      >
-        {options.map((option, index) => (
-          <option key={index + uuidv4()} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-      <InputError error={error} />
-    </div>
-  );
-}
-
-export default InputSelect;

package/src/forms/InputText.tsx

@@ -1,56 +0,0 @@
-import { useController } from 'react-hook-form';
-import { useCartContext } from '../CartProvider';
-import InputError from './InputError';
-
-interface Props {
-  control: any;
-  label?: string;
-  name: string;
-  placeholder: string;
-  type?: string;
-  onChange?: (event: any) => void; 
-  rules?: Record<string, any>;
-}
-
-function InputText({
-  control,
-  label,
-  name,
-  placeholder,
-  type = 'text',
-  onChange,
-  rules,
-}: Props) {
-  const {
-    classNameCartFormGroup,
-    classNameCartFormInput,
-  } = useCartContext();
-  const {
-    field: { ref, ...inputProps },
-    fieldState: { error, invalid }
-  } = useController({
-    name,
-    control,
-    rules,
-    defaultValue: '',
-  });
-
-  return (
-    <div className={classNameCartFormGroup}>
-      {label && <label>{label}</label>}
-      <input
-        className={`${classNameCartFormInput} ${invalid && ' is-invalid'}`}
-        type={type}
-        placeholder={placeholder}
-        {...inputProps}
-        onChange={(e) => {
-          if (onChange) onChange(e);  // Check if custom onChange was provided
-          inputProps.onChange(e);  // Default RHF onChange
-        }}
-      />
-      <InputError error={error} />
-    </div>
-  );
-}
-
-export default InputText;

package/src/forms/InputsAddress.tsx

@@ -1,205 +0,0 @@
-import { useEffect, useRef } from 'react';
-import Geosuggest from 'react-geosuggest';
-import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';
-import { Controller } from 'react-hook-form';
-import InputText from './InputText';
-import { addressInOneLine, geoSuggestResultAsNewAddress } from '../utilities/address';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes, faEdit, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import { useState } from 'react';
-import { Collapse } from '../components';
-import { useCartContext } from '../CartProvider';
-
-interface Props {
-  defaultAddress?: any;
-  labelGeoSuggest?: string;
-  hookForm: any;
-  name: string;
-  placeholder?: string;
-  updateAddress: (address: any) => void;
-}
-
-export function InputsAddress({
-  defaultAddress = {},
-  labelGeoSuggest = 'Address',
-  hookForm,
-  name,
-  placeholder = 'Search your address',
-  updateAddress
-}: Props) {
-  const geosuggestEl = useRef(null);
-  const {
-    googlePlacesLoaded,
-    classNameCartFormGroup,
-    classNameCartFormInput,
-    classNameCartRow,
-    classNameCartRowColumn,
-    classNameCartGoogleSuggestList,
-    classNameCartGoogleSuggestListItem,
-  } = useCartContext();
-
-  const {
-    control,
-    formState: { errors, isValid, submitCount },
-    setValue,
-    getValues,
-  } = hookForm;
-  const inputName = (_name: string) => `${name ? `${name}.` : ''}${_name}`;
-  function onSuggestSelect(suggest: any) {
-    if (suggest) {
-      updateAddress(geoSuggestResultAsNewAddress(suggest));
-    } else {
-      updateAddress({
-        city: '',
-        country: '',
-        lineOne: '',
-        lineTwo: '',
-        postcode: '',
-        state: '',
-      });
-    }
-    (geosuggestEl as any).current.blur();
-  }
-  function onChangeCountryState() {
-    const addr = getValues();
-    updateAddress(addr[name]);
-  }
-  const [addressFieldsOpen, setAddressFieldsOpen] = useState(false);
-  const toggleAddressFieldsOpen = () => setAddressFieldsOpen(!addressFieldsOpen);
-  useEffect(() => {
-    if (!isValid && !addressFieldsOpen && submitCount > 0) {
-      toggleAddressFieldsOpen();
-    }
-  }, [isValid, submitCount]);
-  const addressForm = (
-    <>
-      <InputText
-        control={control}
-        label="Address line one"
-        name={inputName("lineOne")}
-        placeholder="123 Fake st"
-        rules={{ required: 'Address line one is required.' }}
-      />
-      <InputText
-        control={control}
-        label="Continue address"
-        name={inputName("lineTwo")}
-        placeholder="Continue address..."
-      />
-      <div className={classNameCartRow}>
-        <div className={classNameCartRowColumn}>
-          <InputText
-            control={control}
-            label="City / Province"
-            name={inputName("city")}
-            placeholder="City"
-            rules={{ required: 'City / Province is required.' }}
-          />
-        </div>
-        <div className={classNameCartRowColumn}>
-          <InputText
-            control={control}
-            label="Post / Zip code"
-            name={inputName("postcode")}
-            placeholder="90210"
-          />
-        </div>
-      </div>
-      <div className={classNameCartRow}>
-        <div className={classNameCartRowColumn}>
-          <div className={classNameCartFormGroup}>
-            <label>Country</label>
-            <Controller
-              name={inputName("country")}
-              control={control}
-              defaultValue={defaultAddress && defaultAddress.country}
-              render={({ field }: any) => (
-                <CountryDropdown
-                  {...field}
-                  // value={defaultAddress && defaultAddress.country}
-                  classes={classNameCartFormInput}
-                  onChange={(val) => {
-                    setValue(inputName("country"), val);
-                    field.onChange(val);
-                    onChangeCountryState();
-                  }}
-                  valueType='short'
-                />
-              )}
-            />
-          </div>
-        </div>
-        <div className={classNameCartRowColumn}>
-          <div className={classNameCartFormGroup}>
-            <label>State / Region</label>
-            <Controller
-              name={inputName("state")}
-              control={control}
-              defaultValue={defaultAddress && defaultAddress.state}
-              render={({ field }: any) => (
-                <RegionDropdown
-                  {...field}
-                  // value={defaultAddress && defaultAddress.state}
-                  countryValueType="short"
-                  country={getValues(inputName("country"))}
-                  classes={classNameCartFormInput}
-                  onChange={(val) => {
-                    setValue(inputName("state"), val);
-                    field.onChange(val);
-                    onChangeCountryState();
-                  }}
-                  valueType='short'
-                />
-              )}
-            />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-  return (
-    <>
-      {googlePlacesLoaded
-        ? <>
-            <div className={classNameCartFormGroup}>
-              <label>{labelGeoSuggest}</label>
-              <Geosuggest
-                ref={geosuggestEl}
-                style={{input: {'::placeholder': {color: '#525f7f'}}}}
-                initialValue={addressInOneLine(defaultAddress)}
-                inputClassName={classNameCartFormInput}
-                onSuggestSelect={onSuggestSelect}
-                placeholder={placeholder}
-                suggestsClassName={classNameCartGoogleSuggestList}
-                suggestItemClassName={classNameCartGoogleSuggestListItem}
-                types={['establishment', 'geocode']}
-              />
-            </div>
-            <Collapse isOpen={addressFieldsOpen}>
-              {addressForm}
-            </Collapse>
-            <div className='d-flex align-items-center'>
-              {!!errors.length &&
-                <div className='text-danger'>
-                  <FontAwesomeIcon
-                    icon={faExclamationTriangle}
-                  /> Invalid address!
-                </div>
-              }
-              <a
-                className={`ml-auto btn btn-sm btn-link ${!!errors.length && 'text-danger'}`}
-                onClick={toggleAddressFieldsOpen}
-              >
-                <FontAwesomeIcon
-                  icon={addressFieldsOpen ? faTimes : faEdit}
-                /> {addressFieldsOpen ? 'Close' : 'Edit fields'}
-              </a>
-            </div>
-          </>
-        : addressForm
-      } 
-    </>
-  );
-}
-
-export default InputsAddress;

package/src/index.tsx

@@ -1,13 +0,0 @@
-import Cart from './Cart';
-import {  
-  actionGetMerchiCart as getMerchiCart,  
-  getMerchiCartValues,  
-  isMerchiCartFetching
-} from './store';
-
-export {
-  Cart,
-  getMerchiCart,
-  getMerchiCartValues,
-  isMerchiCartFetching
-};

package/src/panels/PanelCartItems.tsx

@@ -1,61 +0,0 @@
-import { useSelector } from 'react-redux';
-import CartItemRow from '../components/CartItemRow'
-import { tabIdItems } from '../slices/sliceCart';
-import {
-  CartBody,
-  CartTabContent,
-  CartTableContainer,
-  CartTabPanel,
-  NoCartItems,
-  Table,
-} from '../components';
-
-function PanelCartItems() {
-  const { cart, deletingCartItemIndex } = useSelector((s: any) => s.stateCart);
-  const cartItems = cart.cartItems ? cart.cartItems : [];
-  const hasItems = cartItems.length > 0;
-  return (
-    <CartTabPanel tabId={tabIdItems}>
-      <CartBody>
-        <CartTabContent>
-          {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}
-                      loading={deletingCartItemIndex === index}
-                    />)
-                  }
-                </tbody>
-              </Table>
-            </CartTableContainer>
-          ) : (
-            <NoCartItems />
-          )}
-        </CartTabContent>
-      </CartBody>
-    </CartTabPanel>
-  );
-}
-
-export default PanelCartItems;

package/src/panels/PanelCartShipment.tsx

@@ -1,89 +0,0 @@
-import { useSelector } from 'react-redux';
-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 '../slices/sliceCart';
-
-function PanelCartShipment() {
-  const {
-    fetchingShipmentGroups,
-    shipmentGroups,
-  } = useSelector((s: any) => s.stateCartShipment);
-  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>
-          {fetchingShipmentGroups ? (
-            <CheckoutContainer>
-              <InnerContainer width={700}>
-                <LoadingTemplateSm />
-                <p>Fetching shipping options.</p>
-              </InnerContainer>
-            </CheckoutContainer>
-          ) : (
-            <>
-              <CheckoutContainer textAlign='left'>
-                <InnerContainer
-                  paddingBottom='1rem'
-                  width={700}
-                >
-                  <Title
-                    icon={faTruck}
-                    title={
-                      shipmentGroups.length > 1 ?
-                        'Select shipment methods'
-                      : shipmentGroups.length ?
-                        'Select a shipment method'
-                      : ''
-                    }
-                  />
-                </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

@@ -1,47 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { doClearCart, closeClearCart } from '../store';
-import { tabIdClearCart } from '../slices/sliceCart'
-import { Button } from '../buttons';
-import { CartBody, CartTabPanel } from '../components';
-import { useCartContext } from '../CartProvider';
-
-function PanelClearCart() {
-  const { 
-    classNameBtnDanger,
-    classNameBtnDefault,
-    classNameClearCartContainer,
-    classNameClearCartText,
-   } = useCartContext();
-  return (
-    <CartTabPanel tabId={tabIdClearCart}>
-      <CartBody>
-        <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={doClearCart}
-            >
-              Yes, clear cart
-            </Button>
-          </p>
-        </div>
-      </CartBody>
-    </CartTabPanel>
-  );
-}
-
-export default PanelClearCart;

package/src/panels/PanelClientCheckout.tsx

@@ -1,92 +0,0 @@
-import { useSelector } from 'react-redux';
-import { tabIdCheckout } from '../slices/sliceCart';
-import {
-  CheckoutContainer,
-  InnerContainer,
-} from '../components/containers';
-import CartClient from '../components/CartClient';
-import CartShipment from '../components/CartShipment';
-import {
-  CartBody,
-  CartTabPanel,
-  Title,
-} from '../components';
-import FormNewCustomer from '../forms/FormNewCustomer';
-import FormReturningCustomer from '../forms/FormReturningCustomer';
-import FormSquarePayment from '../forms/FormSquarePayment';
-import FormStripePayment from '../forms/FormStripePayment';
-import { faUserPlus, faUserTag } from '@fortawesome/free-solid-svg-icons';
-
-function PanelClientCheckout() {
-  const { cart, needsShipping } = useSelector((s: any) => s.stateCart);
-  const { client, domain } = cart;
-  const company = domain && domain.company;
-  return (
-    <CartTabPanel tabId={tabIdCheckout}>
-      <CartBody style={{ paddingTop: '2rem' }}>
-        {client && client.id > -1 ?
-          <>
-            <CheckoutContainer>
-              <InnerContainer
-                paddingBottom='3rem'
-              >
-                <CartClient client={client} />
-              </InnerContainer>
-            </CheckoutContainer>
-            {needsShipping &&
-              <CheckoutContainer>
-                <InnerContainer
-                  paddingBottom='3rem'
-                >
-                  <CartShipment cart={cart} />
-                </InnerContainer>
-              </CheckoutContainer>
-            }
-            {Boolean(company) && company.acceptSquare &&
-              <CheckoutContainer>
-                <InnerContainer
-                  paddingBottom='3rem'
-                >
-                  <FormSquarePayment />
-                </InnerContainer>
-              </CheckoutContainer>
-            }
-            <CheckoutContainer>
-              <InnerContainer>
-                <FormStripePayment />
-              </InnerContainer>
-            </CheckoutContainer>
-
-          </>
-        :
-          <>
-            <CheckoutContainer>
-              <InnerContainer
-                paddingBottom='3rem'
-              >
-                <Title
-                  icon={faUserPlus}
-                  Title='Checkout as new customer'
-                />
-                <FormNewCustomer />
-              </InnerContainer>
-            </CheckoutContainer>
-            <CheckoutContainer>
-              <InnerContainer
-                paddingBottom='3rem'
-              >
-                <Title
-                  icon={faUserTag}
-                  Title='Checkout as returning customer'
-                />
-                <FormReturningCustomer />
-              </InnerContainer>
-            </CheckoutContainer>
-          </>
-        }
-      </CartBody>
-    </CartTabPanel>
-  );
-}
-
-export default PanelClientCheckout;