BV2-261 billing email validation

app/components/billing/first-plan.js

@@ -286,7 +286,23 @@ export default Component.extend({
     },
     togglePlanDetails() {
       this.set('planDetailsVisible', !this.planDetailsVisible);
-    }
+    },
+    validateBillingEmails(billingEmailField) {
+      if (!billingEmailField) {
+        return true;
+      }
+
+      const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+      const emails = billingEmailField.split(',').map(email => email.trim());
 
+      const invalidEmails = emails.filter(email => !emailRegex.test(email));
+
+      if (invalidEmails.length > 0) {
+        const invalidEmailsList = invalidEmails.join(', ');
+        return `The following email addresses are not valid: ${invalidEmailsList}`;
+      }
+
+      return true;
+    },
   }
 });

app/components/billing/payment-details-tab.js

@@ -152,6 +152,23 @@ export default Component.extend({
     onCaptchaResolved(reCaptchaResponse) {
       this.updatePaymentDetails.perform(reCaptchaResponse);
     },
+    validateBillingEmails(billingEmailField) {
+      if (!billingEmailField) {
+        return true;
+      }
+
+      const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+      const emails = billingEmailField.split(',').map(email => email.trim());
+
+      const invalidEmails = emails.filter(email => !emailRegex.test(email));
+
+      if (invalidEmails.length > 0) {
+        const invalidEmailsList = invalidEmails.join(', ');
+        return `The following email addresses are not valid: ${invalidEmailsList}`;
+      }
+
+      return true;
+    },
     submit() {
       if (!this.enableSubmit || this.disableForm) return;
       window.grecaptcha.execute();

app/templates/account-activation.hbs

@@ -14,8 +14,7 @@
 
    <layout.activation-section
   @isHeader={{false}}
-  > 
+  >
     <Billing::FirstPlan  @user={{this.user}}/>
-    <
   </layout.activation-section>
 </TravisLayout>

app/templates/components/billing/first-plan.hbs

@@ -24,7 +24,7 @@
   </div>
 
 
-  <div class='full-width cc-form-elem'>   
+  <div class='full-width cc-form-elem'>
     <form.field @label="Credit Card details"
       onSubmit={{perform this.createSubscription}} @required={{true}} @showRequiredMark={{true}} as |field|>
       <StripeCard  class="cc-form-internal" @onComplete={{action "complete" }} @options={{this.options}} as |stripeError|>
@@ -38,7 +38,7 @@
   <div class='full-width form-elem'>
 
     <form.field @label="Billing e-mail address" @value={{this.billingEmail}} @onChange={{action (mut
-      this.billingEmail)}} @required={{true}} @validator={{form-validator form.validators.email}}
+      this.billingEmail)}} @required={{true}} @validator={{action "validateBillingEmails"}}
       @showRequiredMark={{true}} as |field|>
       <field.input @type="text" />
     </form.field>
@@ -158,7 +158,7 @@
         {{#unless this.isTrial}}
         <p class="plan-desc">{{format-currency this.selectedPlan.startingPrice floor="true"}}{{ if this.selectedPlan.isAnnual '/annualy'
           '/monthly'}}</p>
-        
+
          <button class=" no-button plan-details" {{action 'togglePlanDetails' }}>
           Plan details </button>
         {{#if this.planDetailsVisible}}
@@ -174,7 +174,7 @@
           <p class='billing-plans__box-v2--desc cnowrap' data-test-selected-plan-os="true">
             <SvgImage @name="stage-passed" @class="icon icon-desc" />Linux, Windows, macOS, FreeBSD
           </p>
-          
+
           {{#if this.selectedPlan.hasOSSCreditAddons}}
           <p class='billing-plans__box-v2--desc' data-test-selected-plan-oss-credits="true">
             <SvgImage @name="stage-passed" @class="icon icon-desc" /> {{this.selectedPlan.publicCredits}} OSS Credits<span
@@ -218,7 +218,7 @@
   <div class="align-left font-size-s" id="first-plan-charge-info">
     {{#if this.isTrial}}
       <b class="font-bold">We will charge you $1 and refund you in 7 days</b>. This is needed to make sure your card
-  
+
       is valid. By clicking on "Verify Your Account" you agree to <a href="{{this.travisTermsUrl}}" class="travis-link"  target="_blank">Travis CI
         Terms and Privacy
         Policy</a>.
@@ -227,10 +227,10 @@
 
       will not be able to use Travis CI features.
     {{else}}
-  
+
       You'll be charged {{format-currency this.selectedPlan.startingPrice floor="true"}} {{ if
       this.selectedPlan.isAnnual 'annualy' 'monthly'}} until you cancel your subscription. Previous
-   
+
       charges won't be refunded when you cancel unless it's legally required. By clicking
       on "{{this.getActivateButtonText}}" you agree to <a href="{{this.travisTermsUrl}}" class="travis-link"  target="_blank">Travis CI Terms and Privacy
         Policy</a>.

app/templates/components/billing/payment-details-tab.hbs

@@ -49,7 +49,7 @@
           <p>{{stripeError.message}}</p>
         {{/if}}
       </StripeCard>
-  
+
       <form.field
         @label='Billing Email Address'
         @value={{this.billingInfo.billingEmail}}
@@ -58,11 +58,12 @@
         @disabled={{this.disableForm}}
         @showValidationStatusIcons={{false}}
         @onChange={{action (mut this.billingInfo.billingEmail)}}
+        @validator={{action "validateBillingEmails"}}
         as |Field|
       >
         <Field.input @name='billing_email_address'/>
       </form.field>
-  
+
       <form.field
         @label='Company Name'
         @value={{this.billingInfo.company}}
@@ -76,7 +77,7 @@
         <Field.input @name='company_name'/>
         <div class="travis-form__error-message">&nbsp;</div>
       </form.field>
-  
+
       <form.field
         @label='Street Address'
         @value={{this.billingInfo.address}}
@@ -89,7 +90,7 @@
       >
         <Field.input @name='address'/>
       </form.field>
-  
+
       <div class='flex flex--col flex-md-row'>
         <div class='full-width form-elem inline-form-elem'>
           <form.field
@@ -163,7 +164,7 @@
         </div>
         {{/if}}
       </div>
-  
+
       {{#if this.showNonZeroVatConfirmation}}
         <div class='flex justify-between items-center mb-8'>
           <div class='w-4/6 pr-2'>

tests/integration/components/billing/payment-test.js

@@ -32,7 +32,7 @@ module('Integration | Component | billing-payment', function (hooks) {
         firstName: '',
         lastName: '',
         companyName: '',
-        billingEmail: '',
+        billingEmail: '[email protected]',
         street: '',
         billingSuite: '',
         billingCity: '',