@thecb/components 4.1.10-beta.1 → 4.1.11

package/dist/index.cjs.js

@@ -34265,33 +34265,17 @@ 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");
+  var stateProvinceErrorMessages = _defineProperty({}, required.error, "State or Province is required"); // const countryErrorMessages = {
+  //   [required.error]: "Country 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(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, {
+  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Address",
     errorMessages: street1ErrorMessages,
     field: fields.street1,
@@ -38762,7 +38746,8 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
       cancelText = _ref$cancelText === void 0 ? "Cancel" : _ref$cancelText,
       redirectURL = _ref.redirectURL,
       _ref$redirectText = _ref.redirectText,
-      redirectText = _ref$redirectText === void 0 ? "Return" : _ref$redirectText;
+      redirectText = _ref$redirectText === void 0 ? "Return" : _ref$redirectText,
+      buttonFlexOverride = _ref.buttonFlexOverride;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -38799,7 +38784,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }), /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
     padding: "2.5rem 0 3.125rem 0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
-    justify: !!backButton ? "space-between" : "flex-end",
+    justify: buttonFlexOverride ? buttonFlexOverride : !!backButton ? "space-between" : "flex-end",
     align: "center",
     childGap: "0.75rem"
   }, backButton, forwardButton)));
@@ -39343,8 +39328,6 @@ 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,
@@ -39379,25 +39362,11 @@ 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(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, {
+  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Name on card",
     errorMessages: nameOnCardErrors,
     field: fields.nameOnCard,
@@ -39442,8 +39411,6 @@ 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,
@@ -39473,10 +39440,6 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
 };
 
 var formConfig$7 = {
-  country: {
-    defaultValue: "US",
-    validators: [required()]
-  },
   nameOnCard: {
     validators: [required()]
   },
@@ -39493,8 +39456,8 @@ var formConfig$7 = {
     constraints: [onlyIntegers(), hasLength(0, 4)]
   },
   zipCode: {
-    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")]
+    validators: [required(), hasLength(5, 5)],
+    constraints: [onlyIntegers(), hasLength(0, 5)]
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.1.10-beta.1",
+  "version": "4.1.11",
   "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,13 +2,8 @@ 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,
-  zipFormat
-} from "../../../util/formats";
+import { expirationDateFormat, creditCardFormat } from "../../../util/formats";
 import {
   FormInput,
   FormInputColumn,
@@ -41,9 +36,6 @@ 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",
@@ -69,24 +61,9 @@ const PaymentFormCard = ({
       return () => actions.form.clear();
     }
   }, []);
-  const isUS = fields.country.rawValue === "US";
   return (
     <FormContainer variant={variant} role="form" aria-label="Card payment">
       <FormInputColumn>
-        <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}
@@ -134,8 +111,6 @@ 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,17 +3,12 @@ import {
   required,
   onlyIntegers,
   hasLength,
-  matchesRegex,
-  validateWhen
+  matchesRegex
 } 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()]
   },
@@ -34,23 +29,8 @@ const formConfig = {
     constraints: [onlyIntegers(), hasLength(0, 4)]
   },
   zipCode: {
-    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")
-    ]
+    validators: [required(), hasLength(5, 5)],
+    constraints: [onlyIntegers(), hasLength(0, 5)]
   }
 };