@thecb/components 4.1.11 → 4.1.13

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,
@@ -35124,10 +35140,12 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     boxShadow: "0px 0px 4px 0px rgb(110, 114, 126)",
     role: "region",
     "aria-label": "Payment step"
+  }, /*#__PURE__*/React__default.createElement(Center, {
+    maxWidth: "76.5rem"
   }, /*#__PURE__*/React__default.createElement(Reel, {
     padding: "0",
-    childGap: "3rem",
-    childWidth: "12rem",
+    childGap: "4.5rem",
+    childWidth: "11rem",
     justifyContent: "space-evenly",
     disableScroll: true
   }, repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesBefore), tabs.map(function (t, i) {
@@ -35144,7 +35162,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
       weight: FONT_WEIGHT_SEMIBOLD,
       extraStyles: "display: block; white-space: nowrap;"
     }, t));
-  }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter)));
+  }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
 
 var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$s));
@@ -39328,6 +39346,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,
@@ -39362,11 +39382,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,
@@ -39411,6 +39445,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,
@@ -39440,6 +39476,10 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
 };
 
 var formConfig$7 = {
+  country: {
+    defaultValue: "US",
+    validators: [required()]
+  },
   nameOnCard: {
     validators: [required()]
   },
@@ -39456,8 +39496,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.11",
+  "version": "4.1.13",
   "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/highlight-tab-row/HighlightTabRow.js

@@ -3,7 +3,7 @@ import { repeat } from "ramda";
 
 import { fallbackValues } from "./HighlightTabRow.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { Reel, Box } from "../../atoms/layouts";
+import { Reel, Box, Center } from "../../atoms/layouts";
 import Text from "../../atoms/text";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 
@@ -28,37 +28,39 @@ const HighlightTabRow = ({ tabs, highlightIndex, themeValues, isMobile }) => {
       role="region"
       aria-label="Payment step"
     >
-      <Reel
-        padding="0"
-        childGap="3rem"
-        childWidth="12rem"
-        justifyContent="space-evenly"
-        disableScroll
-      >
-        {repeat(<Box />, boxesBefore)}
-        {tabs.map((t, i) => (
-          <Box
-            key={t}
-            borderSize="3px"
-            borderColor={
-              highlightIndex == i ? themeValues.textColor : "transparent"
-            }
-            borderWidthOverride="0 0 3px 0"
-            extraStyles="text-align: center;"
-          >
-            <Text
-              variant="p"
-              textAlign="center"
-              color={themeValues.textColor}
-              weight={FONT_WEIGHT_SEMIBOLD}
-              extraStyles="display: block; white-space: nowrap;"
+      <Center maxWidth="76.5rem">
+        <Reel
+          padding="0"
+          childGap="4.5rem"
+          childWidth="11rem"
+          justifyContent="space-evenly"
+          disableScroll
+        >
+          {repeat(<Box />, boxesBefore)}
+          {tabs.map((t, i) => (
+            <Box
+              key={t}
+              borderSize="3px"
+              borderColor={
+                highlightIndex == i ? themeValues.textColor : "transparent"
+              }
+              borderWidthOverride="0 0 3px 0"
+              extraStyles="text-align: center;"
             >
-              {t}
-            </Text>
-          </Box>
-        ))}
-        {repeat(<Box />, boxesAfter)}
-      </Reel>
+              <Text
+                variant="p"
+                textAlign="center"
+                color={themeValues.textColor}
+                weight={FONT_WEIGHT_SEMIBOLD}
+                extraStyles="display: block; white-space: nowrap;"
+              >
+                {t}
+              </Text>
+            </Box>
+          ))}
+          {repeat(<Box />, boxesAfter)}
+        </Reel>
+      </Center>
     </Box>
   );
 };

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")
+    ]
   }
 };