@arcteryx/components-cart - npm Package Compare versions

Comparing version 1.1.4 to 1.1.5-alpha.4

dist/cjs/index.js

@@ -13,2 +13,3 @@ 'use strict';
 var componentsContexts = require('@arcteryx/components-contexts');
+var reactI18next = require('react-i18next');
 
@@ -608,9 +609,13 @@ function _extends() {
       isSidebar = _ref.isSidebar;
+
+  var _useTranslation = reactI18next.useTranslation(),
+      t = _useTranslation.t;
+
   return React__default.createElement(Header, {
     isNarrow: isNarrow
-  }, isSidebar || isFlyIn ? React__default.createElement(H2, null, "My Cart ", React__default.createElement("span", {
+  }, isSidebar || isFlyIn ? React__default.createElement(H2, null, t("My Cart"), " ", React__default.createElement("span", {
     className: "qa-total-items"
-  }, "(", cart.totalItems, " Item)")) : React__default.createElement(H1, null, "My Cart ", React__default.createElement("span", {
+  }, "(", cart.totalItems, " ", t("Item"), ")")) : React__default.createElement(H1, null, t("My Cart"), " ", React__default.createElement("span", {
     className: "qa-total-items"
-  }, "(", cart.totalItems, " Item)")), React__default.createElement(H4, null, "Quantity"), React__default.createElement(H4, null, "Price"), React__default.createElement(H4, null, "remove"));
+  }, "(", cart.totalItems, " ", t("Item"), ")")), React__default.createElement(H4, null, t("Quantity")), React__default.createElement(H4, null, t("Price")), React__default.createElement(H4, null, t("Remove")));
 };
@@ -681,9 +686,13 @@
       cta = _ref.cta;
