merchi_cart 0.0.7-e → 0.0.7

package/src/buttons/Button.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { useCartContext } from "../CartProvider";
-
-interface Props {
-  children: any;
-  className?: string;
-  disabled?: boolean;
-  form?: string;
-  onClick?: () => void;
-  type?: string;
-}
-
-type ButtonType = "button" | "reset" | "submit" | undefined;
-
-export default function Button({
-  children,
-  className = '',
-  disabled,
-  form,
-  onClick,
-  type = 'button',
-}: Props) {
-  const { classNameBtn } = useCartContext();
-  return (
-    <button
-      className={`${classNameBtn} ${className}`}
-      disabled={disabled}
-      form={form}
-      onClick={onClick}
-      type={(type as ButtonType)}
-    >
-      {children}
-    </button>
-  );
-}

package/src/buttons/ButtonBack.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
-import { useCartContext } from '../CartProvider';
-import { setActiveTab } from '../store';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
-import Button from './Button';
-
-interface Props {
-  text?: string;
-}
-
-function ButtonBack({ text }: Props) {
-  const { classNameBtnBack, onClickClose } = useCartContext();
-  const { activeTab, tabs } = useSelector((s: any) => s.stateCart);
-  const currentTabIndex = tabs.findIndex((t: any) => t.tabId === activeTab);
-  let nextTab = null;
-  if (currentTabIndex > 0) {
-    nextTab = tabs[currentTabIndex - 1];
-  }
-  const nextTabId = nextTab ? nextTab.tabId : 0;
-  return (
-    <Button
-      className={classNameBtnBack}
-      onClick={activeTab === 0 ?
-        onClickClose
-      :
-        () => setActiveTab(nextTabId)
-      }
-    >
-      <FontAwesomeIcon icon={faArrowLeft} />
-      {text ? ` ${text}` : ''}
-    </Button>
-  );
-}
-
-export default ButtonBack;

package/src/buttons/ButtonClearCart.tsx

@@ -1,18 +0,0 @@
-import { useCartContext } from '../CartProvider';
-import { tabIdClearCart } from '../slices/sliceCart';
-import { setActiveTab } from '../store';
-import Button from './Button';
-
-function ButtonClearCart() {
-  const { classNameBtnCartClear } = useCartContext();
-  return (
-    <Button
-      className={classNameBtnCartClear}
-      onClick={() => setActiveTab(tabIdClearCart)}
-    >
-      Clear cart
-    </Button>
-  );
-}
-
-export default ButtonClearCart;

package/src/buttons/ButtonInvoiceDownload.tsx

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
-import { useCartContext } from '../CartProvider';
-import { generatePublicInvoicePdf } from '../utilities/invoice';
-import { useState } from 'react';
-import { CgSpinner } from 'react-icons/cg';
-import { FaFileInvoiceDollar } from 'react-icons/fa';
-import { alertError } from '../store';
-
-function ButtonInvoiceDownload() {
-  const {
-    classNameBtnDownloadInvoice,
-    urlApi,
-  } = useCartContext();
-  const {
-    invoice = {},
-  } = useSelector((s: any) => s.stateCartPayment);
-  const { unpaid } = invoice;
-  const [loading, setLoading] = useState(false);
-  async function generate(receipt?: boolean) {
-    setLoading(true);
-    try {
-      await generatePublicInvoicePdf((urlApi as string), invoice, receipt);
-      setLoading(false);
-    } catch (e: any) {
-      alertError(e.message);
-      setLoading(false);
-    }
-  }
-  return (
-    <>
-      {unpaid ? (
-        <button
-          className={classNameBtnDownloadInvoice}
-          disabled={loading}
-          onClick={() => generate(false)}
-        >
-          {loading ? (
-            <CgSpinner fontSize='1.1rem' className='animate_spin mr-2' />
-          ) : (
-            <FaFileInvoiceDollar fontSize='1.1rem' className='mr-2' />
-          )}
-          Download Invoice
-        </button>
-      ) : (
-        <button
-          className={classNameBtnDownloadInvoice}
-          disabled={loading}
-          onClick={() => generate(true)}
-        >
-          {loading ? (
-            <CgSpinner fontSize='1.1rem' className='animate_spin mr-2' />
-          ) : (
-            <FaFileInvoiceDollar fontSize='1.1rem' className='mr-2' />
-          )}
-          Download Receipt
-        </button>
-      )}
-    </>
-  );
-}
-
-export default ButtonInvoiceDownload;

