Gifting modal design (#14124)

* update selectUserModal.vue

* more updates to selectUserModal.vue, typo fix in subscriber.json

* remove exact sizing for selectUserModal.vue

* update to size for selectUserModal.vue

* added sendGiftModal.vue file

* updates to selectUser & sendGift modals

* making the modals go & position cursor

* working working working

* added a return to method

* avatar display & placeholder profile.name and username

* subscription-options added

* added menu row & started on gem options

* Added selectPage function, have not tested.

* updated habitica-images

* state changes

* bringing in gem counter

* arranging elements

* state changes, gem input boxes

* styling sendGiftModal.vue

* more sendGiftModal.vue styling and new close.svg icon

* more styling!

* and more styling of send own gems part of page

* images update

* more styling of own gems & some attempts to adjust :class on the menu

* styling styling styling

* replace +/- svg, styling

* styling, mostly

* new SVGs

* stylin'

* reverting svg changes

* no more stylin'

* finally got the +/- icons to show up...but they're the wrong color

* solved svg icon color problem! :)

* habitica-images

* working on sendGift part of button

* trying to make it do math, failing

* more attempts at math

* +/- buttons work on gem pages & cost calculation on buyGems

* trying to get hover colors working on +/- svgs

* formatted dollar amount as currency

* css/html for subscription-options & payments-buttons simplified

* swag at payments-buttons parameter (not tested)

* send gems from own balance works!

* working on starting page

* increment gem amount limited to maxGems and not < 0

* uncommented onHide()

* got bg color on sub options to work! yay!

* payment buttons!

* making g1g1 look good

* position modal on page properly & code clean-up

* Changes as requested!

* small color update

* fixed ternary function

* chore(html): indentation and comments

* fix(fn): correct catch for under-0

* chore(json): whitespace

* update gem styling; add linebreak to notifications.vue bc linter

* updating subscriptionOptions

* snackbar css fix

* reverting commit e16c12f

* removing merge conflict markers

* just a little comment

* fixed some navigation, clear input field on selectPage, cleaned up code; another try at subscriptionOption.vue

* merge upstream/develop

* update selectPage() to disable Gems menu items when on 'ownGems' or 'buyGems' states

* working on subscriptionOptions.vue logic

* fix(script): changed props & added updateSubscriptionData()

* fix(script): forgot to call updateSubscriptionData()

* fix(scripts): corrected :userReceivingGift on sendGiftModal.vue

* fix(scripts): correct props userReceivingGift to an Object

* fix(scripts): corrected v-if & revised props

* fix(style/html/whitespace): updated css for close.svg and added missing </div>

* style(radio-buttons): updated focus states and added hover states

* style(radio-buttons): refined focus and hover states

* fix(function): changed buyGemsLink to buyGems; still working on menu

* style(radio buttons): ensured consistent display of radio buttons through-out site; still struggling with hover states

* style(radio buttons): updated focus/active/hover to match design & removed unnecessary code

* fix: set default subscription option to 1 month

* fix(function): add default amounts to gem states when modal selected from user profile

* fix(build): use develop package json

* fix: SCSS commenting & abstracted setGemsDefault()

* fix(packages): revert to develop

* fix: remove unnecessary console.log statement

Co-authored-by: SabreCat <sabe@habitica.com>

website/client/src/components/settings/subscriptionOptions.vue

@@ -10,10 +10,17 @@
         :value="block.key"
         class="subscribe-option pt-2 pl-5 pb-3 mb-0"
         :class="{selected: subscription.key === block.key}"
-        @click.native="subscription.key = block.key"
+        @click.native="updateSubscriptionData(block.key)"
       >
         <!-- eslint-enable vue/no-use-v-if-with-v-for -->
         <div
+          v-if="userReceivingGift && userReceivingGift._id"
+          class="subscription-text ml-2 mb-1"
+          v-html="$t('giftSubscriptionRateText', {price: block.price, months: block.months})"
+        >
+        </div>
+        <div
+          v-else
           class="subscription-text ml-2 mb-1"
           v-html="$t('subscriptionRateText', {price: block.price, months: block.months})"
         >
@@ -25,7 +32,18 @@
         </div>
       </b-form-radio>
     </b-form-group>
+    <!-- payment buttons first is for gift subs and the second is for renewing subs -->
     <payments-buttons
+      v-if="userReceivingGift && userReceivingGift._id"
+      :disabled="!subscription.key"
+      :stripe-fn="() => redirectToStripe({gift, uuid: userReceivingGift._id, receiverName})"
+      :paypal-fn="() => openPaypalGift({
+        gift: gift, giftedTo: userReceivingGift._id, receiverName,
+      })"
+      :amazon-data="{type: 'single', gift, giftedTo: userReceivingGift._id, receiverName}"
+    />
+    <payments-buttons
+      v-else
       :disabled="!subscription.key"
       :stripe-fn="() => redirectToStripe({
         subscription: subscription.key,
@@ -43,6 +61,7 @@
 
 <style lang="scss">
   @import '~@/assets/scss/colors.scss';
+
   #subscription-form {
     .custom-control .custom-control-label::before,
     .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
@@ -101,11 +120,22 @@ export default {
   mixins: [
     paymentsMixin,
   ],
+  props: {
+    userReceivingGift: {
+      type: Object,
+      default () {},
+    },
+  },
   data () {
     return {
       subscription: {
-        key: null,
+        key: 'basic_earned',
       },
+      gift: {
+        type: 'subscription',
+        subscription: { key: 'basic_earned' },
+      },
+      receiverName: '',
     };
   },
   computed: {
@@ -114,7 +144,6 @@ export default {
     },
     subscriptionBlocksOrdered () {
       const subscriptions = filter(subscriptionBlocks, o => o.discount !== true);
-
       return sortBy(subscriptions, [o => o.months]);
     },
   },
@@ -131,6 +160,10 @@ export default {
           return '<span class="subscription-bubble px-2 py-1">Gem cap at 25</span>';
       }
     },
+    updateSubscriptionData (key) {
+      this.subscription.key = key;
+      if (this.userReceivingGift._id) this.gift.subscription.key = key;
+    },
   },
 };
 </script>