From 86bf404c31ba923b7487a8f3228399142e51071b Mon Sep 17 00:00:00 2001
From: Michael Evans <evansrichardmichael@gmail.com>
Date: Thu, 24 Feb 2022 15:13:10 -0700
Subject: [PATCH 1/3] style changes

---
 src/components/promos/PromoLinks.vue | 264 +++++++++++++++++----------
 1 file changed, 169 insertions(+), 95 deletions(-)

diff --git a/src/components/promos/PromoLinks.vue b/src/components/promos/PromoLinks.vue
index 8f6cdfd8..24b7a6f2 100644
--- a/src/components/promos/PromoLinks.vue
+++ b/src/components/promos/PromoLinks.vue
@@ -9,7 +9,17 @@
         <v-card class="promo-link-modal pa-7">
           <v-card-title>
             <span class="text-h5 font-weight-bold">New Promo Link</span>
-            <v-btn fab icon text absolute right top class="dialog-close-btn" @click="dialog = false"><v-icon>close</v-icon></v-btn>
+            <v-btn
+              fab
+              icon
+              text
+              absolute
+              right
+              top
+              class="dialog-close-btn"
+              @click="dialog = false"
+              ><v-icon>close</v-icon></v-btn
+            >
           </v-card-title>
           <v-card-text>
             <p class="mb-2">
@@ -119,21 +129,32 @@
                 <br />
                 <p>Period: February 2022</p>
                 <div class="available-reward-table d-flex justify-start col-12">
-                  <span class="text-h6 font-weight-light col-6 pt-0 pb-0">Goal</span>
-                  <span class="text-h6 font-weight-light col-6 pt-0 pb-0">Reward</span>
+                  <span class="text-h6 font-weight-light col-6 pt-0 pb-0"
+                    >Goal</span
+                  >
+                  <span class="text-h6 font-weight-light col-6 pt-0 pb-0"
+                    >Reward</span
+                  >
                 </div>
                 <v-divider></v-divider>
                 <div
                   v-for="reward in selectedWindow.rewards"
                   :key="reward.key"
-                  class="available-reward-table d-flex justify-start col-12">
-                  <span class="rewards-table-body-text col-6">{{reward.name.split('Reward:')[0]}}</span>
-                  <span class="rewards-table-body-text col-6">{{reward.name.split('Reward:')[1]}}</span>
+                  class="available-reward-table d-flex justify-start col-12"
+                >
+                  <span class="rewards-table-body-text col-6">{{
+                    reward.name.split('Reward:')[0]
+                  }}</span>
+                  <span class="rewards-table-body-text col-6">{{
+                    reward.name.split('Reward:')[1]
+                  }}</span>
                 </div>
               </div>
               <div v-else>
                 <div class="available-reward-table d-flex justify-start col-12">
-                  <span class="rewards-table-body-text pt-1">Please Select a Promo Length to view rewards</span>
+                  <span class="rewards-table-body-text pt-1"
+                    >Please Select a Promo Length to view rewards</span
+                  >
                 </div>
               </div>
             </div>
@@ -164,10 +185,26 @@
                 <v-icon x-large>note_add</v-icon><br />New Promo Link
               </div>
             </div>
-            <v-card v-for="pl in promoLinks" :key="pl.id" class="sale-card ma-2" :loading="loading">
+            <v-card
+              v-for="pl in promoLinks"
+              :key="pl.id"
+              class="sale-card ma-2"
+              :loading="loading"
+            >
               <v-tooltip bottom open-delay="350">
                 <template #activator="{ on, attrs }">
-                  <v-btn v-on="on" v-bind="attrs" fab text icon absolute top right class="template-btn" @click="handleTemplateBtnClick(pl.template)">
+                  <v-btn
+                    v-on="on"
+                    v-bind="attrs"
+                    fab
+                    text
+                    icon
+                    absolute
+                    top
+                    right
+                    class="template-btn"
+                    @click="handleTemplateBtnClick(pl.template)"
+                  >
                     <v-icon>info</v-icon>
                   </v-btn>
                 </template>
@@ -175,7 +212,7 @@
               </v-tooltip>
               <v-list-item two-line>
                 <v-list-item-content>
-                  <v-list-item-title class="text-h5">
+                  <v-list-item-title class="text-h5 px-7 pt-2">
                     {{ pl.name }}
                   </v-list-item-title>
 
@@ -183,22 +220,47 @@
                     <v-icon small color="#c44a42" class="pr-1 pb-1"
                       >calendar_today</v-icon
                     >
-                    {{ formatDate(pl.startTime) }} - {{ formatDate(pl.endTime) }}
+                    {{ formatDate(pl.startTime) }} -
+                    {{ formatDate(pl.endTime) }}
                   </v-list-item-subtitle>
                   <v-list-item-subtitle>{{ pl.email }} </v-list-item-subtitle>
                 </v-list-item-content>
               </v-list-item>
               <v-card-text class="reward-info">
