feat: implementation of paid route for event invoices

app/router.js

@@ -213,6 +213,7 @@ router.map(function() {
 
   this.route('event-invoice', function() {
     this.route('review', { path: '/:invoice_identifier/review' });
+    this.route('paid', { path: '/:invoice_identifier/paid' });
   });
 });
 

app/routes/event-invoice/paid.js

@@ -0,0 +1,24 @@
+import Route from '@ember/routing/route';
+
+export default class extends Route {
+
+  titleToken(model) {
+    let invoice_identifier = model.get('identifier');
+    return this.l10n.t(`Paid Event Invoice -${invoice_identifier}`);
+  }
+
+  model(params) {
+    return this.store.findRecord('event-invoice', params.invoice_identifier, {
+      include : 'event,user',
+      reload  : true
+    });
+  }
+
+  afterModel(model) {
+    if (model.get('status') === 'due') {
+      this.transitionTo('event-invoice.review', model.get('identifier'));
+    } else if (model.get('status') === 'paid') {
+      this.transitionTo('event-invoice.paid', model.get('identifier'));
+    }
+  }
+}

app/templates/components/event-invoice/billing-info.hbs

@@ -0,0 +1,49 @@
+<div class="ui segments">
+  <div class="ui secondary segment">
+    <h3 class="weight-400">{{t 'Billing Info'}}</h3>
+  </div>
+  <div class="ui padded segment">
+    <div class="ui list">
+      <div class="item">
+        <strong>{{t 'From'}}:</strong> {{user.billingContactName}}
+      </div>
+      <div class="item">
+        <strong>{{t 'Phone'}}:</strong> {{user.billingPhone}}
+      </div>
+      <div class="item">
+        <strong>{{t 'Email'}}:</strong> {{user.email}}
+      </div>
+      <div class="item">
+        <strong>{{t 'Billing Address'}}:</strong> {{user.billingAddress}}
+      </div>
+      <div class="item">
+        <strong>{{t 'Zip Code'}}:</strong> {{user.billingZipCode}}
+      </div>
+      <div class="item">
+        <strong>{{t 'Country'}}:</strong> {{user.billingCountry}}
+      </div>
+    </div>
+  </div>
+  <div class="ui padded segment">
+    <div class="ui list">
+      <div class="item">
+        <strong>{{t 'To'}}:</strong> {{this.settings.adminBillingContactName}}
+      </div>
+      <div class="item">
+        <strong>{{t 'Company'}}:</strong> {{this.settings.adminCompany}}
+      </div>
+      <div class="item">
+        <strong>{{t 'Phone'}}:</strong> {{this.settings.adminBillingPhone}}
+      </div>
+      <div class="item">
+        <strong>{{t 'Email'}}:</strong> {{this.settings.adminBillingEmail}}
+      </div>
+      <div class="item">
+        <strong>{{t 'Zip Code'}}:</strong> {{this.settings.adminBillingZip}}
+      </div>
+      <div class="item">
+        <strong>{{t 'Country'}}:</strong> {{this.settings.adminBillingCountry}}
+      </div>
+    </div>
+  </div>
+</div>

app/templates/components/event-invoice/event-info.hbs

