summit-registration-lite 5.0.29-beta.1 → 5.0.30

package/dist/index.css

@@ -8,7 +8,7 @@
 
 .form___zXb7s{display:flex;flex-wrap:wrap;justify-content:space-between;margin:10px 0}.form___zXb7s div.fieldWrapper___G4Wqw{width:100%;margin-bottom:5px}.form___zXb7s div.fieldWrapper___G4Wqw:first-of-type div.inputWrapper___Yz5zB{width:100%}.form___zXb7s div.fieldWrapper___G4Wqw .fieldRow___NfZdJ{justify-content:space-between;display:flex}.form___zXb7s div.fieldWrapper___G4Wqw div.inputWrapper___Yz5zB{width:48%}.form___zXb7s div.fieldWrapper___G4Wqw div.inputWrapper___Yz5zB.addressField___vmAQh{width:100%}.form___zXb7s div.lawpayWrapper___hpUBf{height:36px}.form___zXb7s div.dateWrapper___XDfqs{display:flex;justify-content:space-between}.form___zXb7s div.dateWrapper___XDfqs>div{width:48%}.form___zXb7s div.dateWrapper___XDfqs>div .dropdown___l3_bk{width:100%}.form___zXb7s div.dateWrapper___XDfqs>div .dropdown___l3_bk>div{border:1px solid var(--color_primary);width:100%}.form___zXb7s div.inputWrapper___Yz5zB{display:flex;border-radius:5px;border:1px solid var(--color_primary);height:36px;padding:5px 10px;justify-content:space-between;align-items:center}.form___zXb7s div.inputWrapper___Yz5zB iframe{height:inherit;width:inherit}.form___zXb7s div.inputWrapper___Yz5zB input{width:100%;background-color:transparent;border:none;padding:0;font-size:16px;display:flex;justify-content:space-between;align-items:center}.form___zXb7s div.inputWrapper___Yz5zB input::placeholder{color:var(--color_text_input_hints);font-size:16px}.form___zXb7s div.inputWrapper___Yz5zB input:focus-visible{outline:none}.form___zXb7s div.inputWrapper___Yz5zB i{position:relative}.form___zXb7s div.inputWrapper___Yz5zB>div{width:100%}.form___zXb7s div.inputWrapper___Yz5zB>div:first-of-type{width:95%}.form___zXb7s div.fieldError___Igq3U{margin-top:5px;margin-bottom:5px;color:#e5424d;font-size:14px;line-height:1.5}.form___zXb7s div.fieldError___Igq3U::before{font-family:FontAwesome;content:'\f071';margin-right:5px}
 
-.form___DoT3x{display:flex;flex-wrap:wrap;flex-direction:column;justify-content:space-between;margin:10px 0}.form___DoT3x div.fieldWrapper___wa1Ks{margin-top:15px}.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_input_border_color);background-color:var(--color_input_background_color);height:44.4px;padding:5px 10px;justify-content:space-between;align-items:center;box-shadow:0px 1px 1px rgba(0,0,0,0.03),0px 3px 6px rgba(0,0,0,0.02)}.form___DoT3x div.inputWrapper___CbXhF input{width:100%;color:var(--color_input_text_color);background-color:var(--color_input_background_color);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}
+.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_input_border_color);background-color:var(--color_input_background_color);height:36px;padding:5px 10px;justify-content:space-between;align-items:center}.form___DoT3x div.inputWrapper___CbXhF input{width:100%;color:var(--color_input_text_color);background-color:var(--color_input_background_color);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.fieldWrapper___Mi_nL{width:48%;margin-bottom:5px}.form___lDFka div.fieldWrapperRadio___x18VG{width:100%;margin-bottom:10px}.form___lDFka div.fieldWrapperRadio___x18VG label{display:inline-block;margin-bottom:5px}.form___lDFka div.fieldWrapperRadio___x18VG>div>div{padding-left:0px !important}.form___lDFka div.inputWrapper___PEQFR{display:flex;border-radius:5px;border:1px solid var(--color_input_border_color);background-color:var(--color_input_background_color);height:36px;padding:5px 10px;justify-content:space-between;align-items:center}.form___lDFka div.inputWrapper___PEQFR input{width:100%;background-color:transparent;color:var(--color_input_text_color);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;justify-content:left !important}.form___lDFka div.fieldError___ksJVe::before{font-family:FontAwesome;content:'\f071';margin-right:5px}.form___lDFka .fieldWrapperRadio___x18VG>div{display:flex;flex-direction:row}.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}
 

package/dist/index.js

