@thecb/components 4.1.10 → 4.1.11-beta.0

package/dist/index.cjs.js

@@ -34265,17 +34265,33 @@ var AddressForm = function AddressForm(_ref) {
 
   var zipErrorMessages = (_zipErrorMessages = {}, _defineProperty(_zipErrorMessages, required.error, "Zip code is required"), _defineProperty(_zipErrorMessages, hasLength.error, "Zip code must be 5 or 9 digits"), _zipErrorMessages);
 
-  var stateProvinceErrorMessages = _defineProperty({}, required.error, "State or Province is required"); // const countryErrorMessages = {
-  //   [required.error]: "Country is required"
-  // };
+  var stateProvinceErrorMessages = _defineProperty({}, required.error, "State or Province is required");
 
+  var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
 
   var isUS = fields.country.rawValue === "US";
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
     "aria-label": "Address"
-  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
+  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(CountryDropdown, {
+    labelTextWhenNoError: "Country",
+    errorMessages: countryErrorMessages,
+    field: fields.country,
+    onChange: function onChange(value) {
+      actions.fields.country.set(value); // temporary measure to not dirty fields until
+      // we can write a reset function for fields
+
+      if (fields.stateProvince.rawValue) {
+        actions.fields.stateProvince.set("");
+      }
+
+      if (fields.zip.rawValue) {
+        actions.fields.zip.set("");
+      }
+    },
+    showErrors: showErrors
+  }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Address",
     errorMessages: street1ErrorMessages,
     field: fields.street1,
@@ -39327,6 +39343,8 @@ var expirationDateErrors = (_expirationDateErrors = {}, _defineProperty(_expirat
 var cvvErrors = (_cvvErrors = {}, _defineProperty(_cvvErrors, required.error, "CVV is required"), _defineProperty(_cvvErrors, hasLength.error, "CVV is invalid"), _cvvErrors);
 var zipCodeErrors = (_zipCodeErrors = {}, _defineProperty(_zipCodeErrors, required.error, "Zip code is required"), _defineProperty(_zipCodeErrors, hasLength.error, "Zip code is invalid"), _zipCodeErrors);
 
+var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
+
 var PaymentFormCard = function PaymentFormCard(_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "default" : _ref$variant,
@@ -39361,11 +39379,25 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       };
     }
   }, []);
+  var isUS = fields.country.rawValue === "US";
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
     "aria-label": "Card payment"
-  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
+  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, !hideZipCode && /*#__PURE__*/React__default.createElement(CountryDropdown, {
+    labelTextWhenNoError: "Country",
+    errorMessages: countryErrorMessages,
+    field: fields.country,
+    onChange: function onChange(value) {
+      actions.fields.country.set(value); // temporary measure to not dirty fields until
+      // we can write a reset function for fields
+
+      if (fields.zipCode.rawValue) {
+        actions.fields.zipCode.set("");
+      }
+    },
+    showErrors: showErrors
+  }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Name on card",
     errorMessages: nameOnCardErrors,
     field: fields.nameOnCard,
@@ -39410,6 +39442,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
+    isNum: isUS,
+    formatter: isUS ? zipFormat : null,
     labelTextWhenNoError: "Zip code",
     errorMessages: zipCodeErrors,
     field: fields.zipCode,
@@ -39439,6 +39473,10 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
 };
 
 var formConfig$7 = {
+  country: {
+    defaultValue: "US",
+    validators: [required()]
+  },
   nameOnCard: {
     validators: [required()]
   },
@@ -39455,8 +39493,8 @@ var formConfig$7 = {
     constraints: [onlyIntegers(), hasLength(0, 4)]
   },
   zipCode: {
-    validators: [required(), hasLength(5, 5)],
-    constraints: [onlyIntegers(), hasLength(0, 5)]
+    validators: [required(), validateWhen(validateWhen(hasLength(5, 5), hasLength(0, 5)), matchesRegex("US"), "country"), validateWhen(validateWhen(hasLength(9, 9), hasLength(6, 9)), matchesRegex("US"), "country")],
+    constraints: [validateWhen(onlyIntegers(), matchesRegex("US"), "country"), validateWhen(hasLength(0, 9), matchesRegex("US"), "country")]
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.1.10",
+  "version": "4.1.11-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/molecules/address-form/AddressForm.js

@@ -3,7 +3,7 @@ import { required, hasLength } from "redux-freeform";
 import styled from "styled-components";
 import StateProvinceDropdown from "../../atoms/state-province-dropdown";
 import Checkbox from "../../atoms/checkbox";
-// import CountryDropdown from "../../atoms/country-dropdown";
+import CountryDropdown from "../../atoms/country-dropdown";
 import { zipFormat } from "../../../util/formats";
 import { noop } from "../../../util/general";
 import {
@@ -51,16 +51,16 @@ const AddressForm = ({
   const stateProvinceErrorMessages = {
     [required.error]: "State or Province is required"
   };
-  // const countryErrorMessages = {
-  //   [required.error]: "Country is required"
-  // };
+  const countryErrorMessages = {
+    [required.error]: "Country is required"
+  };
 
   const isUS = fields.country.rawValue === "US";
 
   return (
     <FormContainer variant={variant} role="form" aria-label="Address">
       <FormInputColumn>
-        {/* <CountryDropdown
+        <CountryDropdown
           labelTextWhenNoError="Country"
           errorMessages={countryErrorMessages}
           field={fields.country}
@@ -76,7 +76,7 @@ const AddressForm = ({
             }
           }}
           showErrors={showErrors}
-        /> */}
+        />
         <FormInput
           labelTextWhenNoError="Address"
           errorMessages={street1ErrorMessages}

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -16,7 +16,8 @@ const PaymentButtonBar = ({
   cancelURL,
   cancelText = "Cancel",
   redirectURL,
-  redirectText = "Return"
+  redirectText = "Return",
+  buttonFlexOverride
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -68,7 +69,13 @@ const PaymentButtonBar = ({
       <SolidDivider />
       <Box padding="2.5rem 0 3.125rem 0">
         <Cluster
-          justify={!!backButton ? "space-between" : "flex-end"}
+          justify={
+            buttonFlexOverride
+              ? buttonFlexOverride
+              : !!backButton
+              ? "space-between"
+              : "flex-end"
+          }
           align="center"
           childGap="0.75rem"
         >

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

@@ -2,8 +2,13 @@ import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { required, hasLength, matchesRegex } from "redux-freeform";
 import Checkbox from "../../atoms/checkbox";
+import CountryDropdown from "../../atoms/country-dropdown";
 import { checkCardBrand, noop } from "../../../util/general";
-import { expirationDateFormat, creditCardFormat } from "../../../util/formats";
+import {
+  expirationDateFormat,
+  creditCardFormat,
+  zipFormat
+} from "../../../util/formats";
 import {
   FormInput,
   FormInputColumn,
@@ -36,6 +41,9 @@ const zipCodeErrors = {
   [required.error]: "Zip code is required",
   [hasLength.error]: "Zip code is invalid"
 };
+const countryErrorMessages = {
+  [required.error]: "Country is required"
+};
 
 const PaymentFormCard = ({
   variant = "default",
@@ -61,9 +69,26 @@ const PaymentFormCard = ({
       return () => actions.form.clear();
     }
   }, []);
+  const isUS = fields.country.rawValue === "US";
   return (
     <FormContainer variant={variant} role="form" aria-label="Card payment">
       <FormInputColumn>
+        {!hideZipCode && (
+          <CountryDropdown
+            labelTextWhenNoError="Country"
+            errorMessages={countryErrorMessages}
+            field={fields.country}
+            onChange={value => {
+              actions.fields.country.set(value);
+              // temporary measure to not dirty fields until
+              // we can write a reset function for fields
+              if (fields.zipCode.rawValue) {
+                actions.fields.zipCode.set("");
+              }
+            }}
+            showErrors={showErrors}
+          />
+        )}
         <FormInput
           labelTextWhenNoError="Name on card"
           errorMessages={nameOnCardErrors}
@@ -111,6 +136,8 @@ const PaymentFormCard = ({
             width={isMobile ? "100%" : "50%"}
           >
             <FormInput
+              isNum={isUS}
+              formatter={isUS ? zipFormat : null}
               labelTextWhenNoError="Zip code"
               errorMessages={zipCodeErrors}
               field={fields.zipCode}

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

@@ -3,12 +3,17 @@ import {
   required,
   onlyIntegers,
   hasLength,
-  matchesRegex
+  matchesRegex,
+  validateWhen
 } 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.
 
 const formConfig = {
+  country: {
+    defaultValue: "US",
+    validators: [required()]
+  },
   nameOnCard: {
     validators: [required()]
   },
@@ -29,8 +34,23 @@ const formConfig = {
     constraints: [onlyIntegers(), hasLength(0, 4)]
   },
   zipCode: {
-    validators: [required(), hasLength(5, 5)],
-    constraints: [onlyIntegers(), hasLength(0, 5)]
+    validators: [
+      required(),
+      validateWhen(
+        validateWhen(hasLength(5, 5), hasLength(0, 5)),
+        matchesRegex("US"),
+        "country"
+      ),
+      validateWhen(
+        validateWhen(hasLength(9, 9), hasLength(6, 9)),
+        matchesRegex("US"),
+        "country"
+      )
+    ],
+    constraints: [
+      validateWhen(onlyIntegers(), matchesRegex("US"), "country"),
+      validateWhen(hasLength(0, 9), matchesRegex("US"), "country")
+    ]
   }
 };