@merchi/cart 1.4.4

package/lib/utilities/variations.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldType = void 0;
+exports.isSelectable = isSelectable;
+exports.valueString = valueString;
+var _area = require("./area");
+var FieldType = exports.FieldType = /*#__PURE__*/function (FieldType) {
+  FieldType[FieldType["TEXT_INPUT"] = 1] = "TEXT_INPUT";
+  FieldType[FieldType["SELECT"] = 2] = "SELECT";
+  FieldType[FieldType["FILE_UPLOAD"] = 3] = "FILE_UPLOAD";
+  FieldType[FieldType["TEXT_AREA"] = 4] = "TEXT_AREA";
+  FieldType[FieldType["NUMBER_INPUT"] = 5] = "NUMBER_INPUT";
+  FieldType[FieldType["CHECKBOX"] = 6] = "CHECKBOX";
+  FieldType[FieldType["RADIO"] = 7] = "RADIO";
+  FieldType[FieldType["FIELD_INSTRUCTIONS"] = 8] = "FIELD_INSTRUCTIONS";
+  FieldType[FieldType["IMAGE_SELECT"] = 9] = "IMAGE_SELECT";
+  FieldType[FieldType["COLOUR_PICKER"] = 10] = "COLOUR_PICKER";
+  FieldType[FieldType["COLOUR_SELECT"] = 11] = "COLOUR_SELECT";
+  FieldType[FieldType["TURNAROUND_TIME"] = 12] = "TURNAROUND_TIME";
+  FieldType[FieldType["COLOUR_EXTRACT"] = 13] = "COLOUR_EXTRACT";
+  FieldType[FieldType["AREA"] = 14] = "AREA";
+  return FieldType;
+}({});
+function isSelectable(fieldType) {
+  return [FieldType.SELECT, FieldType.CHECKBOX, FieldType.RADIO, FieldType.IMAGE_SELECT, FieldType.COLOUR_SELECT, FieldType.COLOUR_EXTRACT].includes(fieldType);
+}
+function concatinatedSelectedOptionValues(variation) {
+  var selectableOptions = variation.selectableOptions,
+    value = variation.value;
+  var optionIds = value ? value.split(',') : [];
+  var optionIdsLength = optionIds.length - 1;
+  var option;
+  var i = 0;
+  var val = '';
+  for (i; i < optionIds.length; i++) {
+    option = selectableOptions.find(function (o) {
+      return String(o.optionId) === String(optionIds[i]);
+    });
+    val += option ? option.value : '';
+    if (optionIdsLength > i) {
+      val += ', ';
+    }
+  }
+  return val;
+}
+function valueString(variation) {
+  var field = variation.variationField,
+    variationFiles = variation.variationFiles,
+    value = variation.value;
+  if (isSelectable(field.fieldType)) {
+    return concatinatedSelectedOptionValues(variation);
+  } else if ((field.fieldType === FieldType.FILE_UPLOAD || field.fieldType === FieldType.COLOUR_EXTRACT) && variationFiles) {
+    if (field.fieldType === FieldType.COLOUR_EXTRACT) {
+      var colours = concatinatedSelectedOptionValues(variation);
+      var fileLabel = variationFiles.length > 1 ? 'uploaded files' : 'uploaded file';
+      return colours ? "".concat(fileLabel, " (").concat(colours, ")") : fileLabel;
+    }
+    return variationFiles.length > 1 ? 'uploaded files' : 'uploaded file';
+  } else if (field.fieldType === FieldType.AREA) {
+    return (0, _area.formatAreaSummary)(value, (0, _area.localePrefersImperial)() ? 'imperial' : 'metric', field.areaUnit || 'mm') || value;
+  }
+  return value;
+}

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@merchi/cart",
+  "version": "1.4.4",
+  "description": "Merchi's cart",
+  "source": "src/index.ts",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "types": "lib/index.d.ts",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "scripts": {
+    "build:esm": "babel src --out-dir esm --config-file ./babel.esm.config.cjs --extensions .js,.ts,.tsx --verbose && npm run copy-assets && npm run compile-sass",
+    "build:lib": "babel src --out-dir lib --config-file ./babel.build.config.cjs --extensions .js,.ts,.tsx --verbose && npm run copy-assets && npm run compile-sass",
+    "build": "npm run build:esm && npm run build:lib && npm run build:types",
+    "build:types": "tsc -p tsconfig.build.json",
+    "copy-assets": "copyfiles -u 1 src/assets/**/* esm && copyfiles -u 1 src/assets/**/* lib",
+    "compile-sass": "sass src/styles/globals.scss esm/styles/globals.css && sass src/styles/globals.scss lib/styles/globals.css",
+    "start": "react-scripts start",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/merchisdk/merchi_ts.git",
+    "directory": "packages/cart"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "merchi",
+    "component",
+    "merch",
+    "merchandise",
+    "library",
+    "stripe"
+  ],
+  "author": "Merchi SDK <james@merchi.co>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/merchisdk/merchi_ts/issues"
+  },
+  "homepage": "https://github.com/merchisdk/merchi_ts/tree/main/packages/cart#readme",
+  "files": [
+    "esm",
+    "lib",
+    "src"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.0",
+    "@babel/plugin-proposal-export-default-from": "^7.23.3",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+    "@babel/plugin-transform-react-jsx": "^7.23.4",
+    "@babel/plugin-transform-runtime": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@types/jest": "^28.0.0",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.11.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/uuid": "^9.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.30.5",
+    "babel-plugin-inline-import": "^3.0.0",
+    "babel-plugin-inline-react-svg": "^2.0.2",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "babel-plugin-transform-typescript-metadata": "^0.3.2",
+    "compile-sass": "^2.0.0",
+    "copyfiles": "^2.4.1",
+    "eslint": "8.47.0",
+    "eslint-config-next": "13.4.16",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "sass": "^1.70.0",
+    "typescript": "^5.1.6"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@stripe/react-stripe-js": "^2.3.0",
+    "@stripe/stripe-js": "^2.1.6",
+    "browser-or-node": "^3.0.0-pre.0",
+    "js-cookie": "^3.0.5",
+    "lodash": "^4.17.21",
+    "@merchi/product-form": "^1.19.12",
+    "@merchi/product-form-sdk": "^1.0.9",
+    "@merchi/sdk": "^1.40.2",
+    "react-country-region-selector": "^3.6.1",
+    "react-hook-form": "7.45.4",
+    "react-icons": "^4.10.1",
+    "react-square-web-payments-sdk": "^3.2.1",
+    "react-transition-group": "^4.4.5",
+    "reactstrap": "^9.2.2",
+    "@merchi/invoice": "^1.3.3"
+  }
+}

