summit-registration-lite 2.0.10 → 2.0.13

package/dist/index.css

@@ -1,14 +1,14 @@
 .outerWrapper___OWXyi{border:1px solid lightgray;background-color:white;border-radius:5px}.innerWrapper___mIrBF{padding:10px}.title___Tbvkl{display:flex;justify-content:center;align-items:center;border-bottom:1px solid lightgray;margin:0px -10px;padding:0px 15px 5px}.title___Tbvkl i{cursor:pointer;margin-left:auto}.title___Tbvkl span{width:100%;font-weight:bold;font-size:18px;text-align:center;color:var(--color_primary)}
 
-:root{--color_primary: lightgray;--color_primary50: lightgray;--color_primary_contrast: #fff;--color_primary_contrast50: #ffffff50;--color_secondary: lightgray;--color_secondary_contrast: lightgray;--color_text_dark: #212121;--color_text_light: #ffffff;--color_text_input_hints: #212121}.step-wrapper{padding:10px;margin:10px;border:1px solid lightgray;border-radius:5px}.summit-registration-lite{color:var(--color_text_dark);font-size:15px}input{outline:none}
+:root{--color_primary: lightgray;--color_primary50: lightgray;--color_primary_contrast: #fff;--color_primary_contrast50: #ffffff50;--color_secondary: lightgray;--color_secondary_contrast: lightgray;--color_text_dark: #212121;--color_text_light: #ffffff;--color_text_input_hints: #212121}.step-wrapper{padding:10px;margin:10px;border:1px solid lightgray;border-radius:5px}.summit-registration-lite{color:var(--color_text_dark);font-size:15px;font-smooth:auto !important;-moz-osx-font-smoothing:auto !important;-webkit-font-smoothing:auto !important}.summit-registration-lite input:-moz-placeholder,.summit-registration-lite input::-moz-placeholder{opacity:1}input{outline:none}
 
 .loginWrapper___sxUEn{display:flex;justify-content:center;font-weight:bold;text-align:center;padding:20px 0 30px}.innerWrapper___GQRkq{display:flex;flex-direction:column;justify-content:center;width:300px}.innerWrapper___GQRkq span{margin:10px 0}.button___QMZPu{padding:10px 30px;background-color:red;color:white;font-weight:normal;display:inline-flex;justify-content:center;margin:5px 0;border-radius:5px;cursor:pointer;background-position:28px center;background-repeat:no-repeat;background-size:16px;line-height:1.4;box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)}.button___QMZPu:hover{box-shadow:0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)}.loginCode___dDBup{margin-bottom:10px;font-size:16px}.loginCode___dDBup>div{margin-top:10px}.loginCode___dDBup span{display:inline-block;font-weight:normal;font-size:14px;color:#e5424d}.input___QR9sA{display:flex;height:40px;margin-top:5px}.input___QR9sA input{border:1px solid var(--color_primary);border-radius:5px;padding:5px;width:100%}.input___QR9sA input::placeholder{color:var(--color_text_input_hints)}.input___QR9sA button{margin-left:5px;background-color:var(--color_secondary_contrast);padding:0px 15px;border:1px solid var(--color_secondary_contrast);color:#fff;box-shadow:none;text-align:center;white-space:nowrap;font-weight:bold;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center}
 
-.title___LksVm{font-weight:bold;cursor:pointer}.form___v5GIx{display:flex;flex-wrap:wrap;justify-content:space-between;margin:10px 0}.form___v5GIx div.fieldWrapper___Eoe61{width:48%;border-radius:5px;background-color:#e6f3ff;border:1px solid #3fa2f7;height:36px;padding:5px;display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.form___v5GIx div.fieldWrapper___Eoe61:first-of-type{width:100%}.form___v5GIx div.fieldWrapper___Eoe61 input{width:100%;background-color:transparent;border:none}.form___v5GIx div.fieldWrapper___Eoe61 input:focus-visible{outline:none}.form___v5GIx div.fieldWrapper___Eoe61 i{position:relative;padding-right:5px}.form___v5GIx div.fieldWrapper___Eoe61>div{width:100%;padding-left:5px}.form___v5GIx div.fieldWrapper___Eoe61>div:first-of-type{width:95%}.form___v5GIx input{width:48%;border-radius:5px;border:1px solid #3fa2f7;color:#3486cd;font-size:16px;background-color:#e6f3ff;height:36px;padding:5px;display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;font-weight:bold}.form___v5GIx input::placeholder{color:#3486cd}
+.title___LksVm{font-weight:bold;cursor:pointer}.form___v5GIx{display:flex;flex-wrap:wrap;justify-content:space-between;margin:10px 0}.form___v5GIx div.fieldWrapper___Eoe61{width:48%;border-radius:5px;background-color:#e6f3ff;border:1px solid #3fa2f7;height:36px;padding:5px 10px;display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.form___v5GIx div.fieldWrapper___Eoe61:first-of-type{width:100%}.form___v5GIx div.fieldWrapper___Eoe61 input{width:100%;background-color:transparent;border:none}.form___v5GIx div.fieldWrapper___Eoe61 input:focus-visible{outline:none}.form___v5GIx div.fieldWrapper___Eoe61 i{position:relative}.form___v5GIx div.fieldWrapper___Eoe61>div{width:100%}.form___v5GIx div.fieldWrapper___Eoe61>div:first-of-type{width:95%}.form___v5GIx input{width:48%;border-radius:5px;border:1px solid #3fa2f7;color:#3486cd;font-size:16px;background-color:#e6f3ff;height:36px;padding:5px 10px;display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;font-weight:bold}.form___v5GIx input::placeholder{color:#3486cd}
 
-.form___DoT3x{display:flex;flex-wrap:wrap;justify-content:space-between;margin:10px 0}.form___DoT3x div.fieldWrapper___wa1Ks{display:flex;width:48%;border-radius:5px;border:1px solid var(--color_primary);height:36px;padding:5px;display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.form___DoT3x div.fieldWrapper___wa1Ks:first-of-type{width:100%}.form___DoT3x div.fieldWrapper___wa1Ks:last-of-type{flex-direction:column}.form___DoT3x div.fieldWrapper___wa1Ks input{width:100%;background-color:transparent;border:none;padding:0}.form___DoT3x div.fieldWrapper___wa1Ks input:focus-visible{outline:none}.form___DoT3x div.fieldWrapper___wa1Ks i{position:relative;padding-right:5px}.form___DoT3x div.fieldWrapper___wa1Ks>div{width:100%;padding-left:5px}.form___DoT3x div.fieldWrapper___wa1Ks>div:first-of-type{width:95%}.form___DoT3x div.fieldWrapper___wa1Ks span{display:inline-block;color:#e5424d;font-size:14px;align-self:flex-start}.form___DoT3x input{width:48%;border-radius:5px;color:#3486cd;font-size:16px;height:36px;padding:5px;display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.form___DoT3x input::placeholder{color:var(--color_text_input_hints);font-size:16px}
+.form___DoT3x{display:flex;flex-wrap:wrap;justify-content:space-between;margin:10px 0}.form___DoT3x div.fieldWrapper___wa1Ks{width:48%;margin-bottom:5px}.form___DoT3x div.fieldWrapper___wa1Ks:first-of-type{width:100%}.form___DoT3x div.inputWrapper___CbXhF{display:flex;border-radius:5px;border:1px solid var(--color_primary);height:36px;padding:5px 10px;justify-content:space-between;align-items:center}.form___DoT3x div.inputWrapper___CbXhF input{width:100%;background-color:transparent;border:none;padding:0;font-size:16px;display:flex;justify-content:space-between;align-items:center}.form___DoT3x div.inputWrapper___CbXhF input::placeholder{color:var(--color_text_input_hints);font-size:16px}.form___DoT3x div.inputWrapper___CbXhF input:focus-visible{outline:none}.form___DoT3x div.inputWrapper___CbXhF i{position:relative}.form___DoT3x div.inputWrapper___CbXhF>div{width:100%}.form___DoT3x div.inputWrapper___CbXhF>div:first-of-type{width:95%}.form___DoT3x div.fieldError___QrMYW{margin-top:5px;margin-bottom:5px;color:#e5424d;font-size:14px;line-height:1.5}.form___DoT3x div.fieldError___QrMYW::before{font-family:FontAwesome;content:'\f071';margin-right:5px}
 
-.title___ECoNz{font-weight:bold;cursor:pointer;display:flex;justify-content:space-between}.title___ECoNz div{font-weight:normal}.form___lDFka{display:flex;flex-wrap:wrap;justify-content:space-between;margin:10px 0 0}.form___lDFka>div{width:48%}.form___lDFka>div input{width:100%;border-radius:5px;border:1px solid var(--color_primary);height:36px;padding:5px;display:flex;justify-content:space-between;align-items:center;font-size:15px}.form___lDFka>div input::placeholder{color:var(--color_text_input_hints)}.form___lDFka>div .readOnly___WRazF{opacity:0.6;cursor:default}.form___lDFka>div span{display:inline-block;color:#e5424d}.form___lDFka>div>:last-child{margin-bottom:5px}.form___lDFka .companies___kmGFB{width:48%}.form___lDFka .companies___kmGFB>div{position:relative;width:100%;border-radius:5px;display:flex;justify-content:space-between;align-items:center;font-size:15px}.form___lDFka .companies___kmGFB>div::placeholder{color:var(--color_text_input_hints)}.form___lDFka .companies___kmGFB>div>div{height:100%;width:100%}.form___lDFka .companies___kmGFB>div>div>div{height:36px;padding:0px;border:1px solid var(--color_primary);box-shadow:0 0 1px var(--color_primary)}.form___lDFka .companies___kmGFB>div>div>div>div{height:36px}.form___lDFka .companies___kmGFB>div>div>span+div+div{overflow:auto;height:auto}.form___lDFka .companies___kmGFB>div>div>span+div+div>div{height:auto}.form___lDFka .companies___kmGFB>div input{padding:5px;border:1px solid var(--color_primary);padding-right:0px !important;background-color:transparent}.form___lDFka .companies___kmGFB>div i{right:10px !important}.moreInfo___cQYdZ{display:inline-block;margin-top:10px}.moreInfoTooltip___lslgT{max-width:280px}.ticketQuantityNotice___L6gis{margin:10px 0 0 !important}.formErrors___dQQMe{margin-top:10px}.formErrors___dQQMe div+div{margin-top:10px}
+.title___ECoNz{font-weight:bold;cursor:pointer;display:flex;justify-content:space-between}.title___ECoNz div{font-weight:normal}.form___lDFka{display:flex;flex-wrap:wrap;justify-content:space-between;margin:10px 0 0}.form___lDFka div.fieldWrapper___Mi_nL{width:48%;margin-bottom:5px}.form___lDFka div.inputWrapper___PEQFR{display:flex;border-radius:5px;border:1px solid var(--color_primary);height:36px;padding:5px 10px;justify-content:space-between;align-items:center}.form___lDFka div.inputWrapper___PEQFR input{width:100%;background-color:transparent;border:none;padding:0;font-size:16px;display:flex;justify-content:space-between;align-items:center}.form___lDFka div.inputWrapper___PEQFR input::placeholder{color:var(--color_text_input_hints);font-size:16px}.form___lDFka div.inputWrapper___PEQFR input:focus-visible{outline:none}.form___lDFka div.inputWrapper___PEQFR .readOnly___WRazF{opacity:0.6;cursor:default}.form___lDFka div.fieldError___ksJVe{margin-top:5px;margin-bottom:5px;color:#e5424d;font-size:14px;line-height:1.5}.form___lDFka div.fieldError___ksJVe::before{font-family:FontAwesome;content:'\f071';margin-right:5px}.form___lDFka .companies___kmGFB>div{position:relative;width:100%;border-radius:5px;display:flex;justify-content:space-between;align-items:center;font-size:15px}.form___lDFka .companies___kmGFB>div::placeholder{color:var(--color_text_input_hints)}.form___lDFka .companies___kmGFB>div>div{height:100%;width:100%}.form___lDFka .companies___kmGFB>div>div>div{height:36px;padding:0px;border:1px solid var(--color_primary);box-shadow:0 0 1px var(--color_primary)}.form___lDFka .companies___kmGFB>div>div>div>div{height:36px}.form___lDFka .companies___kmGFB>div>div>span+div+div{overflow:auto;height:auto}.form___lDFka .companies___kmGFB>div>div>span+div+div>div{height:auto}.form___lDFka .companies___kmGFB>div input{padding:5px 10px;border:1px solid var(--color_primary);padding-right:0px !important;background-color:transparent}.form___lDFka .companies___kmGFB>div i{right:10px !important}.moreInfo___cQYdZ{display:inline-block;margin-top:10px}.moreInfoTooltip___lslgT{max-width:280px}.ticketQuantityNotice___L6gis{margin:10px 0 0 !important}.formErrors___dQQMe{margin-top:10px}.formErrors___dQQMe div+div{margin-top:10px}
 
 .title___DNZyl{font-weight:bold;cursor:pointer;display:flex;justify-content:space-between}.summary___quWdZ{text-align:right}.crossOut___QZ7dy{text-decoration:line-through}.discount___sEK_Q{color:green}.promo___F8lPO{font-weight:bold;display:flex;justify-content:flex-end}.form___aoo7w{display:flex;gap:10px;margin-top:10px}.dropdown____HWg0{flex:1 1 auto}.quantity___SIEQZ{flex-shrink:0}.quantity___SIEQZ input,.quantity___SIEQZ button{height:36px;text-align:center;border:1px solid var(--color_primary)}.quantity___SIEQZ input{padding:0 8px;width:48px !important}.quantity___SIEQZ input,.quantity___SIEQZ input:read-only{color:inherit;background-color:#fff;border:1px solid var(--color_primary)}.quantity___SIEQZ button{display:flex;align-items:center}.quantity___SIEQZ button:disabled,.quantity___SIEQZ button:disabled:hover{opacity:0.65;background:#dedede;border-color:#bebebe}.soldOut___Hatfr{height:36px;padding:0 16px;line-height:34px;font-weight:700px;background:#dedede;border:solid 1px #bebebe;border-radius:5px;opacity:0.65;font-weight:700;flex-shrink:0}.moreInfo___LmwOe{display:inline-block;margin-top:10px}.moreInfoTooltip___nOBf1{max-width:280px}.inPersonDisclaimer___PXGTz{margin-top:15px}
 

package/dist/index.js

@@ -713,7 +713,7 @@ const LoginComponent = ({
     className: `${index_module.innerWrapper}`
   }, /*#__PURE__*/external_react_default().createElement("div", {
     className: index_module.loginCode
-  }, "Enter your email address to login or signup:", /*#__PURE__*/external_react_default().createElement("div", {
+  }, "Enter your email to begin registration:", /*#__PURE__*/external_react_default().createElement("div", {
     className: index_module.input
   }, /*#__PURE__*/external_react_default().createElement("input", {
     placeholder: "youremail@example.com",
@@ -726,7 +726,7 @@ const LoginComponent = ({
     "data-testid": "email-button"
   }, ">"), /*#__PURE__*/external_react_default().createElement("br", null)), emailError && /*#__PURE__*/external_react_default().createElement("span", {
     "data-testid": "email-error"
-  }, "Please enter a valid email address")), /*#__PURE__*/external_react_default().createElement("span", null, "Or you may signup or login with a social provider:"), options.map((o, index) => {
+  }, "Please enter a valid email address")), /*#__PURE__*/external_react_default().createElement("span", null, "Or you may login with one of the following:"), options.map((o, index) => {
     return o.provider_param ? /*#__PURE__*/external_react_default().createElement("div", {
       className: `${index_module.button}`,
       key: `provider-${o.provider_param}`,
@@ -778,10 +778,17 @@ const react_stripe_js_namespaceObject = require("@stripe/react-stripe-js");
 ;// CONCATENATED MODULE: ./src/components/payment/index.module.scss
 // extracted by mini-css-extract-plugin
 /* harmony default export */ const payment_index_module = ({"title":"title___LksVm","form":"form___v5GIx","fieldWrapper":"fieldWrapper___Eoe61"});
+;// CONCATENATED MODULE: external "react-hook-form"
+const external_react_hook_form_namespaceObject = require("react-hook-form");
+;// CONCATENATED MODULE: external "lodash/merge"
+const merge_namespaceObject = require("lodash/merge");
+var merge_default = /*#__PURE__*/__webpack_require__.n(merge_namespaceObject);
 ;// CONCATENATED MODULE: ./src/components/stripe-form/index.module.scss
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const stripe_form_index_module = ({"form":"form___DoT3x","fieldWrapper":"fieldWrapper___wa1Ks"});
+/* harmony default export */ const stripe_form_index_module = ({"form":"form___DoT3x","fieldWrapper":"fieldWrapper___wa1Ks","inputWrapper":"inputWrapper___CbXhF","fieldError":"fieldError___QrMYW"});
 ;// CONCATENATED MODULE: ./src/components/stripe-form/index.js
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**
  * Copyright 2020 OpenStack Foundation
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -800,19 +807,64 @@ const react_stripe_js_namespaceObject = require("@stripe/react-stripe-js");
 
 
 
+
+const stripeErrorCodeMap = {
+  'incomplete_number': {
+    field: 'cardNumber',
+    message: 'This field is required.'
+  },
+  'incorrect_number': {
+    field: 'cardNumber'
+  },
+  'invalid_number': {
+    field: 'cardNumber'
+  },
+  'card_declined': {
+    field: 'cardNumber'
+  },
+  'incomplete_cvc': {
+    field: 'cardCvc',
+    message: 'This field is required.'
+  },
+  'incorrect_cvc': {
+    field: 'cardCvc'
+  },
+  'invalid_cvc': {
+    field: 'cardCvc'
+  },
+  'incomplete_expiry': {
+    field: 'cardExpiry',
+    message: 'This field is required.'
+  },
+  'invalid_expiry_month': {
+    field: 'cardExpiry'
+  },
+  'invalid_expiry_year': {
+    field: 'cardExpiry'
+  },
+  'expired_card': {
+    field: 'cardExpiry'
+  }
+};
+
 const StripeForm = ({
   reservation,
   payTicket,
   userProfile,
-  marketingData
+  marketingData,
+  stripeOptions
 }) => {
   const stripe = (0,react_stripe_js_namespaceObject.useStripe)();
   const elements = (0,react_stripe_js_namespaceObject.useElements)();
-  const [zipCode, setZipCode] = (0,external_react_namespaceObject.useState)('');
-  const [zipCodeError, setZipCodeError] = (0,external_react_namespaceObject.useState)({
-    required: false
-  });
-  const stripeStyle = {
+  const [stripeErrors, setStripeErrors] = (0,external_react_namespaceObject.useState)({});
+  const {
+    register,
+    handleSubmit,
+    formState: {
+      errors
+    }
+  } = (0,external_react_hook_form_namespaceObject.useForm)();
+  const stripeStyle = merge_default()({}, {
     base: {
       // Add your base input styles here. For example: #d4e5f4
       color: marketingData.color_text_dark,
@@ -829,21 +881,10 @@ const StripeForm = ({
         color: '#3486cd'
       }
     }
-  };
+  }, stripeOptions === null || stripeOptions === void 0 ? void 0 : stripeOptions.style);
 
-  const handleSubmit = async event => {
-    event.preventDefault();
-
-    if (!zipCode) {
-      setZipCodeError({
-        required: true
-      });
-      return;
-    } else {
-      setZipCodeError({
-        required: false
-      });
-    }
+  const onSubmit = async data => {
+    setStripeErrors({});
 
     if (!stripe) {
       // Stripe.js has not loaded yet. Make sure to disable
@@ -857,51 +898,75 @@ const StripeForm = ({
       token
     } = await stripe.createToken(cardElement, {
       name: `${reservation.owner_first_name} ${reservation.owner_last_name}`,
-      address_zip: zipCode,
+      address_zip: data.zipCode,
       address_country: userProfile.country || ''
     });
 
     if (token) {
-      payTicket(token, stripe, zipCode);
+      payTicket(token, stripe, data.zipCode);
     } else if (error) {
-      external_sweetalert2_default().fire("Payment error", "There's an error generating your payment, please retry.", "warning");
+      if (stripeErrorCodeMap[error.code]) {
+        setStripeErrors({
+          [stripeErrorCodeMap[error.code].field]: stripeErrorCodeMap[error.code].message || error.message
+        });
+      } else {
+        external_sweetalert2_default().fire("Payment error", error.message, "warning");
+      }
     }
   };
 
   return /*#__PURE__*/external_react_default().createElement("form", {
     className: stripe_form_index_module.form,
     id: "payment-form",
-    onSubmit: handleSubmit
+    onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/external_react_default().createElement("div", {
     className: stripe_form_index_module.fieldWrapper
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: stripe_form_index_module.inputWrapper
   }, /*#__PURE__*/external_react_default().createElement(react_stripe_js_namespaceObject.CardNumberElement, {
     options: {
-      style: stripeStyle
+      style: stripeStyle,
+      placeholder: '1234 1234 1234 1234 *'
     }
   }), /*#__PURE__*/external_react_default().createElement("i", {
     className: "fa fa-credit-card"
-  })), /*#__PURE__*/external_react_default().createElement("div", {
+  })), stripeErrors.cardNumber && /*#__PURE__*/external_react_default().createElement("div", {
+    className: stripe_form_index_module.fieldError
+  }, stripeErrors.cardNumber)), /*#__PURE__*/external_react_default().createElement("div", {
     className: stripe_form_index_module.fieldWrapper
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: stripe_form_index_module.inputWrapper
   }, /*#__PURE__*/external_react_default().createElement(react_stripe_js_namespaceObject.CardExpiryElement, {
     options: {
-      style: stripeStyle
+      style: stripeStyle,
+      placeholder: 'MM / YY *'
     }
-  })), /*#__PURE__*/external_react_default().createElement("div", {
+  })), stripeErrors.cardExpiry && /*#__PURE__*/external_react_default().createElement("div", {
+    className: stripe_form_index_module.fieldError
+  }, stripeErrors.cardExpiry)), /*#__PURE__*/external_react_default().createElement("div", {
     className: stripe_form_index_module.fieldWrapper
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: stripe_form_index_module.inputWrapper
   }, /*#__PURE__*/external_react_default().createElement(react_stripe_js_namespaceObject.CardCvcElement, {
     options: {
-      style: stripeStyle
-    }
-  })), /*#__PURE__*/external_react_default().createElement("div", {
-    className: stripe_form_index_module.fieldWrapper,
-    style: {
-      marginBottom: `${zipCodeError.required ? '25px' : '0px'}`
+      style: stripeStyle,
+      placeholder: 'CVC *'
     }
-  }, /*#__PURE__*/external_react_default().createElement("input", {
-    placeholder: "Zip Code",
-    value: zipCode,
+  })), stripeErrors.cardCvc && /*#__PURE__*/external_react_default().createElement("div", {
+    className: stripe_form_index_module.fieldError
+  }, stripeErrors.cardCvc)), /*#__PURE__*/external_react_default().createElement("div", {
+    className: stripe_form_index_module.fieldWrapper
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: stripe_form_index_module.inputWrapper
+  }, /*#__PURE__*/external_react_default().createElement("input", _extends({
+    type: "text",
+    placeholder: "ZIP Code *",
     onChange: e => setZipCode(e.target.value)
-  }), zipCodeError.required && /*#__PURE__*/external_react_default().createElement("span", null, "This field is required")));
+  }, register("zipCode", {
+    required: true
+  })))), errors.zipCode && /*#__PURE__*/external_react_default().createElement("div", {
+    className: stripe_form_index_module.fieldError
+  }, "This field is required.")));
 };
 
 const mapStateToProps = ({
@@ -943,7 +1008,8 @@ const PaymentComponent = ({
   userProfile,
   reservation,
   payTicket,
-  stripeKey
+  stripeKey,
+  stripeOptions
 }) => {
   const [ref, {
     height
@@ -962,6 +1028,9 @@ const PaymentComponent = ({
       marginBottom: isActive ? 5 : 0
     }
   });
+  const options = {
+    fonts: stripeOptions === null || stripeOptions === void 0 ? void 0 : stripeOptions.fonts
+  };
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: `${payment_index_module.outerWrapper} step-wrapper`
   }, /*#__PURE__*/external_react_default().createElement((external_react_default()).Fragment, null, /*#__PURE__*/external_react_default().createElement("div", {
@@ -975,19 +1044,19 @@ const PaymentComponent = ({
   }, /*#__PURE__*/external_react_default().createElement("div", {
     ref: ref
   }, /*#__PURE__*/external_react_default().createElement(react_stripe_js_namespaceObject.Elements, {
+    options: options,
     stripe: stripeKey
   }, /*#__PURE__*/external_react_default().createElement(stripe_form, {
     reservation: reservation,
     payTicket: payTicket,
-    userProfile: userProfile
+    userProfile: userProfile,
+    stripeOptions: stripeOptions
   })))))));
 };
 
 /* harmony default export */ const payment = (PaymentComponent);
 ;// CONCATENATED MODULE: external "openstack-uicore-foundation/lib/components"
 const components_namespaceObject = require("openstack-uicore-foundation/lib/components");
-;// CONCATENATED MODULE: external "react-hook-form"
-const external_react_hook_form_namespaceObject = require("react-hook-form");
 ;// CONCATENATED MODULE: external "react-tooltip"
 const external_react_tooltip_namespaceObject = require("react-tooltip");
 var external_react_tooltip_default = /*#__PURE__*/__webpack_require__.n(external_react_tooltip_namespaceObject);
@@ -1001,9 +1070,9 @@ const formatErrorMessage = string => {
 };
 ;// CONCATENATED MODULE: ./src/components/personal-information/index.module.scss
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const personal_information_index_module = ({"title":"title___ECoNz","form":"form___lDFka","readOnly":"readOnly___WRazF","companies":"companies___kmGFB","moreInfo":"moreInfo___cQYdZ","moreInfoTooltip":"moreInfoTooltip___lslgT","ticketQuantityNotice":"ticketQuantityNotice___L6gis","formErrors":"formErrors___dQQMe"});
+/* harmony default export */ const personal_information_index_module = ({"title":"title___ECoNz","form":"form___lDFka","fieldWrapper":"fieldWrapper___Mi_nL","inputWrapper":"inputWrapper___PEQFR","readOnly":"readOnly___WRazF","fieldError":"fieldError___ksJVe","companies":"companies___kmGFB","moreInfo":"moreInfo___cQYdZ","moreInfoTooltip":"moreInfoTooltip___lslgT","ticketQuantityNotice":"ticketQuantityNotice___L6gis","formErrors":"formErrors___dQQMe"});
 ;// CONCATENATED MODULE: ./src/components/personal-information/index.js
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function personal_information_extends() { personal_information_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return personal_information_extends.apply(this, arguments); }
 
 function personal_information_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -1051,7 +1120,7 @@ const PersonalInfoComponent = ({
     email: userProfile.email || '',
     company: {
       id: null,
-      name: userProfile.company || ''
+      name: ''
     },
     promoCode: ''
   });
@@ -1137,7 +1206,11 @@ const PersonalInfoComponent = ({
     onSubmit: handleSubmit(onSubmit),
     className: personal_information_index_module.form,
     "data-testid": "personal-form"
-  }, /*#__PURE__*/external_react_default().createElement("div", null, /*#__PURE__*/external_react_default().createElement("input", _extends({
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: personal_information_index_module.fieldWrapper
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: personal_information_index_module.inputWrapper
+  }, /*#__PURE__*/external_react_default().createElement("input", personal_information_extends({
     type: "text",
     placeholder: "First name *",
     defaultValue: personalInfo.firstName || ''
@@ -1146,9 +1219,14 @@ const PersonalInfoComponent = ({
     maxLength: 80
   }), {
     "data-testid": "first-name"
-  })), errors.firstName && /*#__PURE__*/external_react_default().createElement("span", {
+  }))), errors.firstName && /*#__PURE__*/external_react_default().createElement("div", {
+    className: personal_information_index_module.fieldError,
     "data-testid": "first-name-error"
-  }, "This field is required")), /*#__PURE__*/external_react_default().createElement("div", null, /*#__PURE__*/external_react_default().createElement("input", _extends({
+  }, "This field is required.")), /*#__PURE__*/external_react_default().createElement("div", {
+    className: personal_information_index_module.fieldWrapper
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: personal_information_index_module.inputWrapper
+  }, /*#__PURE__*/external_react_default().createElement("input", personal_information_extends({
     type: "text",
     placeholder: "Last name *",
     defaultValue: personalInfo.lastName || ''
@@ -1157,9 +1235,14 @@ const PersonalInfoComponent = ({
     maxLength: 100
   }), {
     "data-testid": "last-name"
-  })), errors.lastName && /*#__PURE__*/external_react_default().createElement("span", {
+  }))), errors.lastName && /*#__PURE__*/external_react_default().createElement("div", {
+    className: personal_information_index_module.fieldError,
     "data-testid": "last-name-error"
-  }, "This field is required")), /*#__PURE__*/external_react_default().createElement("div", null, /*#__PURE__*/external_react_default().createElement("input", _extends({
+  }, "This field is required.")), /*#__PURE__*/external_react_default().createElement("div", {
+    className: personal_information_index_module.fieldWrapper
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: personal_information_index_module.inputWrapper
+  }, /*#__PURE__*/external_react_default().createElement("input", personal_information_extends({
     type: "text",
     placeholder: "Email *",
     className: personal_information_index_module.readOnly,
@@ -1170,11 +1253,15 @@ const PersonalInfoComponent = ({
     pattern: /^\S+@\S+$/i
   }), {
     "data-testid": "email"
-  })), ((_errors$email = errors.email) === null || _errors$email === void 0 ? void 0 : _errors$email.type) === 'required' && /*#__PURE__*/external_react_default().createElement("span", {
+  }))), ((_errors$email = errors.email) === null || _errors$email === void 0 ? void 0 : _errors$email.type) === 'required' && /*#__PURE__*/external_react_default().createElement("div", {
+    className: personal_information_index_module.fieldError,
     "data-testid": "email-error-required"
-  }, "This field is required"), ((_errors$email2 = errors.email) === null || _errors$email2 === void 0 ? void 0 : _errors$email2.type) === 'pattern' && /*#__PURE__*/external_react_default().createElement("span", {
+  }, "This field is required."), ((_errors$email2 = errors.email) === null || _errors$email2 === void 0 ? void 0 : _errors$email2.type) === 'pattern' && /*#__PURE__*/external_react_default().createElement("div", {
+    className: personal_information_index_module.fieldError,
     "data-testid": "email-error-invalid"
-  }, "The email is invalid")), /*#__PURE__*/external_react_default().createElement("div", {
+  }, "The email is invalid.")), /*#__PURE__*/external_react_default().createElement("div", {
+    className: personal_information_index_module.fieldWrapper
+  }, /*#__PURE__*/external_react_default().createElement("div", {
     className: personal_information_index_module.companies
   }, /*#__PURE__*/external_react_default().createElement(components_namespaceObject.RegistrationCompanyInput, {
     id: "company",
@@ -1185,10 +1272,14 @@ const PersonalInfoComponent = ({
     value: personalInfo.company
   }), companyError && /*#__PURE__*/external_react_default().createElement("span", {
     "data-testid": "company-error"
-  }, "This field is required")), /*#__PURE__*/external_react_default().createElement("div", null, /*#__PURE__*/external_react_default().createElement("input", _extends({
+  }, "This field is required"))), /*#__PURE__*/external_react_default().createElement("div", {
+    className: personal_information_index_module.fieldWrapper
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: personal_information_index_module.inputWrapper
+  }, /*#__PURE__*/external_react_default().createElement("input", personal_information_extends({
     type: "text",
     placeholder: "Promo Code"
-  }, register("promoCode"))))), /*#__PURE__*/external_react_default().createElement("a", {
+  }, register("promoCode")))))), /*#__PURE__*/external_react_default().createElement("a", {
     className: personal_information_index_module.moreInfo,
     "data-tip": true,
     "data-for": "promo-code-info"
@@ -1692,7 +1783,7 @@ const PasswordlessLoginComponent = ({
     className: `${login_passwordless_index_module.button} button`,
     onClick: () => tryPasswordlessLogin(otpCode),
     "data-testid": "verify"
-  }, "Verify"), /*#__PURE__*/external_react_default().createElement("b", null, "or go back and ", /*#__PURE__*/external_react_default().createElement("span", {
+  }, "Verify Email"), /*#__PURE__*/external_react_default().createElement("b", null, "or go back and ", /*#__PURE__*/external_react_default().createElement("span", {
     className: login_passwordless_index_module.link,
     onClick: () => goToLogin(),
     "data-testid": "go-back"
@@ -1744,7 +1835,7 @@ const TicketOwnedComponent = ({
 
 /* harmony default export */ const ticket_owned = (TicketOwnedComponent);
 ;// CONCATENATED MODULE: ./src/components/registration-lite.js
-const registration_lite_excluded = ["loadSession", "setMarketingSettings", "changeStep", "removeReservedTicket", "reserveTicket", "payTicket", "onPurchaseComplete", "getTicketTypes", "getTaxesTypes", "getLoginCode", "passwordlessLogin", "goToLogin", "loginOptions", "allowsNativeAuth", "allowsOtpAuth", "reservation", "checkout", "ticketTypes", "taxTypes", "step", "passwordlessCodeSent", "passwordlessEmail", "passwordlessCode", "getPasswordlessCode", "passwordlessCodeError", "loginWithCode", "goToExtraQuestions", "goToEvent", "goToRegistration", "profileData", "summitData", "supportEmail", "ticketOwned", "ownedTickets", "widgetLoading", "loading", "inPersonDisclaimer", "userProfile", "handleCompanyError"];
+const registration_lite_excluded = ["loadSession", "setMarketingSettings", "changeStep", "removeReservedTicket", "reserveTicket", "payTicket", "onPurchaseComplete", "getTicketTypes", "getTaxesTypes", "getLoginCode", "passwordlessLogin", "goToLogin", "loginOptions", "allowsNativeAuth", "allowsOtpAuth", "reservation", "checkout", "ticketTypes", "taxTypes", "step", "passwordlessCodeSent", "passwordlessEmail", "passwordlessCode", "getPasswordlessCode", "passwordlessCodeError", "loginWithCode", "goToExtraQuestions", "goToEvent", "goToRegistration", "profileData", "summitData", "supportEmail", "ticketOwned", "ownedTickets", "widgetLoading", "loading", "inPersonDisclaimer", "userProfile", "handleCompanyError", "stripeOptions"];
 
 function registration_lite_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -1828,7 +1919,8 @@ const RegistrationLite = _ref => {
     loading,
     inPersonDisclaimer,
     userProfile,
-    handleCompanyError
+    handleCompanyError,
+    stripeOptions
   } = _ref,
       rest = registration_lite_objectWithoutProperties(_ref, registration_lite_excluded);
 
@@ -1987,7 +2079,8 @@ const RegistrationLite = _ref => {
     reservation: reservation,
     payTicket: payTicket,
     userProfile: profileData,
-    stripeKey: stripePromise
+    stripeKey: stripePromise,
+    stripeOptions: stripeOptions
   })))), profileData && step === 3 && /*#__PURE__*/external_react_default().createElement(purchase_complete, {
     checkout: checkout,
     summit: summitData,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "summit-registration-lite",
-  "version": "2.0.10",
+  "version": "2.0.13",
   "description": "Summit Registration Lite",
   "main": "index.js",
   "scripts": {