package/src/buttons/ButtonNext.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
-import { tabIdCheckout } from '../slices/sliceCart';
-import { setActiveTab } from '../store';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowRight, faCircleNotch, faCreditCard } from '@fortawesome/free-solid-svg-icons';
-import Button from './Button';
-import { useCartContext } from '../CartProvider';
-
-function ButtonNext() {
-  const {
-    classNameBtnNext,
-    classNameBtnNextComplete,
-  } = useCartContext();
-  const {
-    activeTab,
-    loading,
-    tabs,
-  } = useSelector((s: any) => s.stateCart);
-  const currentTabIndex = tabs.findIndex((t: any) => t.tabId === activeTab);
-  const nextTab = tabs[currentTabIndex + 1];
-  const isCheckoutTabOpen = activeTab === tabIdCheckout;
-  const icon = loading ? faCircleNotch : isCheckoutTabOpen ? faCreditCard : faArrowRight;
-  return (
-    <Button
-      className={isCheckoutTabOpen ? classNameBtnNextComplete : classNameBtnNext}
-      onClick={nextTab ? () => setActiveTab(nextTab.tabId) : undefined}
-      disabled={loading}
-    >
-      <FontAwesomeIcon icon={icon} spin={loading} />
-      <span style={{marginLeft: '5px'}}>
-        {loading ? 'Loading...' : 'Next'}
-      </span>
-    </Button>
-  );
-}
-
-export default ButtonNext;

package/src/buttons/ButtonNextDynamic.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
-import {
-  tabIdCheckout,
-  tabIdItems,
-  tabIdPaymentSuccess,
-  tabIdShipment,
-} from '../slices/sliceCart';
-import ButtonNext from './ButtonNext';
-import ButtonShipmentTabNext from './ButtonShipmentTabNext';
-
-function ButtonNextDynamic() {
-  const { cart, activeTab } = useSelector((s: any) => s.stateCart);
-  const cartItems = cart.cartItems;
-  const hasCartItems = cartItems && cartItems.length;
-  const isCartItemsTabActive = activeTab === tabIdItems;
-  const isShipmentTabActive = activeTab === tabIdShipment;
-  const isCheckoutTabOpen = activeTab === tabIdCheckout;
-  const isPaymentSuccessOpen = activeTab === tabIdPaymentSuccess;
-  return isCheckoutTabOpen || isPaymentSuccessOpen ? (
-    <></>
-  ) : isShipmentTabActive ? (
-    <ButtonShipmentTabNext />
-  ) : isCartItemsTabActive && !hasCartItems ? (
-    <></>
-  ) : (
-    <ButtonNext />
-  );
-}
-
-export default ButtonNextDynamic;

package/src/buttons/ButtonPay.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { useCartContext } from '../CartProvider';
-import { currencyMap } from '../utilities/currency';
-import Button from './Button';
-
-interface Props {
-  cart: any;
-  loading: boolean;
-}
-
-function ButtonPay({ cart, loading }: Props) {
-  const { classNameBtnPay } = useCartContext();
-  const { currency, totalCost } = cart;
-  return (
-    <Button
-      className={classNameBtnPay}
-      disabled={loading}
-      type='submit'
-    >
-      {loading ? (
-        <span>Loading...</span>
-      ) : (
-        <span>
-          Pay {currencyMap[currency]}
-          {totalCost}<small> / inc tax</small>
-        </span>
-      )}
-    </Button>
-  );
-}
-
-export default ButtonPay;

