feat: Recreate free order buying process (#4569)

app/components/public/ticket-list.js

@@ -18,7 +18,8 @@ export default Component.extend(FormMixin, {
       && !this.authManager.currentUser.isVerified;
   }),
 
-  shouldDisableOrderButton: computed('hasTicketsInOrder', 'isDonationPriceValid', function() {
+  shouldDisableOrderButton: computed('hasTicketsInOrder', 'isDonationPriceValid', 'isUnverified', function() {
+    if (this.isUnverified) {return true}
     let quantityDonation = sumBy(this.donationTickets.toArray(),
       donationTicket => (donationTicket.orderQuantity || 0));
     if (quantityDonation > 0) {

app/components/unverified-user-message.hbs

@@ -13,7 +13,7 @@
             {{#if (eq this.session.currentRouteName 'events.view.index')}}
               {{t 'To make your event live, please verify your account by clicking on the confirmation link that has been emailed to you.'}}
             {{else}}
-              {{t 'Your account is unverified. Please verify by clicking on the confirmation link that has been emailed to you.'}}
+              {{t 'Your account is unverified.'}} {{@extraMessage}} {{t 'Please verify by clicking on the confirmation link that has been emailed to you.'}}
             {{/if}}
           </div>
           <p>{{t 'Did not get the email?'}} <a href="#" onclick={{action 'sendConfirmationMail'}}>{{t 'Please click here to resend the confirmation mail.'}}</a></p>

app/controllers/public/index.js

@@ -104,6 +104,7 @@ export default class IndexController extends Controller {
       this.set('orderInput', orderInput);
     }
     if (!this.session.isAuthenticated) {
+      this.set('userExists', false);
       this.set('isLoginModalOpen', true);
       return;
     }

app/styles/partials/utils.scss

@@ -39,3 +39,7 @@
 .m-0 {
   margin: 0 !important;
 }
+
+.m-2 {
+  margin: .5rem;
+}

app/templates/components/forms/orders/guest-order-form.hbs

@@ -6,7 +6,12 @@
   {{/if}}
   <h4 class="ui header">{{t 'Please enter your email address to continue.'}}</h4>
   <div class="field">
-    <Input @type="text" @name="email" @value={{this.email}} @disabled={{this.userExists}} placeholder={{t "Email Address"}} />
+    <div class="ui icon input">
+      <Input @type="text" @name="email" @value={{this.email}} @disabled={{this.userExists}} placeholder={{t "Email Address"}} />
+      {{#if this.userExists}}
+        <i class="circular undo link icon" role="button" onclick={{action (mut this.userExists) false}}></i>
+      {{/if}}
+    </div>
   </div>
   {{#if this.userExists}}
     <div class="ui text muted">{{t 'You have previously registered with this email address.'}}</div>

app/templates/public/index.hbs

@@ -31,6 +31,7 @@
             @errorMessage={{this.errorMessage}}
             @save="save" />
         </div>
+        <UnverifiedUserMessage class="m-2" @padless={{true}} @extraMessage={{t 'To place a ticket order: '}} />
       </div>
     </div>
     <div class="ui hidden divider"></div>

tests/integration/components/unverified-user-message-test.js

@@ -40,6 +40,6 @@ module('Integration | Component | unverified user message', function(hooks) {
     });
     this.set('isMailSent', false);
     await render(hbs`{{unverified-user-message session=session authManager=authManager isMailSent=isMailSent}}`);
-    assert.ok(this.element.innerHTML.trim().includes('Your account is unverified. Please verify by clicking on the confirmation link that has been emailed to you.'));
+    assert.dom(this.element).includesText('Your account is unverified. Please verify by clicking on the confirmation link that has been emailed to you.');
   });
 });