-                <v-row v-if="pl.rewards && pl.rewards.length && progressToDisplay(pl.rewards)">
+                <v-row
+                  v-if="
+                    pl.rewards &&
+                    pl.rewards.length &&
+                    progressToDisplay(pl.rewards)
+                  "
+                >
                   <v-col cols="12" align="center">
-                    <h2 class="font-weight-bold">{{ progressToDisplay(pl.rewards).progression.earned }} PSV Earned</h2>
+                    <h2 class="font-weight-bold">
+                      {{ progressToDisplay(pl.rewards).progression.earned }} PSV
+                      Earned
+                    </h2>
                   </v-col>
                   <v-col cols="12" align="left">
-                    <p class="green--text" :class="{ 'hidden': !rewardToDisplay(pl.rewards) }">
-                        Earned: <span class="font-weight-bold" v-if="rewardToDisplay(pl.rewards)">{{ rewardToDisplay(pl.rewards).reward.name.split('Reward:')[1] }}</span>
+                    <p
+                      class="green--text"
+                      :class="{ hidden: !rewardToDisplay(pl.rewards) }"
+                    >
+                      Earned:
+                      <span
+                        class="font-weight-bold"
+                        v-if="rewardToDisplay(pl.rewards)"
+                        >{{
+                          rewardToDisplay(pl.rewards).reward.name.split(
+                            'Reward:'
+                          )[1]
+                        }}</span
+                      >
                     </p>
                     <p v-if="nextReward(pl.rewards)">
-                      Next: <span class="font-weight-bold">{{nextReward(pl.rewards).reward.name.split('Reward:')[1] }}</span>
+                      Next:
+                      <span class="font-weight-bold">{{
+                        nextReward(pl.rewards).reward.name.split('Reward:')[1]
+                      }}</span>
                     </p>
                   </v-col>
                   <!-- <v-col cols="12">
@@ -209,37 +271,48 @@
                   </v-col> -->
                 </v-row>
                 <v-row v-else class="text--center">
-                  <v-col cols="12">
-                    Progress Data Unavailable
-                  </v-col>
+                  <v-col cols="12"> Progress Data Unavailable </v-col>
                 </v-row>
                 <p class="font-weight-bold">{{ pl.email }}</p>
-                <v-row align="center" v-if="pl.rewards && pl.rewards.length && progressToDisplay(pl.rewards)">
+                <v-row
+                  align="center"
+                  v-if="
+                    pl.rewards &&
+                    pl.rewards.length &&
+                    progressToDisplay(pl.rewards)
+                  "
+                >
                   <v-col class="pb-0" cols="12">
                     <!-- <v-progress-linear :value="progressToDisplay(pl.rewards).progression.progress" :color="progressColor(pl, progressToDisplay(pl.rewards))" height="35" rounded>
                       <strong class="text-capitalize">{{ progressText(pl, progressToDisplay(pl.rewards)) }}</strong>
                     </v-progress-linear> -->
+                    <v-btn
+                      v-if="pl.isEligibleToClaim && pl.claimableRewards"
+                      class="claim-reward-btn"
+                      outlined
+                      block
+                    >
+                      Claim Rewards
+                    </v-btn>
                     <v-progress-linear
-                      :value="progressToDisplay(pl.rewards).progression.progress * 100"
+                      v-else
+                      :value="
+                        progressToDisplay(pl.rewards).progression.progress * 100
+                      "
                       :color="progressColor(pl, progressToDisplay(pl.rewards))"
                       height="35"
                       rounded
-                      class="card-progress-bar">
-                      <p
-                        v-if="pl.isEligibleToClaim && pl.claimableRewards"
-                        class="claim-reward-btn">
-                        Claim Rewards
-                      </p>
-                      <p v-else>
+                      class="card-progress-bar"
+                    >
+                      <p>
                         {{ progressText(pl, progressToDisplay(pl.rewards)) }}
                       </p>
                     </v-progress-linear>
                   </v-col>
                 </v-row>
                 <v-row align="center">
-                  <v-col>
+                  <v-col class="pt-0">
                     <v-text-field
-                      solo
                       color="black"
                       :value="createPromoLink(pl.key)"
                       readonly
@@ -294,28 +367,58 @@
         >Close</v-btn
       >
     </v-snackbar>
-    <v-dialog
-      v-model="showTemplateDialog"
-      width="400"
-    >
+    <!-- //* info modal -->
+    <v-dialog v-model="showTemplateDialog" width="400">
       <v-card id="template-card">
         <v-card-title class="text-h5 font-weight-bold" v-if="selectedTemplate">