package/src/buttons/ButtonShipmentTabNext.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
-import { shipmentFormId } from '../slices/sliceCartShipment';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowRight, faCircleNotch } from '@fortawesome/free-solid-svg-icons';
-import Button from './Button';
-import { useCartContext } from '../CartProvider';
-
-export default function ButtonShipmentTabNext() {
-  const { classNameBtnNext } = useCartContext();
-  const { savingShipmentAddress } = useSelector((s: any) => s.stateCartShipment);
-  const icon = savingShipmentAddress ? faCircleNotch : faArrowRight;
-  return (
-    <Button
-      className={classNameBtnNext}
-      form={shipmentFormId}
-      disabled={savingShipmentAddress}
-    >
-      <FontAwesomeIcon icon={icon} spin={savingShipmentAddress} />
-      <span style={{marginLeft: '5px'}}>
-        {savingShipmentAddress ? 'Loading...' : 'Next'}
-      </span>
-    </Button>
-  );
-}

package/src/buttons/index.ts

@@ -1,15 +0,0 @@
-import Button from './Button';
-import ButtonBack from './ButtonBack';
-import ButtonClearCart from './ButtonClearCart';
-import ButtonInvoiceDownload from './ButtonInvoiceDownload';
-import ButtonNextDynamic from './ButtonNextDynamic';
-import ButtonPay from './ButtonPay';
-
-export {
-  Button,
-  ButtonBack,
-  ButtonClearCart,
-  ButtonNextDynamic,
-  ButtonPay,
-  ButtonInvoiceDownload,
-};

package/src/components/Alert.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { useCartContext } from '../CartProvider';
-
-interface Props {
-  alertType?: 'success' | 'danger' | 'warning' | 'info';
-  children: any;
-}
-
-export default function Alert({ alertType, children }: Props) {
-  const { 
-    classNameAlertError,
-    classNameAlertInfo,
-    classNameAlertSuccess,
-    classNameAlertWarning,
-   } = useCartContext();
-  let className = classNameAlertInfo;
-  if (alertType === 'success') {
-    className = classNameAlertSuccess;
-  }
-  if (alertType === 'danger') {
-    className = classNameAlertError;
-  }
-  if (alertType === 'warning') {
-    className = classNameAlertWarning;
-  }
-  return (
-    <div className={className}>
-      {children}
-    </div>
-  );
-}

package/src/components/CartBody.tsx

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

package/src/components/CartClient.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import { useDispatch } from 'react-redux';
-import { axtionSetCartClient } from '../store';
-import {
-  primaryEmail,
-  primaryPhone,
-} from '../utilities/user';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUserCircle, faUserTimes } from '@fortawesome/free-solid-svg-icons';
-import Button from '../buttons/Button';
-import Title from './Title';
-import { useCartContext } from '../CartProvider';
-
-export function ClientInfo({ client }: any) {
-  const { classNameListClientInfo } = useCartContext();
-  const { name = 'Returning customer' } = client;
-  const emailAddress = primaryEmail(client) || 'Email not shown';
-  const phoneNumber = primaryPhone(client) || 'Phone number not shown';
-  return (
-    <ul className={classNameListClientInfo}>
-      <li>{name}</li>
-      <li>{emailAddress}</li>
-      <li>{phoneNumber}</li>
-    </ul>
-  );
-}
-
-interface Props {
-  client: any;
-}
-
-function CartClient({ client }: Props) {
-  const dispatch = useDispatch();
-  function clearClient() {
-    axtionSetCartClient(null);
-  }
-  return (
-    <div>
-      <Title icon={faUserCircle} Title='Checkout as' />
-      <ClientInfo client={client} />
-      <Button onClick={clearClient}>
-        <FontAwesomeIcon icon={faUserTimes} /> Change
-      </Button>
-    </div>
-  );
-}
-
-export default CartClient;