+
+  var _useTranslation = reactI18next.useTranslation(),
+      t = _useTranslation.t;
+
   return React__default.createElement(Totals, {
     isNarrow: isNarrow
-  }, React__default.createElement(CartLine, null, React__default.createElement(P$1, null, "Item Total:"), React__default.createElement(StyledPrice$1, {
+  }, React__default.createElement(CartLine, null, React__default.createElement(P$1, null, t("Item Total"), ":"), React__default.createElement(StyledPrice$1, {
     className: "qa-cart-item-total",
     price: cart.itemTotalPrice.value,
     currency: cart.itemTotalPrice.currency
-  })), React__default.createElement(CartLine, null, React__default.createElement(P$1, null, "Express Shipping:"), React__default.createElement(Red, null, "FREE")), React__default.createElement(CartLine, null, React__default.createElement(P$1, null, "Subtotal:"), React__default.createElement(StyledPrice$1, {
+  })), React__default.createElement(CartLine, null, React__default.createElement(P$1, null, t("Express Shipping"), ":"), React__default.createElement(Red, null, t("FREE"))), React__default.createElement(CartLine, null, React__default.createElement(P$1, null, t("Subtotal"), ":"), React__default.createElement(StyledPrice$1, {
     className: "qa-cart-total",
@@ -690,0 +699,0 @@ price: cart.totalPrice.value,

dist/es/index.js

@@ -5,2 +5,3 @@ import React, { useContext } from 'react';
 import { SiteContext } from '@arcteryx/components-contexts';
+import { useTranslation } from 'react-i18next';
 
@@ -600,9 +601,13 @@ function _extends() {
       isSidebar = _ref.isSidebar;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(Header, {
     isNarrow: isNarrow
-  }, isSidebar || isFlyIn ? React.createElement(H2, null, "My Cart ", React.createElement("span", {
+  }, isSidebar || isFlyIn ? React.createElement(H2, null, t("My Cart"), " ", React.createElement("span", {
     className: "qa-total-items"
-  }, "(", cart.totalItems, " Item)")) : React.createElement(H1, null, "My Cart ", React.createElement("span", {
+  }, "(", cart.totalItems, " ", t("Item"), ")")) : React.createElement(H1, null, t("My Cart"), " ", React.createElement("span", {
     className: "qa-total-items"
-  }, "(", cart.totalItems, " Item)")), React.createElement(H4, null, "Quantity"), React.createElement(H4, null, "Price"), React.createElement(H4, null, "remove"));
+  }, "(", cart.totalItems, " ", t("Item"), ")")), React.createElement(H4, null, t("Quantity")), React.createElement(H4, null, t("Price")), React.createElement(H4, null, t("Remove")));
 };
@@ -673,9 +678,13 @@
       cta = _ref.cta;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
   return React.createElement(Totals, {
     isNarrow: isNarrow
-  }, React.createElement(CartLine, null, React.createElement(P$1, null, "Item Total:"), React.createElement(StyledPrice$1, {
+  }, React.createElement(CartLine, null, React.createElement(P$1, null, t("Item Total"), ":"), React.createElement(StyledPrice$1, {
     className: "qa-cart-item-total",
     price: cart.itemTotalPrice.value,
     currency: cart.itemTotalPrice.currency
-  })), React.createElement(CartLine, null, React.createElement(P$1, null, "Express Shipping:"), React.createElement(Red, null, "FREE")), React.createElement(CartLine, null, React.createElement(P$1, null, "Subtotal:"), React.createElement(StyledPrice$1, {
+  })), React.createElement(CartLine, null, React.createElement(P$1, null, t("Express Shipping"), ":"), React.createElement(Red, null, t("FREE"))), React.createElement(CartLine, null, React.createElement(P$1, null, t("Subtotal"), ":"), React.createElement(StyledPrice$1, {
     className: "qa-cart-total",
@@ -682,0 +691,0 @@ price: cart.totalPrice.value,

dist/umd/index.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('prop-types'), require('@arcteryx/components-contexts')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'prop-types', '@arcteryx/components-contexts'], factory) :
-  (factory((global.ARCTERYX = {}),global.React,global.styled,global.PropTypes,global.componentsContexts));
-}(this, (function (exports,React,styled,PropTypes,componentsContexts) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('prop-types'), require('@arcteryx/components-contexts'), require('react-i18next')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'prop-types', '@arcteryx/components-contexts', 'react-i18next'], factory) :
+  (factory((global.ARCTERYX = {}),global.React,global.styled,global.PropTypes,global.componentsContexts,global.reactI18next));
+}(this, (function (exports,React,styled,PropTypes,componentsContexts,reactI18next) { 'use strict';
 
@@ -604,9 +604,13 @@ var React__default = 'default' in React ? React['default'] : React;
         isSidebar = _ref.isSidebar;
+
+    var _useTranslation = reactI18next.useTranslation(),
+        t = _useTranslation.t;
+
     return React__default.createElement(Header, {
       isNarrow: isNarrow
-    }, isSidebar || isFlyIn ? React__default.createElement(H2, null, "My Cart ", React__default.createElement("span", {
+    }, isSidebar || isFlyIn ? React__default.createElement(H2, null, t("My Cart"), " ", React__default.createElement("span", {
       className: "qa-total-items"
-    }, "(", cart.totalItems, " Item)")) : React__default.createElement(H1, null, "My Cart ", React__default.createElement("span", {
+    }, "(", cart.totalItems, " ", t("Item"), ")")) : React__default.createElement(H1, null, t("My Cart"), " ", React__default.createElement("span", {
       className: "qa-total-items"
-    }, "(", cart.totalItems, " Item)")), React__default.createElement(H4, null, "Quantity"), React__default.createElement(H4, null, "Price"), React__default.createElement(H4, null, "remove"));
+    }, "(", cart.totalItems, " ", t("Item"), ")")), React__default.createElement(H4, null, t("Quantity")), React__default.createElement(H4, null, t("Price")), React__default.createElement(H4, null, t("Remove")));
   };
@@ -677,9 +681,13 @@
         cta = _ref.cta;
+
+    var _useTranslation = reactI18next.useTranslation(),
+        t = _useTranslation.t;
+
     return React__default.createElement(Totals, {
       isNarrow: isNarrow
-    }, React__default.createElement(CartLine, null, React__default.createElement(P$1, null, "Item Total:"), React__default.createElement(StyledPrice$1, {
+    }, React__default.createElement(CartLine, null, React__default.createElement(P$1, null, t("Item Total"), ":"), React__default.createElement(StyledPrice$1, {
       className: "qa-cart-item-total",
       price: cart.itemTotalPrice.value,
       currency: cart.itemTotalPrice.currency
-    })), React__default.createElement(CartLine, null, React__default.createElement(P$1, null, "Express Shipping:"), React__default.createElement(Red, null, "FREE")), React__default.createElement(CartLine, null, React__default.createElement(P$1, null, "Subtotal:"), React__default.createElement(StyledPrice$1, {
+    })), React__default.createElement(CartLine, null, React__default.createElement(P$1, null, t("Express Shipping"), ":"), React__default.createElement(Red, null, t("FREE"))), React__default.createElement(CartLine, null, React__default.createElement(P$1, null, t("Subtotal"), ":"), React__default.createElement(StyledPrice$1, {
       className: "qa-cart-total",
@@ -686,0 +694,0 @@ price: cart.totalPrice.value,

package.json

 {
   "name": "@arcteryx/components-cart",
-  "version": "1.1.4",
+  "version": "1.1.5-alpha.4+66c996f",
   "description": "Arcteryx Cart",
@@ -18,3 +18,3 @@ "source": "src/index.js",
   "license": "ISC",
-  "gitHead": "7638a435dfac5b30a4fa5199ee21a9a3f4bc0657",
+  "gitHead": "66c996ff33fbd481bc156dbe1f510aa78c5c6c34",
   "peerDependencies": {
@@ -25,4 +25,7 @@ "@arcteryx/components-contexts": "^1.1.0"
     "@arcteryx/components-button": "^1.27.13",
-    "@arcteryx/components-price": "^1.0.3"
+    "@arcteryx/components-price": "^1.0.3",
+    "@arcteryx/js-cms": "^1.27.13",
+    "i18next": "^19.3.2",
+    "i18next-fetch-backend": "^2.2.0"
   }
 }

src/Cart.stories.js

@@ -1,2 +0,2 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { CartItem, CartShell } from "./index.js";
@@ -6,3 +6,3 @@ import styled from "styled-components";
 import { Button } from "@arcteryx/components-button";
-import { SiteContextProvider } from "@arcteryx/components-contexts";
+import { useTranslation } from "react-i18next";
 
@@ -18,3 +18,3 @@ const label = "Add Product to Cart";
       value: 800.0,
-      currency: "CAD",
+      currency: "USD",
     },
@@ -36,7 +36,7 @@ size: "M",
     value: 800.0,
-    currency: "CAD",
+    currency: "USD",
   },
   itemTotalPrice: {
     value: 800.0,
-    currency: "CAD",
+    currency: "USD",
   },
@@ -54,3 +54,3 @@ items: [
         value: 1000,
-        currency: "CAD",
+        currency: "USD",
       },
@@ -71,3 +71,3 @@ size: "M",
         value: 170.0,
-        currency: "CAD",
+        currency: "USD",
       },
@@ -88,3 +88,3 @@ size: "36",
         value: 170.0,
-        currency: "CAD",
+        currency: "USD",
       },
@@ -105,3 +105,3 @@ size: "36",
         value: 1300.0,
-        currency: "CAD",
+        currency: "USD",
       },
@@ -143,15 +143,13 @@ size: "REG",
   return (
-    <SiteContextProvider country="ca" language="en">
-      <CartItem
-        key={i}
-        product={prod}
-        canEdit={canEdit}
-        isSidebar={isSidebar}
-        isFlyIn={isFlyIn}
-        handleIncrement={() => setProduct({ ...prod, quantity: prod.quantity + 1 })}
-        handleDecrement={() => setProduct({ ...prod, quantity: prod.quantity - 1 })}
-        handleChange={val => setProduct({ ...prod, quantity: val })}
-        handleRemove={() => setProduct(null)}
-      />
-    </SiteContextProvider>
+    <CartItem
+      key={i}
+      product={prod}
+      canEdit={canEdit}
+      isSidebar={isSidebar}
+      isFlyIn={isFlyIn}
+      handleIncrement={() => setProduct({ ...prod, quantity: prod.quantity + 1 })}
+      handleDecrement={() => setProduct({ ...prod, quantity: prod.quantity - 1 })}
+      handleChange={val => setProduct({ ...prod, quantity: val })}
+      handleRemove={() => setProduct(null)}
+    />
   );
@@ -161,12 +159,11 @@ };
 export const FlyInCart = () => {
+  const { t } = useTranslation();
   return (
-    <SiteContextProvider country="ca" language="en">
-      <Wrap width="375px" height="100vh" center noborder nopadding>
-        <CartShell isFlyIn cart={cart} cta={<Button context="Secure-Checkout">Secure Checkout</Button>}>
-          {cart.items.map((product, i) => (
-            <Item key={i} isFlyIn product={product} canEdit isFlyIn />
-          ))}
-        </CartShell>
-      </Wrap>
-    </SiteContextProvider>
+    <Wrap width="375px" height="100vh" center noborder nopadding>
+      <CartShell isFlyIn cart={cart} cta={<Button context="Secure-Checkout">{t("Secure Checkout")}</Button>}>
+        {cart.items.map((product, i) => (
+          <Item key={i} isFlyIn product={product} canEdit isFlyIn />
+        ))}
+      </CartShell>
+    </Wrap>
   );
@@ -177,12 +174,12 @@ };
   const [data, setData] = useState(cart);
+  const { t } = useTranslation();
+
   return (
-    <SiteContextProvider country="ca" language="en">
-      <Wrap width="930px" center noborder>
-        <CartShell cart={data} cta={<Button context="Secure-Checkout">Secure Checkout</Button>}>
-          {data.items.map((product, i) => (
-            <Item key={i} product={product} canEdit />
-          ))}
-        </CartShell>
-      </Wrap>
-    </SiteContextProvider>
+    <Wrap width="930px" center noborder>
+      <CartShell cart={data} cta={<Button context="Secure-Checkout">{t("Secure Checkout")}</Button>}>
+        {data.items.map((product, i) => (
+          <Item key={i} product={product} canEdit />
+        ))}
+      </CartShell>
+    </Wrap>
   );
@@ -194,12 +191,10 @@ };
   return (
-    <SiteContextProvider country="ca" language="en">
-      <Wrap width="370px" center noborder>
-        <CartShell cart={data} isSidebar>
-          {data.items.map((product, i) => (
-            <Item key={i} product={product} canEdit={false} isSidebar />
-          ))}
-        </CartShell>
-      </Wrap>
-    </SiteContextProvider>
+    <Wrap width="370px" center noborder>
+      <CartShell cart={data} isSidebar>
+        {data.items.map((product, i) => (
+          <Item key={i} product={product} canEdit={false} isSidebar />
+        ))}
+      </CartShell>
+    </Wrap>
   );
 };

src/components/Cart/CartDetails.js

 import React from "react";
 import styled from "styled-components";
 import Price from "@arcteryx/components-price";
+import { useTranslation } from "react-i18next";
 
@@ -37,24 +38,28 @@ const Totals = styled.div`
 
-const CartDetails = ({ cart, isNarrow, cta }) => (
-  <Totals isNarrow={isNarrow}>
-    <CartLine>
-      <P>Item Total:</P>
-      <StyledPrice
-        className="qa-cart-item-total"
-        price={cart.itemTotalPrice.value}
-        currency={cart.itemTotalPrice.currency}
-      />
-    </CartLine>
-    <CartLine>
-      <P>Express Shipping:</P>
-      <Red>FREE</Red>
-    </CartLine>
-    <CartLine>
-      <P>Subtotal:</P>
-      <StyledPrice className="qa-cart-total" price={cart.totalPrice.value} currency={cart.totalPrice.currency} />
-    </CartLine>
-    {cta}
-  </Totals>
-);
+const CartDetails = ({ cart, isNarrow, cta }) => {
+  const { t } = useTranslation();
 
+  return (
+    <Totals isNarrow={isNarrow}>
+      <CartLine>
+        <P>{t("Item Total")}:</P>
+        <StyledPrice
+          className="qa-cart-item-total"
+          price={cart.itemTotalPrice.value}
+          currency={cart.itemTotalPrice.currency}
+        />
+      </CartLine>
+      <CartLine>
+        <P>{t("Express Shipping")}:</P>
+        <Red>{t("FREE")}</Red>
+      </CartLine>
+      <CartLine>
+        <P>{t("Subtotal")}:</P>
+        <StyledPrice className="qa-cart-total" price={cart.totalPrice.value} currency={cart.totalPrice.currency} />
+      </CartLine>
+      {cta}
+    </Totals>
+  );
+};
+
 export default CartDetails;

src/components/Cart/CartHeader.js

 import React from "react";
 import styled from "styled-components";
 import { H2, H1, H4 } from "@arcteryx/components-typography";
+import { useTranslation } from "react-i18next";
 
@@ -31,19 +32,29 @@ const Header = styled.div`
 
-const CartHeader = ({ cart, isNarrow, isFlyIn, isSidebar }) => (
-  <Header isNarrow={isNarrow}>
-    {isSidebar || isFlyIn ? (
-      <H2>
-        My Cart <span className="qa-total-items">({cart.totalItems} Item)</span>
-      </H2>
-    ) : (
-      <H1>
-        My Cart <span className="qa-total-items">({cart.totalItems} Item)</span>
-      </H1>
-    )}
-    <H4>Quantity</H4>
-    <H4>Price</H4>
-    <H4>remove</H4>
-  </Header>
-);
+const CartHeader = ({ cart, isNarrow, isFlyIn, isSidebar }) => {
+  const { t } = useTranslation();
 
+  return (
+    <Header isNarrow={isNarrow}>
+      {isSidebar || isFlyIn ? (
+        <H2>
+          {t("My Cart")}{" "}
+          <span className="qa-total-items">
+            ({cart.totalItems} {t("Item")})
+          </span>
+        </H2>
+      ) : (
+        <H1>
+          {t("My Cart")}{" "}
+          <span className="qa-total-items">
+            ({cart.totalItems} {t("Item")})
+          </span>
+        </H1>
+      )}
+      <H4>{t("Quantity")}</H4>
+      <H4>{t("Price")}</H4>
+      <H4>{t("Remove")}</H4>
+    </Header>
+  );
+};
+
 export default CartHeader;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

385478

increased by1.57%

Lines of code

3497

increased by0.63%

Worsened metrics

Dependency count

6

increased by100%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@arcteryx/js-cms@^1.27.13

• + Addedi18next@^19.3.2

• + Addedi18next-fetch-backend@^2.2.0

• + Added@arcteryx/js-cms@1.27.20(transitive)

• + Added@arcteryx/js-url@1.29.0(transitive)

• + Added@babel/runtime@7.26.0(transitive)

• + Addedi18next@19.9.2(transitive)

• + Addedi18next-fetch-backend@2.3.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)