@@ -0,0 +1,23 @@
+<div class="ui segments">
+  <div class="ui orange inverted segment center aligned">
+    <div class="ui inverted mini statistic horizontal">
+      <div class="value">
+        {{t 'Event Information'}}
+      </div>
+    </div>
+  </div>
+  <div class="ui secondary segment">
+    <h3 class="weight-400">{{t 'When & Where'}}</h3>
+  </div>
+  <div class="ui padded segment">
+    <strong>{{t 'At'}} {{event.locationName}}</strong>
+    <br>
+    <strong>{{t 'From'}}:</strong> {{header-date event.startsAt}}
+    <br>
+    <strong>{{t 'To'}}:</strong> {{header-date event.endsAt}}
+    {{#if event.ownerName}}
+      <br>
+      <strong>{{t 'Organized By'}}:</strong> {{event.ownerName}}
+    {{/if}}
+  </div>
+</div>

app/templates/components/event-invoice/invoice-summary.hbs

@@ -0,0 +1,35 @@
+<div class="ui segments">
+  <div class="ui green inverted segment center aligned">
+    <div class="ui inverted mini statistic horizontal">
+      <div class="value">
+        {{t 'Paid'}}
+      </div>
+      <div class="label">
+        {{t 'Your invoice payment completed successfully.'}}
+        <br>
+        {{t 'Find all the details related to your invoice below.'}}
+      </div>
+    </div>
+  </div>
+  <div class="ui secondary segment">
+    <h3 class="weight-400">{{t 'Invoice Details'}}</h3>
+  </div>
+  <table class="ui very basic tablet stackable table order-summary center aligned">
+    <thead>
+      <tr>
+        <th class="four wide">{{t 'Event Name'}}</th>
+        <th class="four wide">{{t 'Date Issued'}}</th>
+        <th class="four wide">{{t 'Date Completed'}}</th>
+        <th class="ui aligned two wide">{{t 'Amount Payable'}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{{event.name}}</td>
+        <td>{{moment-format data.createdAt 'MM/DD/YYYY'}}</td>
+        <td>{{moment-format data.completedAt 'MM/DD/YYYY'}}</td>
+        <td>{{currency-symbol eventCurrency}} {{format-number data.amount}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

app/templates/components/event-invoice/payee-info.hbs

@@ -0,0 +1,82 @@
+<form class="ui form">
+  <div class="ui segments">
+    <div class="ui aligned secondary segment">
+      <h3 class="weight-400">{{t 'Payee Information'}}</h3>
+    </div>
+    <div class="ui padded segment">
+      <h4 class="weight-300">
+        {{t 'Name '}}
+      </h4>
+      <span>
+        {{payer.firstName}} {{payer.lastName}}
+      </span>
+      <div class="ui divider"></div>
+
+      <h4 class="weight-300">
+        {{t 'Email '}}
+      </h4>
+      <span>
+        {{payer.email}}
+      </span>
+      {{#if (not-eq data.paymentMode 'free')}}
+        <div class="ui divider"></div>
+        {{#if (eq data.paymentMode 'paypal')}}
+          <h3 class="ui header">
+            <div class="content">
+              {{t 'Payment Mode'}}
+            </div>
+          </h3>
+          <img src="/images/payment-logos/paypal.png" alt="paypal" class="ui tiny image">
+          {{#if (eq data.status 'paid')}}
+            <div class="ui very relaxed divided list">
+              <div class="item">
+                <div class="content">
+                  <div class="header">
+                    {{t 'Transaction ID'}}
+                  </div>
+                  <div class="description">
+                    {{data.transactionId}}
+                  </div>
+                </div>
+              </div>
+            </div>
+          {{/if}}
+        {{else if (eq data.paymentMode 'stripe')}}
+          <h3 class="ui header">
+            <div class="content">{{t 'Payment Mode'}}</div>
+            <i class="big stripe icon"></i>
+
+          </h3>
+          {{#if (eq data.status 'paid')}}
+            <div class="ui very relaxed divided list">
+              <div class="item">
+                <div class="content">
+                  <div class="header">{{t 'Card Type'}}</div>
+                  <div class="description">
+                    {{#if (payment-icon data.brand)}}
+                      <i class="{{payment-icon data.brand}}"></i>
+                    {{else}}
+                      {{data.brand}}
+                    {{/if}}
+                  </div>
+                </div>
+              </div>
+              <div class="item">
+                <div class="content">
+                  <div class="header">{{t 'Card Number'}}</div>
+                  <div class="description">**** {{data.last4}}</div>
+                </div>
+              </div>
+              <div class="item">
+                <div class="content">
+                  <div class="header">{{t 'Exp Date'}}</div>
+                  <div class="description">{{data.expMonth}}/{{data.expYear}}</div>
+                </div>
+              </div>
+            </div>
+          {{/if}}
+        {{/if}}
+      {{/if}}
+    </div>
+  </div>
+</form>

app/templates/event-invoice/paid.hbs

@@ -0,0 +1,37 @@
+<div class="ui one column container stackable doubling left grid">
+  <div class="row print">
+    <div class="column">
+      <h2>{{model.event.name}}</h2>
+    </div>
+  </div>
+  <div class="row">
+    <div class="ten wide column print">
+      {{event-invoice/invoice-summary data=model
+                               event=model.event
+                               eventCurrency=model.event.paymentCurrency}}
+    </div>
+    <div class="mobile hidden six wide column">
+      {{event-invoice/event-info event=model.event}}
+    </div>
+  </div>
+  <div class="row">
+    <div class="column right aligned">
+      <button {{action 'downloadEventInvoice' model.event.name model.identifier }} class="ui labeled icon blue {{if isLoadingInvoice 'loading'}} button">
+        <i class="print alternate icon"></i>
+        {{t 'Print Invoice'}}
+      </button>
+    </div>
+  </div>
+  <div class="row">
+    <div class="ten wide column">
+      {{event-invoice/billing-info user=model.user}}
+    </div>
+    <div class="six wide column">
+      <div class="row">
+        <div class="mobile hidden row">
+          {{event-invoice/payee-info data=model payer=model.user}}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>