@thecb/components 6.1.4 → 6.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.1.4",
+  "version": "6.1.5",
   "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/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)],

package/src/components/molecules/periscope-dashboard-iframe/PeriscopeDashboardIframe.js

@@ -41,8 +41,7 @@ const PeriscopeDashboardIframe = ({
   periscopeDataSuccess,
   periscopeDataFailure,
   periscopeDataRequestSuccess,
-  periscopeDataRequestFailure,
-  timerMS = 20000
+  periscopeDataRequestFailure
 }) => {
   const [height, setHeight] = useState(0);
   let time = { timer: null };
@@ -52,7 +51,7 @@ const PeriscopeDashboardIframe = ({
       if (!periscopeDataSuccess) {
         periscopeDataRequestFailure();
       }
-    }, timerMS);
+    }, 10000);
     return () => clearTimeout(time.timer);
   }, [periscopeDataSuccess]);