package/src/Cart.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { Suspense, lazy } from 'react';
+import CartAlert from './CartAlert';
+import CartHeader from './CartHeader';
+import CartNav from './tabs/CartNav';
+import CartTotals from './CartTotals';
+import CartProvider, { PropsCart, useCartContext } from './CartProvider';
+import {
+  ButtonBack,
+  ButtonClearCart,
+  ButtonNextDynamic,
+} from './buttons';
+import {
+  CartFooter,
+  CartPaymentSettingsInvalid,
+  LoadingTemplate,
+} from './components';
+import { LoadingTemplateSm } from './components/LoadingTemplate';
+import PanelCartItems from './panels/PanelCartItems';
+import PanelCartShipment from './panels/PanelCartShipment';
+import PanelClearCart from './panels/PanelClearCart';
+import PanelPaymentSuccess from './panels/PanelPaymentSuccess';
+import {
+  tabIdCheckout,
+  tabIdClearCart,
+  tabIdItem,
+  tabIdPaymentSuccess,
+} from './utilities/tabs';
+import './styles/globals.css';
+
+// Heavy panels: keep out of the initial cart chunk until their tab is opened.
+const PanelClientCheckout = lazy(() => import('./panels/PanelClientCheckout'));
+const PanelEditCartItem = lazy(() => import('./panels/PanelEditCartItem'));
+
+interface Props {
+  footer?: React.ReactElement;
+}
+
+export function CartComponents({
+  footer
+}: Props) {
+  const {
+    activeTabIndex,
+    cart,
+    cartSettingsInvalid,
+    fetchingCart,
+    hideHead,
+  } = useCartContext();
+  return (
+    <>
+      {!hideHead && <CartHeader />}
+      <CartAlert />
+      <CartNav />
+      {fetchingCart ? (
+        <LoadingTemplate />
+      ) : cartSettingsInvalid ? (
+        <CartPaymentSettingsInvalid />
+      ) : (
+        <div className='merchi-tab-pane'>
+          <PanelClearCart />
+          <Suspense fallback={<LoadingTemplateSm />}>
+            {activeTabIndex === tabIdItem && (
+              <PanelEditCartItem cart={cart} />
+            )}
+            {activeTabIndex === tabIdCheckout && (
+              <PanelClientCheckout />
+            )}
+          </Suspense>
+          <PanelCartItems />
+          <PanelCartShipment />
+          <PanelPaymentSuccess />
+          {![tabIdItem, tabIdClearCart, tabIdPaymentSuccess].includes(activeTabIndex) &&
+            <>
+              {activeTabIndex !== tabIdCheckout && (<CartTotals />)}
+              {footer || (
+                <CartFooter>
+                  <ButtonBack />
+                  <ButtonClearCart />
+                  <ButtonNextDynamic />
+                </CartFooter>
+              )}
+            </>
+          }
+        </div>
+      )}
+    </>
+  );
+}
+
+export default function Cart(props: PropsCart) {
+  return (
+    <CartProvider {...props}>
+      <CartComponents footer={props.footer} />
+    </CartProvider>
+  );
+}

package/src/CartAlert.tsx

@@ -0,0 +1,35 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { Alert } from './components';
+import { useCartContext } from './CartProvider';
+
+function CartAlert() {
+  const {
+    alert,
+    classNameBtnClose,
+    setAlert,
+  } = useCartContext();
+  const { icon, message, show, title } = alert;
+  return (
+    <>
+      {show && (
+        <Alert alertType={alert.type}>
+          <h5>
+            {icon && <FontAwesomeIcon icon={icon} />} <strong>{title}</strong> {message}
+          </h5>
+          <button
+            type="button"
+            className={classNameBtnClose}
+            data-bs-dismiss="alert"
+            aria-label="Close"
+            onClick={() => setAlert({...alert, show: false})}
+          >
+            <FontAwesomeIcon icon={faTimes} />
+          </button>
+        </Alert>
+      )}
+    </>
+  );
+}
+
+export default CartAlert;

package/src/CartHeader.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faShoppingCart, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { useCartContext } from './CartProvider';
+
+function CartHeader() {
+  const {
+    classNameCartHeader,
+    classNameBtnClose,
+    onClickClose,
+    toggleCartModal,
+  } = useCartContext();
+  return (
+    <div className={classNameCartHeader}>
+      <h5><FontAwesomeIcon icon={faShoppingCart} />{' '}Shopping cart</h5>
+      <button
+        type="button"
+        className={classNameBtnClose}
+        aria-label="Close"
+        onClick={onClickClose || toggleCartModal}
+      >
+        <FontAwesomeIcon icon={faTimes} />
+      </button>
+    </div>
+  );
+}
+
+export default CartHeader;