package/src/components/CartFooter.tsx

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

package/src/components/CartItemRow.tsx

@@ -1,145 +0,0 @@
-import * as React from 'react';
-import { cartItemCurrencyAndCost } from '../utilities/currency';
-import { productFeatureImageUrl } from '../utilities/product';
-import { valueString } from '../utilities/variations';
-import { actionDeleteCartItem, setCartItem } from '../store';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCircleNotch, faEdit, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { Button } from '../buttons';
-import { useCartContext } from '../CartProvider';
-
-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;
-  loading: boolean;
-}
-
-function CartItemRow({ cartItem, index, loading }: Props) {
-  const {
-    classNameBtnLink,
-    classNameCartItemFeatureImage,
-    classNameCartItemInfo,
-    classNameCartItemInfoCell,
-    classNameCartItemInfoCellRight,
-    classNameCartItemInfoContainer,
-  } = useCartContext();
-  const {
-    product,
-    quantity,
-    variations,
-    variationsGroups,
-  } = cartItem;
-  const { name } = product;
-  return (
-    <tr>
-      <th scope='row' className={classNameCartItemInfoCell}>
-        <img
-          src={productFeatureImageUrl(product)}
-          alt={name}
-          width='70'
-          className={classNameCartItemFeatureImage}
-        />
-        <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>
-      </th>
-      <td className={classNameCartItemInfoCellRight}>
-        <strong>{quantity}</strong>
-      </td>
-      <td className={classNameCartItemInfoCellRight}>
-        <strong>{cartItemCurrencyAndCost(cartItem)}</strong>
-      </td>
-      <td className={classNameCartItemInfoCellRight}>
-        <Button
-          className={classNameBtnLink}
-          onClick={() => setCartItem(cartItem, index)}
-        >
-          <FontAwesomeIcon icon={faEdit} />
-        </Button>
-        <Button
-          className={classNameBtnLink}
-          onClick={() => actionDeleteCartItem(index)}
-        >
-          <FontAwesomeIcon
-            icon={loading ? faCircleNotch : faTrashAlt}
-            spin={loading}
-          />
-        </Button>
-      </td>
-    </tr>
-  );
-}
-
-export default CartItemRow;

package/src/components/CartPaymentSettingsInvalid.tsx

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

@@ -1,55 +0,0 @@
-import { useDispatch } from 'react-redux';
-import Title from './Title';
-import { sliceCart, tabIdShipment } from '../slices/sliceCart';
-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,
-  } = useCartContext();
-  const { receiverAddress, receiverNotes } = cart;
-  const address = receiverAddress ? receiverAddress : null;
-  const dispatch = useDispatch();
-  function openShipmentTab() {
-    dispatch(sliceCart.actions.setActiveTab(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', marginLeft: 28}}>
-            {address ? addressInOneLine(address) : 'Shipping address not set'}
-          </span>
-        </li>
-        <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

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

@@ -1,25 +0,0 @@
-import { useSelector } from 'react-redux';
-import { useCartContext } from '../CartProvider';
-
-interface Props {
-  children: any;
-  tabId: number;
-}
-
-export default function CartTabPanel({ children, tabId }: Props) {
-  const { activeTab, tabs } = useSelector((s: any) => s.stateCart);
-  const { classNameCartTabPanel } = useCartContext();
-  const activeTabValues = tabs[activeTab];
-  const display = tabId === -1 && activeTab === -1
-    ? 'block'
-    : tabId === -2 && activeTab === -2
-    ? 'block'
-    : activeTabValues && tabId === activeTabValues.tabId
-    ? 'block'
-    : 'none';
-  return (
-    <div className={classNameCartTabPanel} style={{ display }}>
-      {children}
-    </div>
-  );
-}

package/src/components/CartTableContainer.tsx

@@ -1,15 +0,0 @@
-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>
-  );
-}