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/settings/subscriptionOptions.vue

@@ -25,43 +25,16 @@
         </div>
       </b-form-radio>
     </b-form-group>
-    <div class="payments-column mx-auto mt-auto">
-      <button
-        class="purchase btn btn-primary payment-button payment-item"
-        :class="{disabled: !subscription.key}"
-        :disabled="!subscription.key"
-        @click="showStripe({subscription:subscription.key, coupon:subscription.coupon})"
-      >
-        <div
-          v-once
-          class="svg-icon credit-card-icon"
-          v-html="icons.creditCardIcon"
-        ></div>
-        {{ $t('card') }}
-      </button>
-      <button
-        class="btn payment-item paypal-checkout payment-button"
-        :class="{disabled: !subscription.key}"
-        :disabled="!subscription.key"
-        @click="openPaypal(paypalPurchaseLink, 'subscription')"
-      >
-        &nbsp;
-        <img
-          src="~@/assets/images/paypal-checkout.png"
-          :alt="$t('paypal')"
-        >&nbsp;
-      </button>
-      <amazon-button
-        class="payment-item"
-        :class="{disabled: !subscription.key}"
-        :disabled="!subscription.key"
-        :amazon-data="{
-          type: 'subscription',
-          subscription: subscription.key,
-          coupon: subscription.coupon
-        }"
-      />
-    </div>
+    <payments-buttons
+      :disabled="!subscription.key"
+      :stripe-fn="() => showStripe({subscription:subscription.key, coupon:subscription.coupon})"
+      :paypal-fn="() => openPaypal({url: paypalPurchaseLink, type: 'subscription'})"
+      :amazon-data="{
+        type: 'subscription',
+        subscription: subscription.key,
+        coupon: subscription.coupon
+      }"
+    />
   </div>
 </template>
 
@@ -69,10 +42,6 @@
 <style lang="scss">
   @import '~@/assets/scss/colors.scss';
   #subscription-form {
-    .disabled .amazonpay-button-inner-image {
-      cursor: default !important;
-    }
-
     .custom-control .custom-control-label::before,
     .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
       margin-top: 0.75rem;
@@ -110,15 +79,6 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
-  .disabled {
-    opacity: 0.64;
-
-    .btn, .btn:hover, .btn:active {
-      box-shadow: none;
-      cursor: default !important;
-    }
-  }
-
   .subscribe-option {
     border-bottom: 1px solid $gray-600;
   }
@@ -128,14 +88,13 @@
 import filter from 'lodash/filter';
 import sortBy from 'lodash/sortBy';
 
-import amazonButton from '@/components/payments/amazonButton';
-import creditCardIcon from '@/assets/svg/credit-card-icon.svg';
+import paymentsButtons from '@/components/payments/buttons/list';
 import paymentsMixin from '../../mixins/payments';
 import subscriptionBlocks from '@/../../common/script/content/subscriptionBlocks';
 
 export default {
   components: {
-    amazonButton,
+    paymentsButtons,
   },
   mixins: [
     paymentsMixin,
@@ -145,9 +104,6 @@ export default {
       subscription: {
         key: null,
       },
-      icons: Object.freeze({
-        creditCardIcon,
-      }),
     };
   },
   computed: {