@@ -768,8 +768,7 @@ class StripeProvider {
     dispatch: _dispatch
   }) {
     stripe_provider_defineProperty(this, "payTicket", ({
-      elements = null,
-      paymentMethod = null,
+      token = null,
       stripe = null,
       zipCode = null
     }) => async dispatch => {
@@ -827,19 +826,20 @@ class StripeProvider {
       } // regular flow
 
 
-      stripe.confirmPayment({
-        elements,
-        clientSecret: this.reservation.payment_gateway_client_token,
-        confirmParams: {
-          return_url: `${window.location.origin}/a/my-tickets/`,
-          payment_method: paymentMethod.id
-        },
-        redirect: "if_required"
+      const {
+        id
+      } = token;
+      stripe.confirmCardPayment(this.reservation.payment_gateway_client_token, {
+        payment_method: {
+          card: {
+            token: id
+          }
+        }
       }).then(result => {
         if (result.error) {
           // Reserve error.message in your UI.
-          external_sweetalert2_default().fire(result.error.message, "Please retry purchase.", "warning");
-          this.dispatch(changeStep(1));
+          external_sweetalert2_default().fire(result.error.message, 'Please retry purchase.', 'warning');
+          this.dispatch(changeStep(STEP_PERSONAL_INFO));
           this.dispatch(removeReservedTicket());
           this.dispatch(stopWidgetLoading());
         } else {
@@ -847,7 +847,7 @@ class StripeProvider {
           )(params)(this.dispatch).then(payload => {
             this.dispatch(stopWidgetLoading());
             this.dispatch((0,actions_namespaceObject.createAction)(CLEAR_RESERVATION)({}));
-            this.dispatch(changeStep(3));
+            this.dispatch(changeStep(STEP_COMPLETE));
             return payload;
           }).catch(e => {
             this.dispatch(stopWidgetLoading());
@@ -856,7 +856,7 @@ class StripeProvider {
         }
       }).catch(e => {
         this.dispatch(removeReservedTicket());
-        this.dispatch(changeStep(1));
+        this.dispatch(changeStep(STEP_PERSONAL_INFO));
         this.dispatch(stopWidgetLoading());
         return e;
       });
@@ -2201,61 +2201,45 @@ const StripeForm = ({
   const onSubmit = async (data, ev) => {
     setStripeErrors({});
 
-    if (!stripe || !elements) {
+    if (!stripe) {
       // Stripe.js has not loaded yet. Make sure to disable
       // form submission until Stripe.js has loaded.
       return;
     }
 
     const btn = document.getElementById('payment-form-btn');
-    if (btn) btn.disabled = true; // Trigger form validation and wallet collection
+    if (btn) btn.disabled = true;
+    const cardElement = elements.getElement(react_stripe_js_namespaceObject.CardNumberElement); // @see https://stripe.com/docs/js/tokens_sources/create_token?type=cardElement
 
     const {
-      error: submitError
-    } = await elements.submit();
+      error,
+      token
+    } = await stripe.createToken(cardElement, {
+      name: `${reservation.owner_first_name} ${reservation.owner_last_name}`,
+      address_line1: userProfile.address1 || '',
+      address_line2: userProfile.address2 || '',
+      address_city: userProfile.locality || '',
+      address_state: userProfile.region || '',
+      address_zip: data.zipCode,
+      address_country: userProfile.country || '',
+      email: userProfile.email
+    });
 
-    if (submitError) {
+    if (token) {
+      cardElement.update({
+        disabled: true
+      });
+      payTicket(provider, {
+        token,
+        stripe,
+        zipCode: data.zipCode
+      });
       return;
     }
 
-    try {
-      // Create a payment method using PaymentElement
-      const {
-        paymentMethod,
-        error
-      } = await stripe.createPaymentMethod({
-        elements
-      });
-
-      if (error) {
-        if (stripeErrorCodeMap[error.code]) {
-          setStripeErrors({
-            [stripeErrorCodeMap[error.code].field]: stripeErrorCodeMap[error.code].message || error.message
-          });
-        }
+    if (error) {
+      if (btn) btn.disabled = false;
 
-        if (btn) btn.disabled = false;
-      } else {
-        // Send the paymentMethod ID to your server
-        if (paymentMethod) {
-          payTicket(provider, {
-            elements,
-            paymentMethod,
-            stripe,
-            zipCode: data.zipCode
-          });
-        } else if (error) {
-          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");
-          }
-        }
-      }
-    } catch (error) {
-      // setPaymentError('Error processing payment');
       if (stripeErrorCodeMap[error.code]) {
         setStripeErrors({
           [stripeErrorCodeMap[error.code].field]: stripeErrorCodeMap[error.code].message || error.message
@@ -2271,11 +2255,42 @@ const StripeForm = ({
     className: stripe_form_index_module.form,
     id: "payment-form",
     onSubmit: handleSubmit(onSubmit)
-  }, /*#__PURE__*/external_react_default().createElement(react_stripe_js_namespaceObject.PaymentElement, {
+  }, /*#__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("div", {
+  }), /*#__PURE__*/external_react_default().createElement("i", {
+    className: "fa fa-credit-card"
+  })), 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,
+      placeholder: 'MM / YY *'
+    }
+  })), 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,
+      placeholder: 'CVC *'
+    }
+  })), 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
@@ -2319,22 +2334,18 @@ const stripe_component_StripeProvider = ({
 }) => {
   const stripePromise = (0,external_react_.useMemo)(() => (0,stripe_js_namespaceObject.loadStripe)(providerKey), [providerKey]);
   const options = {
-    fonts: stripeOptions?.fonts,
-    mode: 'payment',
-    paymentMethodCreation: 'manual',
-    currency: reservation?.currency.toLowerCase(),
-    amount: reservation?.amount_in_cents
+    fonts: stripeOptions?.fonts
   };
-  return reservation ? /*#__PURE__*/external_react_default().createElement(react_stripe_js_namespaceObject.Elements, {
-    stripe: stripePromise,
-    options: options
+  return /*#__PURE__*/external_react_default().createElement(react_stripe_js_namespaceObject.Elements, {
+    options: options,
+    stripe: stripePromise
   }, /*#__PURE__*/external_react_default().createElement(stripe_form, {
     reservation: reservation,
     payTicket: payTicket,
     userProfile: userProfile,
     stripeOptions: stripeOptions,
     provider: provider
-  })) : /*#__PURE__*/external_react_default().createElement("div", null, "Loading...");
+  }));
 };
 
 /* harmony default export */ const stripe_component = (stripe_component_StripeProvider);
@@ -3635,6 +3646,9 @@ const RegistrationLite = _ref => {
     publicKey,
     provider
   } = getCurrentProvider(summitData);
+  const allowedTicketTypes = ticketTaxesLoaded ? ticketTypes.filter(tt => tt.sales_start_date === null && tt.sales_end_date === null || nowUtc >= tt.sales_start_date && nowUtc <= tt.sales_end_date) : [];
+  const noAvailableTickets = (0,external_react_.useMemo)(() => profileData && ticketTaxesLoaded && !ticketTaxesError && allowedTicketTypes.length === 0 && step !== STEP_COMPLETE, [allowedTicketTypes]);
+  const alreadyOwnedTickets = (0,external_react_.useMemo)(() => profileData && ticketTaxesLoaded && !ticketTaxesError && allowedTicketTypes.length > 0 && ownedTickets.length > 0, [ownedTickets, allowedTicketTypes]);
   (0,external_react_.useEffect)(() => {
     if (profileData) loadProfileData(profileData);
   }, [profileData]); // just initial load ( once )
@@ -3721,7 +3735,6 @@ const RegistrationLite = _ref => {
 
 
   if (ticketTypes.length === 0 && !requestedTicketTypes && profileData) return null;
-  const allowedTicketTypes = ticketTaxesLoaded ? ticketTypes.filter(tt => tt.sales_start_date === null && tt.sales_end_date === null || nowUtc >= tt.sales_start_date && nowUtc <= tt.sales_end_date) : [];
   return /*#__PURE__*/external_react_default().createElement("div", {
     id: `${general_module.modal}`,
     className: "modal is-active"
@@ -3750,7 +3763,7 @@ const RegistrationLite = _ref => {
   })), profileData && ticketTaxesError && /*#__PURE__*/external_react_default().createElement(ticket_taxes_error, {
     ticketTaxesErrorMessage: ticketTaxesErrorMessage,
     retryTicketTaxes: () => handleGetTicketTypesAndTaxes(summitData?.id)
-  }), profileData && ticketTaxesLoaded && !ticketTaxesError && allowedTicketTypes.length === 0 && step !== STEP_COMPLETE && /*#__PURE__*/external_react_default().createElement(no_allowed_tickets, {
+  }), noAvailableTickets && /*#__PURE__*/external_react_default().createElement(no_allowed_tickets, {
     noAllowedTicketsMessage: noAllowedTicketsMessage
   }), !ticketTaxesError && /*#__PURE__*/external_react_default().createElement("div", {
     className: general_module.stepsWrapper
@@ -3775,7 +3788,7 @@ const RegistrationLite = _ref => {
     idpLogoLight: idpLogoLight,
     idpLogoDark: idpLogoDark,
     idpLogoAlt: idpLogoAlt
-  }), profileData && step !== STEP_COMPLETE && /*#__PURE__*/external_react_default().createElement((external_react_default()).Fragment, null, ownedTickets.length > 0 && /*#__PURE__*/external_react_default().createElement(ticket_owned, {
+  }), profileData && step !== STEP_COMPLETE && /*#__PURE__*/external_react_default().createElement((external_react_default()).Fragment, null, alreadyOwnedTickets && /*#__PURE__*/external_react_default().createElement(ticket_owned, {
     ownedTickets: ownedTickets
   }), /*#__PURE__*/external_react_default().createElement(ticket_type, {
     allowedTicketTypes: allowedTicketTypes,