Fall Festival Gem Promo (#138)

* content: add gems blocks

* gemsBlocks: include ios and android identifiers

* wip: promo code

* split common constants into multiple files

* add second promo part

* geCurrentEvent, refactor promo

* fix lint

* fix exports, use world state api

* start adding world state tests

* remove console.log

* use gems block for purchases

* remove comments

* fix most unit tests

* restore comment

* fix lint

* prevent apple/google gift tests from breaking other tests when stub is not reset

* fix unit tests, clarify tests names

* iap: use gift object when gifting gems

* allow gift object with less data

* fix iap tests, remove findById stubs

* iap: require less data from the mobile apps

* apply discounts

* add missing worldState file

* fix lint

* add test event

* start removing 20 gems option for web

* start adding support for all gems packages on web

* fix unit tests for apple, stripe and google

* amazon: support all gems blocks

* paypal: support all gems blocks

* fix payments unit tests, add tests for getGemsBlock

* web: add gems plans with discounts, update stripe

* fix amazon and paypal clients, payments success modals

* amazon pay: disabled state

* update icons, start abstracting payments buttons

* begin redesign

* redesign gems modal

* fix buttons

* fix hover color for gems modal close icon

* add key to world state current event

* extend test event length

* implement gems modals designs

* early test fall2020

* fix header banner position

* add missing files

* use iso 8601 for dates, minor ui fixes

* fix time zones

* events: fix ISO8601 format

* fix css indentation

* start abstracting banners

* refactor payments buttons

* test spooky, fix group plans box

* implement gems promo banners, refactor banners, fixes

* fix lint

* fix dates

* remove unused i18n strings

* fix stripe integration test

* fix world state integration tests

* the current active event

* add missing unit tests

* add storybook story for payments buttons component

* fix typo

* fix(stripe): correct label when gifting subscriptions

website/client/src/components/groups/groupPlan.vue

@@ -60,7 +60,7 @@
           Are you ready to upgrade?
         </h1>
         <div class="row">
-          <div class="col-12 text-center">
+          <div class="col-12 text-center mb-4 d-flex justify-content-center">
             <div class="purple-box">
               <div class="amount-section">
                 <div class="dollar">
@@ -93,22 +93,10 @@
             </div>
             <div class="box payment-providers">
               <h3>Choose your payment method</h3>
-              <div class="payments-column">
-                <button
-                  class="purchase btn btn-primary payment-button payment-item"
-                  @click="pay(PAYMENTS.STRIPE)"
-                >
-                  <div
-                    class="svg-icon credit-card-icon"
-                    v-html="icons.creditCardIcon"
-                  ></div>
-                  {{ $t('card') }}
-                </button>
-                <amazon-button
-                  class="payment-item"
-                  :amazon-data="pay(PAYMENTS.AMAZON)"
-                />
-              </div>
+              <payments-buttons
+                :stripe-fn="() => pay(PAYMENTS.STRIPE)"
+                :amazon-data="pay(PAYMENTS.AMAZON)"
+              />
             </div>
           </div>
         </div>
@@ -254,22 +242,10 @@
       >
         <div class="text-center">
           <h3>Choose your payment method</h3>
-          <div class="payments-column mx-auto">
-            <button
-              class="purchase btn btn-primary payment-button payment-item"
-              @click="pay(PAYMENTS.STRIPE)"
-            >
-              <div
-                class="svg-icon credit-card-icon"
-                v-html="icons.creditCardIcon"
-              ></div>
-              {{ $t('card') }}
-            </button>
-            <amazon-button
-              class="payment-item"
-              :amazon-data="pay(PAYMENTS.AMAZON)"
-            />
-          </div>
+          <payments-buttons
+            :stripe-fn="() => pay(PAYMENTS.STRIPE)"
+            :amazon-data="pay(PAYMENTS.AMAZON)"
+          />
         </div>
       </div>
     </b-modal>
@@ -290,7 +266,6 @@
 
     .purple-box {
       color: #bda8ff;
-      margin-bottom: 2em;
     }
 
     .number {
@@ -464,19 +439,17 @@
 import paymentsMixin from '../../mixins/payments';
 import { mapState } from '@/libs/store';
 import positiveIcon from '@/assets/svg/positive.svg';
-import creditCardIcon from '@/assets/svg/credit-card-icon.svg';
-import amazonButton from '@/components/payments/amazonButton';
+import paymentsButtons from '@/components/payments/buttons/list';
 
 export default {
   components: {
-    amazonButton,
+    paymentsButtons,
   },
   mixins: [paymentsMixin],
   data () {
     return {
       amazonPayments: {},
       icons: Object.freeze({
-        creditCardIcon,
         positiveIcon,
       }),
       PAGES: {