-          {{selectedTemplate.name}}
-          <v-btn fab icon text absolute right top class="dialog-close-btn" @click="showTemplateDialog = false"><v-icon>close</v-icon></v-btn>
+          {{ selectedTemplate.name }}
+          <v-btn
+            fab
+            icon
+            text
+            absolute
+            right
+            top
+            class="dialog-close-btn"
+            @click="showTemplateDialog = false"
+            ><v-icon>close</v-icon></v-btn
+          >
         </v-card-title>
         <v-card-text v-if="selectedTemplate">
           <v-row>
             <v-col class="windows-title" cols="12">Length</v-col>
           </v-row>
           <v-row>
-            <v-col cols="12" v-for="window in selectedTemplate.windows" :key="window.key">
-              <v-row class="px-5">{{window.name}}</v-row>
+            <v-col
+              cols="12"
+              v-for="window in selectedTemplate.windows"
+              :key="window.key"
+            >
+              <v-row class="px-5">{{ window.name }}</v-row>
               <v-row>
                 <v-col class="rewards-title mt-5" cols="12">Rewards</v-col>
-                <v-col cols="12" v-for="reward in window.rewards" :key="reward.id">
-                  <v-row justify="space-around" class="px-2" v-if="reward && reward.metadata && reward.metadata.labels && reward.metadata.labels.en && marketKey">
-                    <v-col cols="4">{{reward.metadata.labels.en[marketKey].goal}}</v-col>
-                    <v-col cols="8">{{reward.metadata.labels.en[marketKey].reward}}</v-col>
+                <v-col
+                  cols="12"
+                  v-for="reward in window.rewards"
+                  :key="reward.id"
+                >
+                  <v-row
+                    justify="space-around"
+                    class="px-2"
+                    v-if="
+                      reward &&
+                      reward.metadata &&
+                      reward.metadata.labels &&
+                      reward.metadata.labels.en &&
+                      marketKey
+                    "
+                  >
+                    <v-col cols="4">{{
+                      reward.metadata.labels.en[marketKey].goal
+                    }}</v-col>
+                    <v-col cols="8">{{
+                      reward.metadata.labels.en[marketKey].reward
+                    }}</v-col>
                   </v-row>
                 </v-col>
               </v-row>
@@ -324,6 +427,7 @@
         </v-card-text>
       </v-card>
     </v-dialog>
+    <!-- //* end info modal -->
   </div>
 </template>
 <script>
