Redesign ticket in the email confirmation and UI changes to boxoffice confirm screen.

boxoffice/mailclient.py

@@ -86,7 +86,7 @@ def send_ticket_assignment_mail(line_item_id):
         order = line_item.order
         subject = order.item_collection.title + ": Here's your ticket"
         msg = Message(subject=subject, recipients=[line_item.current_assignee.email], bcc=[order.buyer_email])
-        html = email_transform(render_template('ticket_assignment_mail.html', order=order, org=order.organization, line_item=line_item, base_url=app.config['BASE_URL']))
+        html = email_transform(render_template('ticket_assignment_mail.html', org=order.organization, item_collection=order.item_collection, order=order, line_item=line_item, base_url=app.config['BASE_URL']))
         msg.html = html
         msg.body = html2text(html)
         mail.send(msg)

boxoffice/models/item.py

@@ -17,6 +17,7 @@ class Item(BaseScopedNameMixin, db.Model):
     __table_args__ = (db.UniqueConstraint('item_collection_id', 'name'),)
 
     description = MarkdownColumn('description', default=u'', nullable=False)
+    details = db.Column(JsonDict, server_default='{}', nullable=False)
     seq = db.Column(db.Integer, nullable=False)
 
     item_collection_id = db.Column(None, db.ForeignKey('item_collection.id'), nullable=False)

boxoffice/models/item_collection.py

@@ -1,6 +1,6 @@
 # -*- coding: utf-8 -*-
 
-from ..models import db, BaseScopedNameMixin, Organization, MarkdownColumn
+from ..models import db, JsonDict, BaseScopedNameMixin, Organization, MarkdownColumn
 
 __all__ = ['ItemCollection']
 
@@ -14,6 +14,7 @@ class ItemCollection(BaseScopedNameMixin, db.Model):
     __table_args__ = (db.UniqueConstraint('organization_id', 'name'),)
 
     description = MarkdownColumn('description', default=u'', nullable=False)
+    details = db.Column(JsonDict, server_default='{}', nullable=False)
 
     organization_id = db.Column(db.Integer, db.ForeignKey('organization.id'), nullable=False)
     organization = db.relationship(Organization, backref=db.backref('item_collections', cascade='all, delete-orphan'))

boxoffice/siteadmin.py

@@ -23,6 +23,7 @@ class ItemCollectionModelView(SiteAdminModelView):
     column_filters = ['organization']
     column_list = ('id', 'title')
     form_excluded_columns = ['parent', 'items', 'orders', 'categories', 'created_at', 'updated_at']
+    form_overrides = dict(details=JSONField)
 
 
 class CategoryModelView(SiteAdminModelView):
@@ -40,7 +41,7 @@ class ItemModelView(SiteAdminModelView):
     column_searchable_list = ['title']
     column_list = ('id', 'title')
     form_excluded_columns = ['parent', 'line_items', 'created_at', 'updated_at']
-    form_overrides = dict(assignee_details=JSONField)
+    form_overrides = dict(assignee_details=JSONField, details=JSONField)
 
 
 class PriceModelView(SiteAdminModelView):

boxoffice/templates/boxoffice.html

