@commercelayer/react-components 4.0.0-alpha.3 → 4.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.4",
   "description": "The Official Commerce Layer React Components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
@@ -47,9 +47,9 @@
       "require": "./lib/cjs/components/payment_methods/*.js",
       "import": "./lib/esm/components/payment_methods/*.js"
     },
-    "./payment_sources/*": {
-      "require": "./lib/cjs/components/payment_sources/*.js",
-      "import": "./lib/esm/components/payment_sources/*.js"
+    "./payment_source/*": {
+      "require": "./lib/cjs/components/payment_source/*.js",
+      "import": "./lib/esm/components/payment_source/*.js"
     },
     "./prices/*": {
       "require": "./lib/cjs/components/prices/*.js",
@@ -98,8 +98,8 @@
       "payment_methods/*": [
         "lib/esm/components/payment_methods/*.d.ts"
       ],
-      "payment_sources/*": [
-        "lib/esm/components/payment_sources/*.d.ts"
+      "payment_source/*": [
+        "lib/esm/components/payment_source/*.d.ts"
       ],
       "prices/*": [
         "lib/esm/components/prices/*.d.ts"
@@ -114,7 +114,7 @@
         "lib/esm/components/skus/*.d.ts"
       ],
       "stock_transfers/*": [
-        "lib/esm/components/skus/*.d.ts"
+        "lib/esm/components/stock_transfers/*.d.ts"
       ]
     }
   },
@@ -161,10 +161,10 @@
     "@adyen/adyen-web": "^5.18.0",
     "@commercelayer/sdk": "^4.15.0",
     "@stripe/react-stripe-js": "^1.9.0",
-    "@stripe/stripe-js": "^1.32.0",
+    "@stripe/stripe-js": "^1.33.0",
     "axios": "^0.27.2",
-    "braintree-web": "^3.85.3",
-    "frames-react": "^1.0.11",
+    "braintree-web": "^3.85.5",
+    "frames-react": "^1.0.12",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
@@ -173,11 +173,11 @@
     "react-window": "^1.8.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
+    "@babel/core": "^7.18.10",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-flow": "^7.18.6",
-    "@babel/plugin-transform-react-jsx": "^7.18.6",
-    "@babel/preset-env": "^7.18.9",
+    "@babel/plugin-transform-react-jsx": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@commercelayer/js-auth": "^2.3.0",
@@ -193,41 +193,41 @@
     "@tailwindcss/line-clamp": "^0.4.0",
     "@tailwindcss/typography": "^0.5.4",
     "@types/braintree-web": "^3.75.20",
-    "@types/jest": "^29.0.0",
+    "@types/jest": "^27.5.2",
     "@types/lodash": "^4.14.182",
-    "@types/node": "^18.7.16",
+    "@types/node": "^17.0.45",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^18.0.18",
+    "@types/react": "^17.0.47",
     "@types/react-table": "^7.7.12",
-    "@types/react-test-renderer": "^18.0.0",
+    "@types/react-test-renderer": "^17.0.2",
     "@types/react-window": "^1.8.5",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
     "@zerollup/ts-transform-paths": "^1.7.18",
-    "autoprefixer": "^10.4.7",
-    "babel-jest": "^29.0.2",
+    "autoprefixer": "^10.4.8",
+    "babel-jest": "^28.1.3",
     "babel-loader": "^8.2.5",
     "babel-plugin-istanbul": "^6.1.1",
     "dotenv": "^16.0.1",
-    "eslint": "^8.20.0",
+    "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.0.2",
+    "jest": "^28.1.3",
     "minimize-js": "^1.3.0",
     "next": "^12.2.2",
     "nyc": "^15.1.0",
     "playwright": "^1.23.4",
     "postcss": "^8.4.14",
-    "postcss-loader": "^7.0.1",
+    "postcss-loader": "^6.2.1",
     "prettier": "^2.7.1",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
     "semantic-release": "^19.0.3",
-    "tailwindcss": "^3.1.6",
+    "tailwindcss": "^3.1.8",
     "ts-jest": "^28.0.7",
     "ts-loader": "^9.3.1",
     "tsc-alias": "^1.7.0",

package/lib/cjs/components/payment_sources/PaymentSource.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaymentSource=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),PaymentMethodChildrenContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodChildrenContext")),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),CustomerContext_1=tslib_1.__importDefault(require("../../context/CustomerContext")),PaymentGateway_1=tslib_1.__importDefault(require("../payment_gateways/PaymentGateway")),getCardDetails_1=tslib_1.__importDefault(require("../../utils/getCardDetails")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext"));function PaymentSource(props){const{readonly}=props,{payment}=(0,react_1.useContext)(PaymentMethodChildrenContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default),{payments}=(0,react_1.useContext)(CustomerContext_1.default),{currentPaymentMethodId,paymentSource,destroyPaymentSource}=(0,react_1.useContext)(PaymentMethodContext_1.default),[show,setShow]=(0,react_1.useState)(!1),[showCard,setShowCard]=(0,react_1.useState)(!1);(0,react_1.useEffect)(()=>(readonly?(setShow(!0),setShowCard(!0)):payment?.id===currentPaymentMethodId?(setShow(!0),(0,getCardDetails_1.default)({paymentType:payment?.payment_source_type,customerPayment:{payment_source:paymentSource}}).brand&&setShowCard(!0)):setShow(!1),()=>{setShow(!1),setShowCard(!1)}),[currentPaymentMethodId,paymentSource,payments,payment,readonly,order]);const gatewayProps={...props,show,showCard,handleEditClick:async e=>{if(e.stopPropagation(),paymentSource){const paymentSourceId=paymentSource?.id;await destroyPaymentSource({paymentSourceId,paymentResource:payment?.payment_source_type})}setShowCard(!showCard),setShow(!0)},readonly};return(0,jsx_runtime_1.jsx)(PaymentGateway_1.default,{...gatewayProps})}exports.PaymentSource=PaymentSource,exports.default=PaymentSource;

