@thecb/components 5.0.0 → 5.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.0.0",
+  "version": "5.2.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -85,6 +85,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.1.0"
+    "redux-freeform": "^5.2.0"
   }
 }

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -124,7 +124,7 @@ const ButtonWithAction = ({
       activeStyles={activeStyles}
       disabledStyles={disabledStyles}
       as="button"
-      onClick={!isLoading && action}
+      onClick={isLoading ? undefined : action}
       borderRadius="2px"
       theme={themeContext}
       extraStyles={`margin: 0.5rem; ${extraStyles}`}

package/src/components/atoms/dropdown/DropdownIcon.js

@@ -11,15 +11,10 @@ const DropdownIcon = () => (
     width="12"
   >
     <g transform="translate(1 1)">
-      <g fillRule="evenodd" fill="none" id="Symbols_1548197283918">
-        <g
-          fill="#333"
-          transform="translate(-155 -22)"
-          id="Dropdown/Closed_1548197283918"
-        >
+      <g fillRule="evenodd" fill="none">
+        <g fill="#333" transform="translate(-155 -22)">
           <polygon
             points="165.59 22.59 161 27.17 156.41 22.59 155 24 161 30 167 24"
-            id="Path_1548197283918"
             vectorEffect="non-scaling-stroke"
           />
         </g>

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

@@ -0,0 +1,21 @@
+import React from "react";
+
+const CashIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="36"
+      height="24"
+      fill="none"
+      viewBox="0 0 36 24"
+    >
+      <rect width="36" height="24" fill="#E8FFEF" rx="1"></rect>
+      <path
+        fill="#317D4F"
+        d="M17.178 5.464v1.372c-1.799.294-3.115 1.407-3.094 3.08.021 1.645 1.05 2.597 2.611 2.884l1.617.308c.924.182 1.365.406 1.365 1.085 0 .609-.553 1.092-1.484 1.092-1.036 0-1.743-.455-1.932-1.267l-2.478.021c.175 1.834 1.414 2.8 3.374 3.038v1.197h2.023V17.07c1.876-.266 3.024-1.33 3.024-2.877 0-1.617-.798-2.751-2.702-3.178l-1.603-.357c-.994-.231-1.267-.497-1.267-1.029 0-.546.511-1.015 1.596-1.015 1.015 0 1.302.511 1.393 1.267l2.415-.014c.05-1.484-1.043-2.695-2.835-3.024V5.464h-2.023z"
+      ></path>
+    </svg>
+  );
+};
+
+export default CashIcon;

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

@@ -54,6 +54,7 @@ import ResetPasswordIcon from "./ResetPasswordIcon";
 import PeriscopeFailedIcon from "./PeriscopeFailedIcon";
 import CheckIcon from "./CheckIcon";
 import WarningIconXS from "./WarningIconXS";
+import CashIcon from "./CashIcon";
 
 export {
   AccountsIcon,
@@ -111,5 +112,6 @@ export {
   ResetPasswordIcon,
   PeriscopeFailedIcon,
   CheckIcon,
-  WarningIconXS
+  WarningIconXS,
+  CashIcon
 };

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

@@ -4,7 +4,8 @@ import {
   required,
   hasLength,
   matchesRegex,
-  dateAfterToday
+  dateAfterToday,
+  isValidMonth
 } from "redux-freeform";
 import Checkbox from "../../atoms/checkbox";
 import CountryDropdown from "../../atoms/country-dropdown";
@@ -71,6 +72,7 @@ const PaymentFormCard = ({
   const expirationDateErrors = {
     [required.error]: "Expiration date is required",
     [hasLength.error]: "Expiration date is invalid",
+    [isValidMonth.error]: "Expiration month is invalid",
     [dateAfterToday.error]: "Expiration date is invalid"
   };
   const cvvErrors = {

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

@@ -5,7 +5,8 @@ import {
   hasLength,
   matchesRegex,
   validateWhen,
-  dateAfterToday
+  dateAfterToday,
+  isValidMonth
 } 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.
@@ -26,6 +27,7 @@ const formConfig = {
     validators: [
       required(),
       hasLength(4, 4),
+      isValidMonth(0),
       dateAfterToday("MMYY", "month", true)
     ],
     constraints: [onlyIntegers(), hasLength(0, 4)]