@@ -172,31 +172,52 @@ <h1 class="category-heading">{{title}}</h1>
     {{elseif id === 'boxoffice-confirm' && id === activeTab}}
       <div id='{{id}}' class="boxoffice-section clearfix" intro='fly:{"x":600,"y":"0"}'>
         {{#section}}
-          <p class="confirmation-icon"><i class="fa fa-check-circle"></i></p>
-          <p class="confirmation-header">Thank you for your order!</p>
-          <div class="confirmation-msg">
-            <p class="">We’ve mailed you the cash receipt.</p>
-            <div class="receipt-btn-wrapper">
-              <a href="{{ cashReceiptURL }}" target="_blank" class="boxoffice-button boxoffice-button-action receipt-button" on-click="fire('eventAnalytics','view cash receipt', 'cash receipt')">See cash receipt</a>
-              <a href="{{ attendeeAssignmentURL }}" target="_blank" class="boxoffice-button boxoffice-button-action receipt-button" on-click="fire('eventAnalytics','fill attendee details', 'attendee details')">Fill attendee details</a>
-            </div>
-            <div class="social-icons">
-              <p>Tell your friends!</p>
-              <span class="tweet-button">
-              <a href="https://twitter.com/share" class="twitter-share-button" data-text="Yay! I'm attending {{eventTitle}}" data-hashtags="HasGeek{{#if eventHashtag}}, {{eventHashtag}}{{/if}}">Tweet</a>
-              </span>
-              <div class="fb-share-button pad-half" data-layout="button"></div>
-              <div id="fb-root"></div>
-              <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
-              <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
-            </div>
+          <div>
+            <p class="confirmation-msg">Thank you for your order! We’ve mailed you the cash receipt.</p>
+            <p class="confirmation-header">Register</p>
+            <p class="confirmation-msg">Almost done! We need a few more details before we can print your badge.</p>
+            <a href="{{ attendeeAssignmentURL }}" target="_blank">
+              <div class="ticket-wrapper">
+                <div class="ticket">
+                  <div class="header">
+                    {{#if eventDetails.logo}}
+                      <img src="{{ eventDetails.logo }}" class="logo"/>
+                    {{/if}}
+                    <div class="event">
+                      <p class="event-title">{{ eventTitle }}</p>
+                      <p class="event-date">
+                      {{#if getConfirmedTicket(order.line_items).item_details }}
+                        <span>{{ getConfirmedTicket(order.line_items).item_details.date }}</span>
+                        &nbsp; &#124; &nbsp;<span>{{ getConfirmedTicket(order.line_items).item_details.time }}</span>
+                      {{/if}}
+                      </p>
+                    </div>
+                  </div>
+                  <div class="ticket-body">
+                    <p class="ticket-form-label">Name</p>
+                    <p class="ticket-input"><span class="cursor">&#124;</span></p>
+                    <p class="ticket-form-label">Company</p>
+                    <p class="ticket-input"></p>
+                    {{#if getConfirmedTicket(order.line_items).item_details }}
+                      <p class="ticket-form-label">Venue</p>
+                      <p class="ticket-field-value">{{ getConfirmedTicket(order.line_items).item_details.venue }}</p>
+                    {{/if}}
+                    <p class="ticket-form-label">Ticket</p>
+                    <p class="ticket-field-value">{{ getConfirmedTicket(order.line_items).item_title }}</p>
+                  </div>
+                </div>
+              </div>
+            </a>
+            <p class="fill-btn-wrapper">
+              <a href="{{ attendeeAssignmentURL }}" target="_blank" class="boxoffice-button boxoffice-button-action" on-click="fire('eventAnalytics','fill attendee details', 'attendee details')">Fill attendee details</a>
+            </p>
           </div>
         {{/section}}
       </div>      
     {{/if}}
   {{/}}
 </div>
-{%endraw%}
+
 <style>
   #boxoffice-widget {
     max-width: 1000px;
@@ -777,65 +798,140 @@ <h1 class="category-heading">{{title}}</h1>
     top: 43%;
     left: 48%;
   }
-  .confirmation-icon {
-    font-size: 50px;
-    color: green;
-    text-align: center;
-    line-height: 1;
-    margin: 20px 0 0;
-  }
   .confirmation-header {
     font-size: 24px;
-    color: green;
     text-align: center;
-    margin: 20px 0;
+    margin: 15px 0;
   }
   .confirmation-msg {
     font-size: 16px;
     text-align: center;
   }
   @media (min-width: 768px) {
-    .confirmation-icon {
-      font-size: 75px;
-    }
     .confirmation-header {
       font-size: 30px;
       margin-bottom: 20px;
     }
     .confirmation-msg {
       font-size: 18px;
-      line-height: 1.7;
+      line-height: 1;
       max-width: 800px;
       margin: auto;
     }
   }
-  .name {
-    text-align: left;
-    margin: 0;
+  .ticket-wrapper {
+    width: 300px;
+    margin: 25px auto 15px;
+    max-width: 350px;
+    border-radius: 5px;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
   }
-  .receipt-button {
-    margin: 10px;
-    display: inline-block;
+  .ticket {
+    position: relative;
   }
-  .receipt-button:hover,
-  .receipt-button:focus {
-    background-color: inherit;
-    color: inherit;
-    border-color: inherit;
-    border-bottom: 3px solid;
+  @media (min-width: 360px) {
+    .ticket-wrapper {
+      width: 350px;
+    }
   }
-  .receipt-btn-wrapper, .social-icons {
-    text-align: center;
+  .header {
+    background-color: #856A91;
+    color: #fff;
+    border-radius: 5px 5px 0 0;
+    padding: 15px;
+    min-height: 70px;
+  }
+  {{#if tabs.confirm.section.eventDetails}}
+    .header {
+      background-color: {{ tabs.confirm.section.eventDetails.banner_color }};
+      color: {{ tabs.confirm.section.eventDetails.font_color }};
+    }
+  {{/if}}
+  .logo {
+    float: left;
+    width: 10%;
+    min-width: 60px;
   }
-  .fb-share-button {
-    display: inline-block;
+  .event {
+    float: left;
+    margin-left: 15px;
+  }
+  .event-title {
+    font-size: 20px;
     line-height: 1;
-    padding: 0px 0px 0px 10px !important;
-    top: -2px;
+    margin: 0 0 5px;
   }
-  .tweet-button {
+  .event-date {
+    font-size: 14px;
     line-height: 1;
-    position: relative;
-    top: 2px;
+    margin: 0 0 10px;
+    text-align: left;
+  }
+  .ticket-body {
+    background-color: #f5f6f8;
+    border-radius: 0 0 5px 5px;
+    padding: 15px;
+    min-height: 50px;
+  }
+  .ticket-form-label {
+    font-size: 15px;
+    color: #b8b9b9;
+    margin: 10px 0;
+    text-align: left;
+  }
+  .ticket-input {
+    border-bottom: 1px solid #b8b9b9;
+    border-radius: 0;
+    font-size: 15px;
+    height: 20px;
+    margin: 10px 0;
+  }
+  .ticket-field-value {
+    font-size: 15px;
+    color: #333;
+    text-align: left;
+  }
+  .fill-btn-wrapper {
+    margin: 25px auto 15px;
+    text-align: center;
+  }
+  .cursor {
+    -webkit-animation: 1s blink step-end infinite;
+    -moz-animation: 1s blink step-end infinite;
+    -o-animation: 1s blink step-end infinite;
+    animation: 1s blink step-end infinite;
+  }
+  @-webkit-keyframes "blink" {
+    from, to {
+      color: transparent;
+    }
+    50% {
+      color: black;
+    }
+  }
+  @-moz-keyframes blink {
+    from, to {
+      color: transparent;
+    }
+    50% {
+      color: black;
+    }
+  }
+  @-o-keyframes "blink" {
+    from, to {
+      color: transparent;
+    }
+    50% {
+      color: black;
+    }
+  }
+  @keyframes "blink" {
+    from, to {
+      color: transparent;
+    }
+    50% {
+      color: black;
+    }
   }
 </style>
+{%endraw%}

boxoffice/templates/order_confirmation_mail.html

@@ -136,9 +136,9 @@
 
     <p>Hello {{ order.buyer_fullname }},</p>
 
-    <p class="content">Thanks for your interest in {{ order.item_collection.title }}.</p>
+    <p class="content">Thanks for your interest in {{ order.item_collection.title }}. Please take a moment to tell us who will be attending on your ticket(s).</p>
 
-    <p><a class="button" href={{"{base_url}/order/{access_token}/ticket".format(base_url=base_url, access_token=order.access_token)}} target="_blank">See ticket</a></p>
+    <p><a class="button" href={{"{base_url}/order/{access_token}/ticket".format(base_url=base_url, access_token=order.access_token)}} target="_blank">Fill attendee details</a></p>
 
     <h1 class="header">Cash Receipt</h1>