@thecb/components 6.1.4 → 6.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.1.4",
+  "version": "6.2.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -86,6 +86,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.5.0"
+    "redux-freeform": "^5.6.0"
   }
 }

package/src/components/atoms/form-layouts/FormInput.js

@@ -114,10 +114,17 @@ const FormInput = ({
   customHeight,
   autocomplete,
   extraStyles,
+  removeFromValue, // regex of characters to remove before setting value
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false);
   const { isMobile } = useContext(ThemeContext);
+  const setValue = value => {
+    if (removeFromValue !== undefined) {
+      return fieldActions.set(value.replace(removeFromValue, ""));
+    }
+    return fieldActions.set(value);
+  };
 
   return (
     <Stack childGap="0.25rem">
@@ -199,7 +206,7 @@ const FormInput = ({
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
             }
-            onChange={e => fieldActions.set(e)}
+            onChange={value => setValue(value)}
             type={type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}
@@ -225,7 +232,7 @@ const FormInput = ({
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
             }
-            onChange={e => fieldActions.set(e.target.value)}
+            onChange={e => setValue(e.target.value)}
             type={type === "password" && showPassword ? "text" : type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}

package/src/components/atoms/icons/ExternalLinkicon.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+const ExternalLinkIcon = ({ linkColor, text }) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.86092 1.59483C1.92074 1.56953 1.98651 1.55554 2.05554 1.55554H2.6111H4.94443C5.22057 1.55554 5.44443 1.7794 5.44443 2.05554V2.6111C5.44443 2.88724 5.22057 3.1111 4.94443 3.1111H3.1111V10.8889H10.8889V9.05554C10.8889 8.7794 11.1127 8.55554 11.3889 8.55554H11.9444C12.2206 8.55554 12.4444 8.7794 12.4444 9.05554V11.9444C12.4444 12.2206 12.2206 12.4444 11.9444 12.4444H11.3889C11.3507 12.4444 11.3135 12.4401 11.2778 12.432C11.242 12.4401 11.2048 12.4444 11.1667 12.4444H2.6111H2.05554C1.7794 12.4444 1.55554 12.2206 1.55554 11.9444V11.3889V2.6111V2.05554C1.55554 2.05554 1.55554 2.05554 1.55554 2.05554C1.55554 2.01307 1.56084 1.97183 1.57081 1.93246C1.60944 1.77983 1.71826 1.65517 1.86092 1.59483ZM7.77776 2.05554C7.77776 1.7794 8.00162 1.55554 8.27776 1.55554H11.3889H11.9444C12.2206 1.55554 12.4444 1.7794 12.4444 2.05554V2.6111V5.72221C12.4444 5.99835 12.2206 6.22221 11.9444 6.22221H11.3889C11.1127 6.22221 10.8889 5.99835 10.8889 5.72221V4.26638L6.89793 8.25733C6.70267 8.45259 6.38608 8.45259 6.19082 8.25733L5.79798 7.8645C5.60272 7.66923 5.60272 7.35265 5.79798 7.15739L9.84428 3.1111H8.27776C8.00162 3.1111 7.77776 2.88724 7.77776 2.6111V2.05554Z"
+      fill="#292A33"
+    />
+    <mask
+      id={`mask0_902_435-${text}`}
+      maskUnits="userSpaceOnUse"
+      x="1"
+      y="1"
+      width="12"
+      height="12"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.86092 1.59483C1.92074 1.56953 1.98651 1.55554 2.05554 1.55554H2.6111H4.94443C5.22057 1.55554 5.44443 1.7794 5.44443 2.05554V2.6111C5.44443 2.88724 5.22057 3.1111 4.94443 3.1111H3.1111V10.8889H10.8889V9.05554C10.8889 8.7794 11.1127 8.55554 11.3889 8.55554H11.9444C12.2206 8.55554 12.4444 8.7794 12.4444 9.05554V11.9444C12.4444 12.2206 12.2206 12.4444 11.9444 12.4444H11.3889C11.3507 12.4444 11.3135 12.4401 11.2778 12.432C11.242 12.4401 11.2048 12.4444 11.1667 12.4444H2.6111H2.05554C1.7794 12.4444 1.55554 12.2206 1.55554 11.9444V11.3889V2.6111V2.05554C1.55554 2.05554 1.55554 2.05554 1.55554 2.05554C1.55554 2.01307 1.56084 1.97183 1.57081 1.93246C1.60944 1.77983 1.71826 1.65517 1.86092 1.59483ZM7.77776 2.05554C7.77776 1.7794 8.00162 1.55554 8.27776 1.55554H11.3889H11.9444C12.2206 1.55554 12.4444 1.7794 12.4444 2.05554V2.6111V5.72221C12.4444 5.99835 12.2206 6.22221 11.9444 6.22221H11.3889C11.1127 6.22221 10.8889 5.99835 10.8889 5.72221V4.26638L6.89793 8.25733C6.70267 8.45259 6.38608 8.45259 6.19082 8.25733L5.79798 7.8645C5.60272 7.66923 5.60272 7.35265 5.79798 7.15739L9.84428 3.1111H8.27776C8.00162 3.1111 7.77776 2.88724 7.77776 2.6111V2.05554Z"
+        fill={linkColor}
+      />
+    </mask>
+    <g mask={`url(#mask0_902_435-${text})`}>
+      <rect x="-0.0864258" width="14" height="14" fill="#292A33" />
+    </g>
+  </svg>
+);
+
+export default ExternalLinkIcon;

package/src/components/atoms/icons/index.js

@@ -32,6 +32,7 @@ import ChargebackIcon from "./ChargebackIcon";
 import ChargebackReversalIcon from "./ChargebackReversalIcon";
 import DuplicateIcon from "./DuplicateIcon";
 import ErroredIcon from "./ErroredIcon";
+import ExternalLinkIcon from "./ExternalLinkIcon";
 import FailedIcon from "./FailedIcon";
 import PendingIcon from "./PendingIcon";
 import RefundIcon from "./RefundIcon";
@@ -91,6 +92,7 @@ export {
   ChargebackReversalIcon,
   DuplicateIcon,
   ErroredIcon,
+  ExternalLinkIcon,
   FailedIcon,
   PendingIcon,
   RefundIcon,

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -140,6 +140,7 @@ const PaymentFormCard = ({
             formatter={expirationDateFormat}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             isNum
+            removeFromValue={/\//} // removes "/" from browser autofill
             autocomplete="cc-exp"
           />
           <FormInput

package/src/components/molecules/payment-form-card/PaymentFormCard.state.js

@@ -6,7 +6,8 @@ import {
   matchesRegex,
   validateWhen,
   dateAfterToday,
-  isValidMonth
+  isValidMonth,
+  onlyExpirationDate
 } from "redux-freeform";
 
 //TODO: Will make zip code able to have more than 5 digits once we add in the FormattedInput because it will have issues with format of 60606-1111.
@@ -30,7 +31,7 @@ const formConfig = {
       isValidMonth(0),
       dateAfterToday("MMYY", "month", true)
     ],
-    constraints: [onlyIntegers(), hasLength(0, 4)]
+    constraints: [onlyExpirationDate(), hasLength(0, 4)]
   },
   cvv: {
     validators: [required(), hasLength(3, 4)],