@@ -337,7 +441,7 @@ export default {
   props: {
     promoLinks: Array,
     eventTemplate: Object,
-    loading: Boolean
+    loading: Boolean,
   },
   data: () => ({
     dialog: false,
@@ -359,7 +463,7 @@ export default {
       { text: 'PSV', value: 'psv' },
       { text: 'Reward', value: 'reward' },
       { text: 'Progress', value: 'progress', sortable: false },
-      { text: 'Actions', value: 'actions', sortable: false }
+      { text: 'Actions', value: 'actions', sortable: false },
     ],
     desserts: [],
     editedIndex: -1,
@@ -373,8 +477,8 @@ export default {
       hostEmail: '',
       hostName: '',
       date: moment().format('MMMM DD, YYYY'),
-      time: moment().format('HH:mm a')
-    }
+      time: moment().format('HH:mm a'),
+    },
   }),
   computed: {
     ...mapGetters(['memberId', 'displayName', 'slug', 'market']),
@@ -397,7 +501,7 @@ export default {
       const mappedWindows = windows.map((el) => {
         return {
           text: el.name,
-          value: el.key
+          value: el.key,
         }
       })
 
@@ -415,7 +519,7 @@ export default {
       return this.eventTemplate.windows.find(
         (el) => el.key === this.promoWindow
       )
-    }
+    },
   },
   methods: {
     validateForm() {
@@ -439,10 +543,7 @@ export default {
       if (reward.progression.progress >= 100) {
         return 'green'
       }
-      if (
-        reward.progression.progress < 100 &&
-        pl.status === 'FINISHED'
-      ) {
+      if (reward.progression.progress < 100 && pl.status === 'FINISHED') {
         return 'orange'
       }
       if (pl.status === 'SCHEDULED') {
@@ -454,7 +555,7 @@ export default {
       if (!rewards || !rewards.length) {
         return
       }
-      const rewardToDisplay = rewards.filter(el => el.progression.awarded)
+      const rewardToDisplay = rewards.filter((el) => el.progression.awarded)
 
       return rewardToDisplay.pop()
     },
@@ -462,7 +563,7 @@ export default {
       if (!rewards || !rewards.length) {
         return
       }
-      const awardedIndex = _.findIndex(rewards, el => el.progression.awarded)
+      const awardedIndex = _.findIndex(rewards, (el) => el.progression.awarded)
       if (rewards[awardedIndex + 1]) {
         return rewards[awardedIndex + 1]
       }
@@ -471,7 +572,7 @@ export default {
       if (!rewards || !rewards.length) {
         return
       }
-      const progressToDisplay = rewards.filter(el => el.progression.visible)
+      const progressToDisplay = rewards.filter((el) => el.progression.visible)
 
       return progressToDisplay.pop()
     },
@@ -512,9 +613,9 @@ export default {
       }
 
       try {
-        const parsedDate = this.$moment.utc(
-          this.editedItem.date + 'T' + this.editedItem.time
-        ).toISOString()
+        const parsedDate = this.$moment
+          .utc(this.editedItem.date + 'T' + this.editedItem.time)
+          .toISOString()
         await this.$apollo.mutate({
           mutation: CreateMemberEvent,
           client: 'federated',
@@ -529,16 +630,16 @@ export default {
                 {
                   pii: { email: this.editedItem.hostEmail },
                   label: this.editedItem.hostName,
-                  role: 'HOST'
+                  role: 'HOST',
                 },
                 {
                   memberId: this.memberId,
                   label: this.displayName,
-                  role: 'ORGANIZER'
-                }
-              ]
-            }
-          }
+                  role: 'ORGANIZER',
+                },
+              ],
+            },
+          },
         })
         this.snackbarText = 'Promo Link Created!'
         this.close()
@@ -589,8 +690,8 @@ export default {
     handleTemplateBtnClick(template) {
       this.showTemplateDialog = true
       this.selectedTemplate = template
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -624,19 +725,9 @@ p {
 }
 
 /* START fine tuning spacing aka: vuetify override  */
-
-.promo-link-modal .v-card__text {
-  padding: 0 10px;
-}
-.promo-link-modal .v-card__title {
-  padding: 10px 10px 0;
-}
-.promo-link-modal .v-card__actions {
-  padding: 5px 10px 10px;
-}
 .promo-form-input.col.col-12 {
   padding-top: 0;
-  padding-bottom: 0;
+  padding-bottom: 0px;
 }
 .date-picker-input .col,
 .col-12 {
@@ -688,24 +779,7 @@ p {
   font-weight: 600;
 }
 
-.claim-reward-btn {
-  /* padding: 5px 110px; */
-  padding: 6px 0;
-  height: 35px;
-  width: 318px;
-  cursor: pointer;
-  /* border: solid 1px rgba(255, 255, 255, 0); */
-  background-color: rgba(255, 255, 255, 0.5);
-  border: rgba(0, 0, 0, 0.8) 1px solid;
-  border-radius: 4px;
-}
-.claim-reward-btn:hover {
-  /* background-color: rgba(255, 153, 0, 0.7); */
-  background-color: rgba(255, 255, 255, 0.8);
-  border: rgba(0, 0, 0, 0.8) 1px solid;
-  border-radius: 4px;
-}
-.hidden{
+.hidden {
   visibility: hidden;
 }
 </style>

From d629636c4b9377393b266326ea97fc9f185156df Mon Sep 17 00:00:00 2001
From: Michael Evans <evansrichardmichael@gmail.com>
Date: Fri, 25 Feb 2022 14:03:59 -0700
Subject: [PATCH 2/3] prog button

---
 src/components/promos/PromoLinks.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/promos/PromoLinks.vue b/src/components/promos/PromoLinks.vue
index 0f229987..fc6d970f 100644
--- a/src/components/promos/PromoLinks.vue
+++ b/src/components/promos/PromoLinks.vue
@@ -350,7 +350,11 @@
               <v-card-actions>
                 <!-- <v-btn text :disabled="saleProgressText(pl) === 'Complete'">Resend Link</v-btn> -->
                 <v-btn text disabled>Resend Link</v-btn>
-                <a :href="createPromoLink(pl.key)" target="_blank">
+                <a
+                  :href="createPromoLink(pl.key)"
+                  id="visit-link-btn"
+                  target="_blank"
+                >
                   <v-btn text>Visit Link</v-btn>
                 </a>
                 <v-spacer></v-spacer>
@@ -650,6 +654,9 @@ export default {
 p {
   margin: 0;
 }
+#visit-link-btn {
+  text-decoration: none;
+}
 
 /* .thisone {
   text-align: center;

From 6dbd5ff64ba42471dd2a625a46781b84a4c6dfa9 Mon Sep 17 00:00:00 2001
From: Michael Evans <evansrichardmichael@gmail.com>
Date: Mon, 28 Feb 2022 16:04:08 -0700
Subject: [PATCH 3/3] small style  changes to Sales History page

---
 src/views/Sales.vue | 318 +++++++++++++++++++++++++++++---------------
 1 file changed, 214 insertions(+), 104 deletions(-)

diff --git a/src/views/Sales.vue b/src/views/Sales.vue
index b3fd52cd..f87346f7 100644
--- a/src/views/Sales.vue
+++ b/src/views/Sales.vue
@@ -1,13 +1,17 @@
 <template>
   <v-flex xs12>
     <div class="about">
-      <v-card>
-        <v-card-title class="headline font-weight-regular white--text secondary">
-          <span>{{mName || ''}} Sales History</span>
+      <v-card flat tile>
+        <v-card-title
+          class="headline font-weight-regular white--text secondary"
+        >
+          <span>{{ mName || '' }} Sales History</span>
           <v-spacer></v-spacer>
-          <v-btn v-if="!!mName" icon dark @click="$emit('close')"><v-icon>mdi-close</v-icon></v-btn>
+          <v-btn v-if="!!mName" icon dark @click="$emit('close')"
+            ><v-icon>mdi-close</v-icon></v-btn
+          >
         </v-card-title>
-        <v-card-text>
+        <v-card-text class="mt-5">
           <!-- <v-subheader>Range</v-subheader> -->
           <v-container grid-list-md class="fill-height text-center">
             <v-row>
@@ -35,12 +39,18 @@
                     :reactive="true"
                   >
                     <v-spacer></v-spacer>
-                    <v-btn text color="primary" @click="modalStart = false">Cancel</v-btn>
+                    <v-btn text color="primary" @click="modalStart = false"
+                      >Cancel</v-btn
+                    >
                     <v-btn
                       text
                       color="primary"
-                      @click="dateSave(datePickerStartDate, 'start'); $refs.dialogStart.save()"
-                    >OK</v-btn>
+                      @click="
+                        dateSave(datePickerStartDate, 'start')
+                        $refs.dialogStart.save()
+                      "
+                      >OK</v-btn
+                    >
                   </v-date-picker>
                 </v-dialog>
               </v-col>
@@ -68,34 +78,46 @@
                     :reactive="true"
                   >
                     <v-spacer></v-spacer>
+                    <v-btn text color="primary" @click="modalEnd = false"
+                      >Cancel</v-btn
+                    >
                     <v-btn
                       text
                       color="primary"
-                      @click="modalEnd = false"
-                    >Cancel</v-btn>
-                    <v-btn
-                      text
-                      color="primary"
-                      @click="dateSave(datePickerEndDate, 'end'); $refs.dialogEnd.save()"
-                    >OK</v-btn>
+                      @click="
+                        dateSave(datePickerEndDate, 'end')
+                        $refs.dialogEnd.save()
+                      "
+                      >OK</v-btn
+                    >
                   </v-date-picker>
                 </v-dialog>
               </v-col>
             </v-row>
             <v-row align="stretch" v-if="sales && sales.stats" justify="center">
-              <v-col v-for=" (metric, idx) in saleMetrics" :key="idx" lg="2" md="4" sm="6" cols="12">
+              <v-col
+                v-for="(metric, idx) in saleMetrics"
+                :key="idx"
+                lg="2"
+                md="4"
+                sm="6"
+                cols="12"
+              >
                 <div class="metric-card">
                   <v-avatar class="metric-avatar">
                     <v-icon large> {{ metric.icon }}</v-icon>
                   </v-avatar>
-                  <div class="stat"> {{ sales.stats[metric.prop] || 0 }} </div>
-                  <div class="label"> {{ metric.label }} </div>
+                  <div class="stat">{{ sales.stats[metric.prop] || 0 }}</div>
+                  <div class="label">{{ metric.label }}</div>
                 </div>
               </v-col>
             </v-row>
             <v-row>
               <v-col cols="12" class="text-center pa-0 pl-3 ma-0" text-justify>
-                <small> <strong>Note:</strong> These statistics apply only to the searched date range. </small>
+                <small>
+                  <strong>Note:</strong> These statistics apply only to the
+                  searched date range.
+                </small>
               </v-col>
             </v-row>
           </v-container>
@@ -116,43 +138,66 @@
       >
         <template v-slot:item="{ item, isExpanded }">
           <tr>
-            <td>{{ $vuetify.breakpoint.xs ? $moment(item.date).format('l') : $moment(item.date).format('LL') }}</td>
+            <td>
+              {{
+                $vuetify.breakpoint.xs
+                  ? $moment(item.date).format('l')
+                  : $moment(item.date).format('LL')
+              }}
+            </td>
             <td>
               <p>
-              <v-tooltip slot="append" bottom>
-                <template v-slot:activator="{ on }">
-                  <v-icon v-if="item.guestCheckout" v-on="on">mdi-account-outline</v-icon>
-                  <v-icon v-else v-on="on" >mdi-account</v-icon>
-                  <div class="first-time-customer" v-if="item.firstTimeCustomer">
-                    <v-icon class="first-time-tooltip" small v-on="on">mdi-party-popper</v-icon>
-                  </div>
-                </template>
-                <span v-if="item.guestCheckout">  This order was processed as a guest checkout. </span>
-                <span v-else-if="item.firstTimeCustomer">This was the first order by this registered customer. </span>
-                <span v-else>This order was placed by a registered customer. </span>
-              </v-tooltip>
-              <span> {{ item.customerName && /[^\s]/.test(item.customerName) ? item.customerName : 'Guest Customer' }} </span>
+                <v-tooltip slot="append" bottom>
+                  <template v-slot:activator="{ on }">
+                    <v-icon v-if="item.guestCheckout" v-on="on"
+                      >mdi-account-outline</v-icon
+                    >
+                    <v-icon v-else v-on="on">mdi-account</v-icon>
+                    <div
+                      class="first-time-customer"
+                      v-if="item.firstTimeCustomer"
+                    >
+                      <v-icon class="first-time-tooltip" small v-on="on"
+                        >mdi-party-popper</v-icon
+                      >
+                    </div>
+                  </template>
+                  <span v-if="item.guestCheckout">
+                    This order was processed as a guest checkout.
+                  </span>
+                  <span v-else-if="item.firstTimeCustomer"
+                    >This was the first order by this registered customer.
+                  </span>
+                  <span v-else
+                    >This order was placed by a registered customer.
+                  </span>
+                </v-tooltip>
+                <span>
+                  {{
+                    item.customerName && /[^\s]/.test(item.customerName)
+                      ? item.customerName
+                      : 'Guest Customer'
+                  }}
+                </span>
               </p>
             </td>
             <td>
-              <Currency
-                :amount="item.total / 100"
-                :currency="item.currency"
-              />
+              <Currency :amount="item.total / 100" :currency="item.currency" />
             </td>
             <td>{{ item.HexlyCommissionablePoints }}</td>
-            <td v-if="!$vuetify.breakpoint.xs">{{statusMap[item.statusOid] || item.statusOid}}</td>
+            <td v-if="!$vuetify.breakpoint.xs">
+              {{ statusMap[item.statusOid] || item.statusOid }}
+            </td>
             <td>
-              <v-icon @click="expanded = []" v-if="isExpanded">expand_less</v-icon>
+              <v-icon @click="expanded = []" v-if="isExpanded"
+                >expand_less</v-icon
+              >
               <v-icon @click="expanded = [item]" v-else>expand_more</v-icon>
             </td>
           </tr>
         </template>
         <template v-slot:expanded-item="{ item, headers }">
-          <td
-            :colspan="headers.length"
-            class="sale-details"
-          >
+          <td :colspan="headers.length" class="sale-details">
             <v-container fluid pl-3 pt-3>
               <v-row>
                 <v-col cols="12" sm="9" md="4" lg="3">
@@ -161,26 +206,46 @@
                       <v-col md="12">
                         <h4>Customer Info:</h4>
                         <ul>
-                          <li> {{item.customerName}} </li>
-                          <li v-if="item.customer">{{item.customer.email}}</li>
-                          <li v-if="item.shippingAddress">{{item.shippingAddress.street}}</li>
-                          <li v-if="item.shippingAddress">{{item.shippingAddress.city}}, {{item.shippingAddress.province}} {{item.shippingAddress.postalCode}}</li>
+                          <li>{{ item.customerName }}</li>
+                          <li v-if="item.customer">
+                            {{ item.customer.email }}
+                          </li>
+                          <li v-if="item.shippingAddress">
+                            {{ item.shippingAddress.street }}
+                          </li>
+                          <li v-if="item.shippingAddress">
+                            {{ item.shippingAddress.city }},
+                            {{ item.shippingAddress.province }}
+                            {{ item.shippingAddress.postalCode }}
+                          </li>
                         </ul>
                       </v-col>
                       <v-col md="12">
                         <h4>Details:</h4>
                         <ul>
-                          <li>Order ID: {{item.integrationOid}}</li>
-                          <li>Status: {{statusMap[item.statusOid] || item.statusOid}}</li>
-                          <li v-if="item.customerNote">Customer Note: {{item.customerNote}}</li>
+                          <li>Order ID: {{ item.integrationOid }}</li>
+                          <li>
+                            Status:
+                            {{ statusMap[item.statusOid] || item.statusOid }}
+                          </li>
+                          <li v-if="item.customerNote">
+                            Customer Note: {{ item.customerNote }}
+                          </li>
                           <li v-if="checkShippingDate(item.tracking)">
-                            Shipped On: {{$moment(item.tracking[0].dateShipped * 1000).format('ll')}}
+                            Shipped On:
+                            {{
+                              $moment(
+                                item.tracking[0].dateShipped * 1000
+                              ).format('ll')
+                            }}
                           </li>
                           <li v-if="checkTrackingInfo(item.tracking)">
-                            Tracking Info: <a
+                            Tracking Info:
+                            <a
                               target="_blank"
                               :href="formatTrackingLink(item.tracking[0])"
-                            >{{item.tracking[0].trackingNumber}}</a>
+                              >{{ item.tracking[0].trackingNumber }}</a
+                            >
                           </li>
                         </ul>
                       </v-col>
@@ -253,8 +318,10 @@
       </v-data-table>
     </div>
     <v-snackbar v-model="showSnackbar">
-      {{snackbarMsg}}
-      <v-btn text color="primary" @click.native="showSnackbar = false">Close</v-btn>
+      {{ snackbarMsg }}
+      <v-btn text color="primary" @click.native="showSnackbar = false"
+        >Close</v-btn
+      >
     </v-snackbar>
   </v-flex>
 </template>
@@ -271,32 +338,65 @@ const trackingProviders = {
   parcelforce: 'https://www.parcelforce.com/portal/pw/track?trackNumber=',
   royalmail: 'https://www3.royalmail.com/track-your-item#/tracking-results/',
   ups: 'https://www.ups.com/track?loc=null&tracknum=',
-  'canada-post': 'http://www.canadapost.ca/cpotools/apps/track/personal/findByTrackNumber?trackingNumber='
+  'canada-post':
+    'http://www.canadapost.ca/cpotools/apps/track/personal/findByTrackNumber?trackingNumber=',
 }
 export default {
   components: {
     DateSelector,
-    Currency
+    Currency,
   },
   props: {
     mId: Number,
-    mName: String
+    mName: String,
   },
-  data () {
+  data() {
     return {
       statusMap: {
-        'completed': 'Completed',
-        'processing': 'Processing',
-        'hxro-paid-await': 'Subscription Paid - Awaiting Shipping'
+        completed: 'Completed',
+        processing: 'Processing',
+        'hxro-paid-await': 'Subscription Paid - Awaiting Shipping',
       },
       saleMetrics: [
-        { label: 'Customer Purchases', prop: 'registeredPurchases', icon: 'mdi-cart' },
-        { label: 'Guest Purchases', prop: 'guestPurchases', icon: 'mdi-cart-outline' },
-        { label: 'New Customers', prop: 'newCustomers', icon: 'mdi-account-plus' },
-        { label: 'Returning Customers', prop: 'returningCustomers', icon: 'mdi-account-convert' },
-        { label: 'Total Customers', prop: 'totalCustomers', icon: 'mdi-account-group' }
+        {
+          label: 'Customer Purchases',
+          prop: 'registeredPurchases',
+          icon: 'mdi-cart',
+        },
+        {
+          label: 'Guest Purchases',
+          prop: 'guestPurchases',
+          icon: 'mdi-cart-outline',
+        },
+        {
+          label: 'New Customers',
+          prop: 'newCustomers',
+          icon: 'mdi-account-plus',
+        },
+        {
+          label: 'Returning Customers',
+          prop: 'returningCustomers',
+          icon: 'mdi-account-convert',
+        },
+        {
+          label: 'Total Customers',
+          prop: 'totalCustomers',
+          icon: 'mdi-account-group',
+        },
+      ],
+      statuses: [
+        'completed',
+        'processing',
+        'refunded',
+        'awaiting-shipment',
+        'export_for_shipping',
+        'POSTED',
+        'Awaiting Approval',
+        'SHIPPED',
+        'AWAITING FUNDS',
+        'ENTERED',
+        'hxro-paid-await',
       ],
-      statuses: ['completed', 'processing', 'refunded', 'awaiting-shipment', 'export_for_shipping', 'POSTED', 'Awaiting Approval', 'SHIPPED', 'AWAITING FUNDS', 'ENTERED', 'hxro-paid-await'],
       datePickerStartDate: null,
       datePickerEndDate: null,
       modalStart: false,
@@ -305,107 +405,114 @@ export default {
       startDate: this.$moment()
         .subtract(4 * 30, 'days')
         .format('MM/DD/YYYY'),
-      endDate: this.$moment()
-        .format('MM/DD/YYYY'),
+      endDate: this.$moment().format('MM/DD/YYYY'),
       headers: [
         { text: 'Date', value: 'date' },
         { text: 'Customer', value: 'customerName' },
         { text: 'Sale Total', value: 'total' },
         { text: 'Total Points', value: 'points' },
         { text: 'Status', value: 'statusOid' },
-        { text: '', value: 'data-table-expand' }
+        { text: '', value: 'data-table-expand' },
       ],
       mobileHeaders: [
         { text: 'Date', value: 'date' },
         { text: 'Customer', value: 'customerName' },
         { text: 'Sale Total', value: 'total' },
         { text: 'Total Points', value: 'points' },
-        { text: '', value: 'data-table-expand' }
+        { text: '', value: 'data-table-expand' },
       ],
       productHeads: [
         { text: 'Item', sortable: false },
         { text: 'Item Price', sortable: false },
         { text: 'Qty.', sortable: false },
-        { text: 'Subtotal', sortable: false }
+        { text: 'Subtotal', sortable: false },
       ],
       sales: {},
       showSnackbar: false,
-      snackbarMsg: ''
+      snackbarMsg: '',
     }
   },
   apollo: {
     sales: {
-      watchLoading (isLoading, countModifier) {
+      watchLoading(isLoading, countModifier) {
         this.setLoading(isLoading)
       },
       query: SEARCH_SALES_QUERY,
-      variables () {
-        const end = this.$moment(_.get(this, 'endDate', '1970-01-01')).format('YYYY-MM-DD')
-        const start = this.$moment(_.get(this, 'startDate', '1970-01-01')).format('YYYY-MM-DD')
+      variables() {
+        const end = this.$moment(_.get(this, 'endDate', '1970-01-01')).format(
+          'YYYY-MM-DD'
+        )
+        const start = this.$moment(
+          _.get(this, 'startDate', '1970-01-01')
+        ).format('YYYY-MM-DD')
         const memberId = this.mId || this.memberId
         return {
           input: {
             memberIn: [memberId],
             start,
-            end
-          }
+            end,
+          },
         }
       },
-      error (err) {
+      error(err) {
         this.setLoading(false)
-        this.snackbarMsg = 'We were unable to find your orders! Please try again or contact support'
+        this.snackbarMsg =
+          'We were unable to find your orders! Please try again or contact support'
         this.showSnackbar = true
         console.error(err)
       },
       debounce: 500,
-      update (data) {
+      update(data) {
         const stats = _.get(data, 'purchasing.orders.stats', {})
         const orders = _.get(data, 'purchasing.orders.results', [])
         this.setLoading(false)
         const compactOrders = _.compact(orders)
-        const filteredOrders = compactOrders.filter(sale => this.statuses.indexOf(sale.statusOid) >= 0)
+        const filteredOrders = compactOrders.filter(
+          (sale) => this.statuses.indexOf(sale.statusOid) >= 0
+        )
         return {
           results: filteredOrders,
-          stats
+          stats,
         }
       },
-      client: 'federated'
-    }
+      client: 'federated',
+    },
   },
   methods: {
     ...mapMutations([Mutations.SET_LOADING]),
-    checkShippingDate (trackingInfo) {
+    checkShippingDate(trackingInfo) {
       return _.get(trackingInfo, '0.dateShipped', false)
     },
-    checkTrackingInfo (trackingInfo) {
+    checkTrackingInfo(trackingInfo) {
       return _.get(trackingInfo, '0.trackingNumber', false)
     },
-    formatTrackingLink (trackingInfo) {
+    formatTrackingLink(trackingInfo) {
       if (trackingInfo.customTrackingLink) {
         return trackingInfo.customTrackingLink
       }
-      const provider = trackingInfo.trackingProvider || trackingInfo.customTrackingProvider
+      const provider =
+        trackingInfo.trackingProvider || trackingInfo.customTrackingProvider
       return trackingProviders[provider] + trackingInfo.trackingNumber
     },
-    dateSave (datePickerDate, startOrEnd) {
+    dateSave(datePickerDate, startOrEnd) {
       const varName = `${startOrEnd}Date`
       this[varName] = this.$moment(datePickerDate).format('MM/DD/YYYY')
     },
-    startDateChanged (date) {
+    startDateChanged(date) {
       this.$refs.dialogStart.save(date)
     },
-    endDateChanged (date) {
+    endDateChanged(date) {
       this.$refs.dialogEnd.save(date)
-    }
+    },
   },
   computed: {
     ...mapState({
-      loading: state => state.loading
+      loading: (state) => state.loading,
     }),
     ...mapGetters(['memberId']),
-    items () {
+    items() {
       const sales = _.get(this, 'sales.results', [])
-      return sales.map(sale => {
+      return sales.map((sale) => {
         const awardedOn = _.get(sale, 'metadata.HexlyAwardedDate')
         const saleDate = _.get(sale, 'checkedOutOn')
         const lineItems = _.get(sale, 'lines')
@@ -414,8 +521,12 @@ export default {
           customerName = `${[sale.pii.firstName, sale.pii.lastName].join(' ')}`
         }
         const HexlyTotalAmount = _.get(sale, 'compStats.HexlyTotalAmount')
-        const HexlyCommissionablePoints = _.get(sale, 'compStats.HexlyCommissionablePoints')
-        const date = awardedOn || this.$moment(saleDate, 'YYYY-MM-DD').format('YYYY-MM-DD')
+        const HexlyCommissionablePoints = _.get(
+          sale,
+          'compStats.HexlyCommissionablePoints'
+        )
+        const date =
+          awardedOn || this.$moment(saleDate, 'YYYY-MM-DD').format('YYYY-MM-DD')
         return {
           ...sale,
           guestCheckout: !sale.customer,
@@ -423,7 +534,7 @@ export default {
           lineItems,
           customerName,
           HexlyTotalAmount,
-          HexlyCommissionablePoints
+          HexlyCommissionablePoints,
         }
       })
     },
@@ -432,13 +543,12 @@ export default {
       const { mobileHeaders, headers } = this
 
       return isMobile ? mobileHeaders : headers
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style scoped>
-
 .metric-card {
   border: 1px solid #efefef;
   text-align: left;