package/lib/cjs/components/payment_sources/PaymentSourceBrandIcon.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaymentSourceBrandIcon=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),PaymentSourceContext_1=tslib_1.__importDefault(require("../../context/PaymentSourceContext")),react_1=require("react"),Parent_1=tslib_1.__importDefault(require("../utils/Parent"));function PaymentSourceBrandIcon({src,width=32,children,...p}){const{brand}=(0,react_1.useContext)(PaymentSourceContext_1.default),ref=(0,react_1.useRef)(null),defaultSrc="//data.commercelayer.app/assets/images/icons/credit-cards/color/credit-card.svg",url=src||`//data.commercelayer.app/assets/images/icons/credit-cards/color/${brand}.svg`,handleError=()=>{ref.current&&(ref.current.src=defaultSrc)},parentProps={brand,defaultSrc,url,width,...p};return children?(0,jsx_runtime_1.jsx)(Parent_1.default,{...parentProps,children}):(0,jsx_runtime_1.jsx)("img",{ref,src:url,onError:handleError,width,...p})}exports.PaymentSourceBrandIcon=PaymentSourceBrandIcon,exports.default=PaymentSourceBrandIcon;

package/lib/cjs/components/payment_sources/PaymentSourceBrandName.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaymentSourceBrandName=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),PaymentSourceContext_1=tslib_1.__importDefault(require("../../context/PaymentSourceContext")),lodash_1=require("lodash"),react_1=require("react"),Parent_1=tslib_1.__importDefault(require("../utils/Parent"));function PaymentSourceBrandName({children,label,...props}){const{brand}=(0,react_1.useContext)(PaymentSourceContext_1.default),brandName=brand&&(0,lodash_1.capitalize)(brand.replace("-"," ")),parentProps={brand:brandName,label,...props};return children?(0,jsx_runtime_1.jsx)(Parent_1.default,{...parentProps,children}):(0,jsx_runtime_1.jsx)("span",{...props,children:label||(0,lodash_1.capitalize)(brandName)})}exports.PaymentSourceBrandName=PaymentSourceBrandName,exports.default=PaymentSourceBrandName;

package/lib/cjs/components/payment_sources/PaymentSourceDetail.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaymentSourceDetail=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),PaymentSourceContext_1=tslib_1.__importDefault(require("../../context/PaymentSourceContext")),lodash_1=require("lodash"),react_1=require("react"),Parent_1=tslib_1.__importDefault(require("../utils/Parent"));function PaymentSourceDetail({type,children,...p}){const card=(0,react_1.useContext)(PaymentSourceContext_1.default),text=(0,lodash_1.has)(card,type)?card[type]:type==="last4"?"****":"**",parentProps={type,text,...p};return children?(0,jsx_runtime_1.jsx)(Parent_1.default,{...parentProps,children}):(0,jsx_runtime_1.jsx)("span",{...p,children:text})}exports.PaymentSourceDetail=PaymentSourceDetail,exports.default=PaymentSourceDetail;

