feat(sale): add fine print

website/client/src/components/payments/buyGemsModal.vue

@@ -161,6 +161,19 @@
           })"
           :amazon-data="{type: 'single', gemsBlock: selectedGemsBlock}"
         />
+        <div
+          v-if="eventName === 'fall_extra_gems' || eventName === 'spooky_extra_gems'"
+          class="d-flex flex-column justify-content-center"
+        >
+          <h4 class="mt-3 mx-auto"> {{ $t('howItWorks') }}</h4>
+          <small class="text-center">
+            {{ $t('gemSaleHow', { eventStartMonth, eventStartOrdinal, eventEndOrdinal }) }}
+          </small>
+          <h4 class="mt-3 mx-auto"> {{ $t('limitations') }}</h4>
+          <small class="text-center">
+            {{ $t('gemSaleLimitations', { eventStartMonth, eventStartOrdinal, eventEndOrdinal }) }}
+          </small>
+        </div>
       </div>
     </b-modal>
   </div>
@@ -170,6 +183,13 @@
   @import '~@/assets/scss/colors.scss';
 
   #buy-gems {
+    small {
+      color: $gray-100;
+      font-size: 12px;
+      margin-left: 20px;
+      margin-right: 20px;
+    }
+
     .close-icon svg path {
       stroke: $purple-400;
     }
@@ -415,6 +435,15 @@ export default {
       }
       return '';
     },
+    eventStartMonth () {
+      return moment(this.currentEvent.start).format('MMMM');
+    },
+    eventStartOrdinal () {
+      return moment(this.currentEvent.start).format('Do');
+    },
+    eventEndOrdinal () {
+      return moment(this.currentEvent.end).format('Do');
+    },
     isGemsPromoActive () {
       const currEvt = this.currentEvent;
       if (currEvt && currEvt.gemsPromo && moment().isBefore(currEvt.end)) {