package/lib/cjs/components/payment_sources/PaymentSourceEditButton.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaymentSourceEditButton=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),PaymentSourceContext_1=tslib_1.__importDefault(require("../../context/PaymentSourceContext")),react_1=require("react"),Parent_1=tslib_1.__importDefault(require("../utils/Parent"));function PaymentSourceEditButton({children,label="Edit",...props}){const{showCard,handleEditClick,readonly}=(0,react_1.useContext)(PaymentSourceContext_1.default),parentProps={showCard,label,handleEditClick,...props};return children?(0,jsx_runtime_1.jsx)(Parent_1.default,{...parentProps,children}):readonly?null:(0,jsx_runtime_1.jsx)("button",{...props,onClick:handleEditClick,children:label})}exports.PaymentSourceEditButton=PaymentSourceEditButton,exports.default=PaymentSourceEditButton;

package/lib/esm/components/payment_sources/PaymentSource.js

@@ -1 +0,0 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useState,useEffect}from"react";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import PaymentMethodContext from"../../context/PaymentMethodContext";import CustomerContext from"../../context/CustomerContext";import PaymentGateway from"../payment_gateways/PaymentGateway";import getCardDetails from"../../utils/getCardDetails";import OrderContext from"../../context/OrderContext";export function PaymentSource(props){const{readonly}=props,{payment}=useContext(PaymentMethodChildrenContext),{order}=useContext(OrderContext),{payments}=useContext(CustomerContext),{currentPaymentMethodId,paymentSource,destroyPaymentSource}=useContext(PaymentMethodContext),[show,setShow]=useState(!1),[showCard,setShowCard]=useState(!1);useEffect(()=>(readonly?(setShow(!0),setShowCard(!0)):payment?.id===currentPaymentMethodId?(setShow(!0),getCardDetails({paymentType:payment?.payment_source_type,customerPayment:{payment_source:paymentSource}}).brand&&setShowCard(!0)):setShow(!1),()=>{setShow(!1),setShowCard(!1)}),[currentPaymentMethodId,paymentSource,payments,payment,readonly,order]);const gatewayProps={...props,show,showCard,handleEditClick:async e=>{if(e.stopPropagation(),paymentSource){const paymentSourceId=paymentSource?.id;await destroyPaymentSource({paymentSourceId,paymentResource:payment?.payment_source_type})}setShowCard(!showCard),setShow(!0)},readonly};return _jsx(PaymentGateway,{...gatewayProps})}export default PaymentSource;

package/lib/esm/components/payment_sources/PaymentSourceBrandIcon.js

@@ -1 +0,0 @@
-import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import{useContext,useRef}from"react";import Parent from"../utils/Parent";export function PaymentSourceBrandIcon({src,width=32,children,...p}){const{brand}=useContext(PaymentSourceContext),ref=useRef(null),defaultSrc="//data.commercelayer.app/assets/images/icons/credit-cards/color/credit-card.svg",url=src||`//data.commercelayer.app/assets/images/icons/credit-cards/color/${brand}.svg`,handleError=()=>{ref.current&&(ref.current.src=defaultSrc)},parentProps={brand,defaultSrc,url,width,...p};return children?_jsx(Parent,{...parentProps,children}):_jsx("img",{ref,src:url,onError:handleError,width,...p})}export default PaymentSourceBrandIcon;

package/lib/esm/components/payment_sources/PaymentSourceBrandName.js

@@ -1 +0,0 @@
-import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import{capitalize}from"lodash";import{useContext}from"react";import Parent from"../utils/Parent";export function PaymentSourceBrandName({children,label,...props}){const{brand}=useContext(PaymentSourceContext),brandName=brand&&capitalize(brand.replace("-"," ")),parentProps={brand:brandName,label,...props};return children?_jsx(Parent,{...parentProps,children}):_jsx("span",{...props,children:label||capitalize(brandName)})}export default PaymentSourceBrandName;

package/lib/esm/components/payment_sources/PaymentSourceDetail.js

@@ -1 +0,0 @@
-import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import{has}from"lodash";import{useContext}from"react";import Parent from"../utils/Parent";export function PaymentSourceDetail({type,children,...p}){const card=useContext(PaymentSourceContext),text=has(card,type)?card[type]:type==="last4"?"****":"**",parentProps={type,text,...p};return children?_jsx(Parent,{...parentProps,children}):_jsx("span",{...p,children:text})}export default PaymentSourceDetail;

package/lib/esm/components/payment_sources/PaymentSourceEditButton.js

@@ -1 +0,0 @@
-import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import{useContext}from"react";import Parent from"../utils/Parent";export function PaymentSourceEditButton({children,label="Edit",...props}){const{showCard,handleEditClick,readonly}=useContext(PaymentSourceContext),parentProps={showCard,label,handleEditClick,...props};return children?_jsx(Parent,{...parentProps,children}):readonly?null:_jsx("button",{...props,onClick:handleEditClick,children:label})}export default PaymentSourceEditButton;