mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 06:37:23 +01:00
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>
This commit is contained in:
Natalie L
GitHub
@@ -82,7 +82,7 @@ input, textarea, input.form-control, textarea.form-control {
|
||||
}
|
||||
}
|
||||
|
||||
/** Colored Input-Groups, ignoring checklist */
|
||||
// Colored Input-Groups, ignoring checklist
|
||||
.input-group:not(.checklist-group) {
|
||||
border-radius: 2px;
|
||||
border: solid 1px $gray-400;
|
||||
@@ -100,7 +100,7 @@ input, textarea, input.form-control, textarea.form-control {
|
||||
}
|
||||
}
|
||||
|
||||
/** Generic Input Group Styles */
|
||||
// Generic Input Group Styles
|
||||
.input-group {
|
||||
height: 2rem;
|
||||
|
||||
@@ -179,10 +179,11 @@ input, textarea, input.form-control, textarea.form-control {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
// Checkboxes and radios
|
||||
// used in checkboxes and radios
|
||||
$bg-focused-active-control: #4f2993;
|
||||
$bg-disabled-control: #34303a;
|
||||
|
||||
// custom control
|
||||
.custom-control {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
@@ -205,6 +206,7 @@ $bg-disabled-control: #34303a;
|
||||
}
|
||||
}
|
||||
|
||||
// checkboxes
|
||||
.custom-checkbox {
|
||||
.custom-control-label::before {
|
||||
border-radius: 2px;
|
||||
@@ -280,11 +282,26 @@ $bg-disabled-control: #34303a;
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
// radio buttons
|
||||
$bg-color: $purple-400;
|
||||
|
||||
// svg for the purple dot
|
||||
@mixin custom-radio-checked-icon ($bg-color) {
|
||||
background-image: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$bg-color}'/%3E%3C/svg%3E"), "#", "%23");
|
||||
}
|
||||
|
||||
.custom-radio .custom-control-input {
|
||||
opacity: 0;
|
||||
margin: 15px 25px 34px 25px;
|
||||
|
||||
// outside circle
|
||||
&:checked~.custom-control-label::before {
|
||||
background-color: $gray-700;
|
||||
background-size: 12px 12px;
|
||||
border-color: $purple-400;
|
||||
}
|
||||
|
||||
// checked indicator
|
||||
&:checked~.custom-control-label::after {
|
||||
@include custom-radio-checked-icon($purple-400);
|
||||
width: 18px;
|
||||
@@ -292,51 +309,84 @@ $bg-disabled-control: #34303a;
|
||||
background-size: 12px 12px;
|
||||
}
|
||||
|
||||
&:checked~.custom-control-label::before {
|
||||
background-color: $gray-700;
|
||||
background-size: 12px 12px;
|
||||
border-color: $purple-400;
|
||||
}
|
||||
|
||||
&:active~.custom-control-label::before {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
&:focus:not(:checked):not(:disabled)~.custom-control-label::before, &:active:not(:checked):not(:disabled)~.custom-control-label::before {
|
||||
box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
|
||||
// focus / not checked / not disabled
|
||||
&:focus:not(:checked):not(:disabled)~.custom-control-label::before,
|
||||
&:active:not(:checked):not(:disabled)~.custom-control-label::before {
|
||||
border: 2px solid $gray-300;
|
||||
box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
|
||||
}
|
||||
|
||||
&:focus:checked:not(:disabled)~.custom-control-label::before, &:active:checked:not(:disabled)~.custom-control-label::before {
|
||||
box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
|
||||
border-color: $purple-400;
|
||||
background-color: rgba($bg-focused-active-control, 0.1);
|
||||
// focus / checked / not disabled
|
||||
&:focus:checked:not(:disabled)~.custom-control-label::before,
|
||||
&:active:checked:not(:disabled)~.custom-control-label::before {
|
||||
border: 2px solid $purple-400;
|
||||
box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
|
||||
}
|
||||
|
||||
&:disabled:checked~.custom-control-label::before {
|
||||
border-color: $gray-400;
|
||||
background-color: transparent;
|
||||
// hover / not checked / not disabled
|
||||
&:hover:not(:checked):not(:disabled)~.custom-control-label::before,
|
||||
&:active:not(:checked):not(:disabled)~.custom-control-label::before {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: 50%/50% 50% no-repeat;
|
||||
@include custom-radio-checked-icon($purple-400);
|
||||
background-size: 12px 12px;
|
||||
border: solid 2px $purple-400;
|
||||
}
|
||||
|
||||
&:disabled:checked~.custom-control-label::after {
|
||||
// hover / checked / not disabled
|
||||
&:hover:checked:not(:disabled)~.custom-control-label::before,
|
||||
&:active::checked:not(:disabled)~.custom-control-label::before {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: 50%/50% 50% no-repeat;
|
||||
@include custom-radio-checked-icon($gray-400);
|
||||
background-size: 12px 12px;
|
||||
border: solid 2px $purple-300;
|
||||
}
|
||||
|
||||
// disabled / checked / before
|
||||
&:disabled:checked~.custom-control-label::before {
|
||||
background: 50%/50% 50% no-repeat;
|
||||
@include custom-radio-checked-icon($gray-300);
|
||||
border: 2px solid $gray-200;
|
||||
background-color: transparent;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
// disabled / checked / after
|
||||
&:disabled:checked~.custom-control-label::after {
|
||||
background: 50%/50% 50% no-repeat;
|
||||
@include custom-radio-checked-icon($gray-300);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-size: 12px 12px;
|
||||
}
|
||||
|
||||
// disabled / not checked / before
|
||||
&:disabled:not(:checked)~.custom-control-label::before {
|
||||
border-color: $gray-300;
|
||||
background-color: transparent;
|
||||
background-color: $gray-600;
|
||||
border: 2px solid $gray-200;
|
||||
}
|
||||
|
||||
&:focus:disabled~.custom-control-label::before, &:active:disabled~.custom-control-label::before {
|
||||
box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
|
||||
border-color: $gray-300;
|
||||
// focus and disabled / not checked / before
|
||||
&:focus:disabled~.custom-control-label::before,
|
||||
&:active:disabled~.custom-control-label::before {
|
||||
background-color: rgba($bg-disabled-control, 0.1);
|
||||
box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
|
||||
border: 2px solid $gray-200;
|
||||
}
|
||||
|
||||
&:focus:disabled:checked~.custom-control-label::before, &:active:disabled:checked~.custom-control-label::before {
|
||||
border-color: $gray-400;
|
||||
// focus and disabled / checked / before
|
||||
&:focus:disabled:checked~.custom-control-label::before,
|
||||
&:active:disabled:checked~.custom-control-label::before {
|
||||
background: 50%/50% 50% no-repeat;
|
||||
@include custom-radio-checked-icon($gray-300);
|
||||
border: 2px solid $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
27
website/client/src/assets/svg/big-gift.svg
Normal file
27
website/client/src/assets/svg/big-gift.svg
Normal file
@@ -0,0 +1,27 @@
|
||||
<svg width="176" height="67" viewBox="0 0 176 67" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path fill="#77F4C7" d="M35.667 11.667 40 9.5l-4.333-2.167L33.5 3l-2.167 4.333L27 9.5l4.333 2.167L33.5 16z"/>
|
||||
<path fill="#BDA8FF" d="M24.667 38.667 30 36l-5.333-2.667L22 28l-2.667 5.333L14 36l5.333 2.667L22 44z"/>
|
||||
<path fill="#8EEDF6" d="M35.667 63.667 39 62l-3.333-1.667L34 57l-1.667 3.333L29 62l3.333 1.667L34 67z"/>
|
||||
<path fill="#FFBE5D" d="M6.667 49.667 10 48l-3.333-1.667L5 43l-1.667 3.333L0 48l3.333 1.667L5 53z"/>
|
||||
<path fill="#FFB6B8" d="M5.667 20.667 8 19.5l-2.333-1.167L4.5 16l-1.167 2.333L1 19.5l2.333 1.167L4.5 23z"/>
|
||||
<g>
|
||||
<path fill="#77F4C7" d="M140.333 11.667 136 9.5l4.333-2.167L142.5 3l2.167 4.333L149 9.5l-4.333 2.167L142.5 16z"/>
|
||||
<path fill="#BDA8FF" d="M151.333 38.667 146 36l5.333-2.667L154 28l2.667 5.333L162 36l-5.333 2.667L154 44z"/>
|
||||
<path fill="#8EEDF6" d="M140.333 63.667 137 62l3.333-1.667L142 57l1.667 3.333L147 62l-3.333 1.667L142 67z"/>
|
||||
<path fill="#FFBE5D" d="M169.333 49.667 166 48l3.333-1.667L171 43l1.667 3.333L176 48l-3.333 1.667L171 53z"/>
|
||||
<path fill="#FFB6B8" d="M170.333 20.667 168 19.5l2.333-1.167L171.5 16l1.167 2.333L175 19.5l-2.333 1.167L171.5 23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M81.117 13.904c-2.139-4.838-6.274-9.113-11.25-9.324-4.976-.211-7.828 3.779-6.367 7.309 1.461 3.53 4.94 4.177 16.227 7.202 3.204.858 3.528-.35 1.39-5.187z" stroke="#22AEB7" stroke-width="4"/>
|
||||
<path d="M93.833 13.904c2.138-4.838 6.273-9.113 11.25-9.324 4.975-.211 7.828 3.779 6.367 7.309-1.462 3.53-4.94 4.177-16.227 7.202-3.205.858-3.528-.35-1.39-5.187z" stroke="#38C9C6" stroke-width="4"/>
|
||||
<path d="M87.128 11c-9.738 0-3.907 11.145 0 11.145 3.908 0 9.74-11.145 0-11.145z" fill="#46DDDA"/>
|
||||
<path fill="#6133B4" d="M62 33h52v34H62zM56 21h64v12H56z"/>
|
||||
<path fill-opacity=".5" fill="#FFF" style="mix-blend-mode:soft-light" d="M32 30h26v34H32z" transform="translate(56 3)"/>
|
||||
<path fill="#8EEDF6" d="M88 33h6v34h-6z"/>
|
||||
<path fill="#3BCAD7" d="M82 33h6v34h-6zM76 21h12v12H76z"/>
|
||||
<path fill="#8EEDF6" d="M88 21h12v12H88z"/>
|
||||
<path fill-opacity=".2" fill="#000" style="mix-blend-mode:multiply" d="M6 30h26v6H6zM20 18h12v6H20zM0 24h20v6H0zM44 24h20v6H44zM32 18h12v6H32zM6 58h26v6H6zM32 30h26v6H32zM32 58h26v6H32z" transform="translate(56 3)"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -1,5 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
|
||||
<g fill="none" fill-rule="evenodd" stroke="#A5A1AC" stroke-width="2">
|
||||
<path d="M1 11L11 1M11 11L1 1"/>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Icon/Close</title>
|
||||
<g id="Modals" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Shop-Modals" transform="translate(-183.000000, -655.000000)" fill="#878190" fill-rule="nonzero">
|
||||
<g id="Icon/Close" transform="translate(183.000000, 655.000000)">
|
||||
<polygon id="Mask" points="12.1973467 2 14 3.80265326 9.80187117 8 14 12.1973467 12.1973467 14 8 9.80187117 3.80265326 14 2 12.1973467 6.19812883 8 2 3.80265326 3.80265326 2 8 6.19812883"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 215 B After Width: | Height: | Size: 747 B |
@@ -122,6 +122,11 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.box:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<creator-intro />
|
||||
<profileModal />
|
||||
<report-flag-modal />
|
||||
<send-gems-modal />
|
||||
<send-gift-modal />
|
||||
<select-user-modal />
|
||||
<b-navbar
|
||||
id="habitica-menu"
|
||||
@@ -747,7 +747,7 @@ import creatorIntro from '../creatorIntro';
|
||||
import notificationMenu from './notificationsDropdown';
|
||||
import profileModal from '../userMenu/profileModal';
|
||||
import reportFlagModal from '../chat/reportFlagModal';
|
||||
import sendGemsModal from '@/components/payments/sendGemsModal';
|
||||
import sendGiftModal from '@/components/payments/sendGiftModal';
|
||||
import selectUserModal from '@/components/payments/selectUserModal';
|
||||
import sync from '@/mixins/sync';
|
||||
import userDropdown from './userDropdown';
|
||||
@@ -759,7 +759,7 @@ export default {
|
||||
notificationMenu,
|
||||
profileModal,
|
||||
reportFlagModal,
|
||||
sendGemsModal,
|
||||
sendGiftModal,
|
||||
selectUserModal,
|
||||
userDropdown,
|
||||
},
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="payments-column mx-auto mt-auto">
|
||||
<h4>{{ $t('choosePaymentMethod') }}</h4>
|
||||
<button
|
||||
v-if="stripeAvailable"
|
||||
class="btn btn-primary payment-button payment-item with-icon"
|
||||
@@ -80,6 +81,13 @@
|
||||
cursor: default !important;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -14,15 +14,44 @@
|
||||
</div>
|
||||
<h2
|
||||
v-else
|
||||
class="ml-2"
|
||||
class="d-flex flex-column mx-auto align-items-center"
|
||||
>
|
||||
{{ $t('sendGift') }}
|
||||
{{ $t('sendAGift') }}
|
||||
</h2>
|
||||
<div
|
||||
v-if="currentEvent && currentEvent.promo === 'g1g1'"
|
||||
class="g1g1-margin d-flex flex-column align-items-center"
|
||||
>
|
||||
<div
|
||||
class="svg-big-gift"
|
||||
v-once
|
||||
v-html="icons.bigGift"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="d-flex flex-column align-items-center">
|
||||
<div
|
||||
class="svg-big-gift"
|
||||
v-once
|
||||
v-html="icons.bigGift"
|
||||
></div>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<div
|
||||
class="modal-close"
|
||||
v-if="currentEvent && currentEvent.promo === 'g1g1'"
|
||||
class="g1g1-modal-close"
|
||||
@click="close()"
|
||||
>
|
||||
<div
|
||||
class="g1g1-svg-icon"
|
||||
v-html="icons.close"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="modal-close"
|
||||
@click="close()">
|
||||
<div
|
||||
class="svg-icon"
|
||||
v-html="icons.close"
|
||||
@@ -42,6 +71,7 @@
|
||||
v-model="userSearchTerm"
|
||||
class="form-control"
|
||||
type="text"
|
||||
ref="textBox"
|
||||
:placeholder="$t('usernameOrUserId')"
|
||||
:class="{
|
||||
'input-valid': foundUser._id,
|
||||
@@ -70,15 +100,20 @@
|
||||
<div
|
||||
v-else
|
||||
>
|
||||
{{ $t('selectGift') }}
|
||||
{{ $t('next') }}
|
||||
</div>
|
||||
</button>
|
||||
<a
|
||||
class="cancel-link mx-auto mt-3"
|
||||
@click="close()"
|
||||
<div
|
||||
v-if="currentEvent && currentEvent.promo ==='g1g1'"
|
||||
class="g1g1-cancel d-flex justify-content-center"
|
||||
v-html="$t('cancel')"
|
||||
@click="close()"
|
||||
>
|
||||
{{ $t('cancel') }}
|
||||
</a>
|
||||
{{ $t('cancel') }}
|
||||
</div>
|
||||
<div
|
||||
v-else>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,13 +145,16 @@
|
||||
@import '~@/assets/scss/mixins.scss';
|
||||
|
||||
#select-user-modal {
|
||||
.modal-content {
|
||||
width:448px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-top: 0rem;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
width: 29.5rem;
|
||||
margin-top: 25vh;
|
||||
width: 448px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
@@ -126,7 +164,16 @@
|
||||
margin: 0rem 0.25rem 0.25rem 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.modal-open .modal {
|
||||
display: flex !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body.modal-open .modal .modal-dialog {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -146,12 +193,12 @@
|
||||
|
||||
.g1g1 {
|
||||
background-image: url('~@/assets/images/g1g1-send.png');
|
||||
background-size: 472px 152px;
|
||||
width: 470px;
|
||||
background-size: 446px 152px;
|
||||
width: 446px;
|
||||
height: 152px;
|
||||
margin: -1rem 0rem 0rem -1rem;
|
||||
border-radius: 0.3rem 0.3rem 0rem 0rem;
|
||||
padding: 1.5rem;
|
||||
margin: -16px 0px 0px -16px;
|
||||
border-radius: 4.8px 4.8px 0px 0px;
|
||||
padding: 24px;
|
||||
color: $white;
|
||||
|
||||
h1 {
|
||||
@@ -169,6 +216,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.g1g1-margin {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.g1g1-cancel {
|
||||
margin-top: 16px;
|
||||
color: $blue-10;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.g1g1-fine-print {
|
||||
color: $gray-100;
|
||||
background-color: $gray-700;
|
||||
@@ -176,6 +233,29 @@
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.g1g1-modal-close {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 4px;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
.g1g1-svg-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
& ::v-deep svg path {
|
||||
fill: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.g1g1-modal-dialog {
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.input-error {
|
||||
color: $red-50;
|
||||
font-size: 90%;
|
||||
@@ -192,6 +272,18 @@
|
||||
border-color: $purple-500;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
color: $purple-300;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.svg-big-gift {
|
||||
width: 176px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
@@ -206,14 +298,17 @@
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// import { nextTick } from 'vue'; // may not need this? I don't know!
|
||||
import debounce from 'lodash/debounce';
|
||||
import find from 'lodash/find';
|
||||
import isUUID from 'validator/lib/isUUID';
|
||||
import { mapState } from '@/libs/store';
|
||||
import closeIcon from '@/assets/svg/close.svg';
|
||||
import bigGiftIcon from '@/assets/svg/big-gift.svg';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
@@ -223,6 +318,7 @@ export default {
|
||||
foundUser: {},
|
||||
icons: Object.freeze({
|
||||
close: closeIcon,
|
||||
bigGift: bigGiftIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
@@ -281,7 +377,7 @@ export default {
|
||||
this.foundUser = result;
|
||||
}, 500),
|
||||
selectUser () {
|
||||
this.$root.$emit('habitica::send-gems', this.foundUser);
|
||||
this.$root.$emit('habitica::send-gift', this.foundUser);
|
||||
this.close();
|
||||
},
|
||||
onHide () {
|
||||
|
||||
659
website/client/src/components/payments/sendGiftModal.vue
Normal file
659
website/client/src/components/payments/sendGiftModal.vue
Normal file
@@ -0,0 +1,659 @@
|
||||
<template>
|
||||
<b-modal
|
||||
id="send-gift"
|
||||
:hide-footer="true"
|
||||
:hide-header="true"
|
||||
size="md"
|
||||
@hide="onHide()"
|
||||
>
|
||||
<div>
|
||||
<!-- header -->
|
||||
<div
|
||||
class="modal-close"
|
||||
@click="close()"
|
||||
>
|
||||
<div
|
||||
class="icon-close"
|
||||
v-html="icons.closeIcon"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="d-flex flex-column mx-auto align-items-center">
|
||||
{{ $t('sendAGift') }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- user avatar -->
|
||||
<div
|
||||
v-if="userReceivingGift"
|
||||
class="modal-body"
|
||||
>
|
||||
<avatar
|
||||
:member="userReceivingGift"
|
||||
:hideClassBadge="true"
|
||||
class="d-flex flex-column mx-auto align-items-center"
|
||||
/>
|
||||
<div class="avatar-spacer"></div>
|
||||
<div class="d-flex flex-column mx-auto align-items-center display-name">
|
||||
<!-- user display name and username -->
|
||||
<user-link
|
||||
:user-id="displayName"
|
||||
:name="displayName"
|
||||
:backer="userBacker"
|
||||
:contributor="userContributor"
|
||||
:class="display-name"
|
||||
/>
|
||||
</div>
|
||||
<div class="d-flex flex-column mx-auto align-items-center user-name">
|
||||
@{{ userName }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- menu area -->
|
||||
<div class="row">
|
||||
<div class="col-md-8 offset-md-2 text-center nav">
|
||||
<div
|
||||
class="nav-link"
|
||||
:class="{active: selectedPage === 'subscription'}"
|
||||
@click="selectPage('subscription')"
|
||||
>
|
||||
{{ $t('subscription') }}
|
||||
</div>
|
||||
<div
|
||||
class="nav-link"
|
||||
:class="{active: selectedPage !== 'subscription'}"
|
||||
@click="selectPage('buyGems')"
|
||||
>
|
||||
{{ $t('gems') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- subscriber block -->
|
||||
<subscription-options
|
||||
v-show="selectedPage === 'subscription'"
|
||||
class="subscribe-option"
|
||||
:userReceivingGift="userReceivingGift"
|
||||
/>
|
||||
|
||||
<!-- gem block -->
|
||||
<div
|
||||
v-show="selectedPage === 'buyGems'"
|
||||
>
|
||||
<div class="gem-group">
|
||||
<!-- buy gems with money -->
|
||||
<label v-once>
|
||||
{{ $t('howManyGemsPurchase') }}
|
||||
</label>
|
||||
<div class="d-flex flex-row align-items-center justify-content-center">
|
||||
<div
|
||||
class="gray-circle"
|
||||
@click="gift.gems.amount <= 0
|
||||
? gift.gems.amount = 0
|
||||
: gift.gems.amount--"
|
||||
>
|
||||
<div
|
||||
class="icon-negative"
|
||||
v-html="icons.negativeIcon"
|
||||
></div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend input-group-icon align-items-center">
|
||||
<div
|
||||
class="icon-gem"
|
||||
v-html="icons.gemIcon"
|
||||
></div>
|
||||
</div>
|
||||
<input
|
||||
id="gemsForm"
|
||||
v-model.number="gift.gems.amount"
|
||||
class="form-control"
|
||||
max="9999"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="gray-circle"
|
||||
@click="gift.gems.amount++"
|
||||
>
|
||||
<div
|
||||
class="icon-positive"
|
||||
v-html="icons.positiveIcon"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- the word "total" -->
|
||||
<div class="buy-gem-total">
|
||||
{{ $t('sendGiftTotal') }}
|
||||
</div>
|
||||
|
||||
<!-- the actual dollar amount -->
|
||||
<div class="buy-gem-amount">
|
||||
<span>
|
||||
{{ formatter.format(totalGems) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- change to sending own gems page -->
|
||||
<div
|
||||
:class="{active: selectedPage === 'ownGems'}"
|
||||
class="gem-state-change"
|
||||
@click="selectPage('ownGems')"
|
||||
>
|
||||
{{ $t('wantToSendOwnGems') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- paying for gems -->
|
||||
<payments-buttons
|
||||
class="payment-buttons"
|
||||
: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}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- send gems from balance -->
|
||||
<div
|
||||
v-show="selectedPage === 'ownGems'"
|
||||
>
|
||||
<div class="gem-group">
|
||||
<label v-once>
|
||||
{{ $t('howManyGemsSend') }}
|
||||
</label>
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="gray-circle"
|
||||
@click="gift.gems.amount <= 0
|
||||
? gift.gems.amount = 0
|
||||
: gift.gems.amount--"
|
||||
>
|
||||
<div
|
||||
class="icon-negative"
|
||||
v-html="icons.negativeIcon"
|
||||
></div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend input-group-icon align-items-center">
|
||||
<div
|
||||
class="icon-gem"
|
||||
v-html="icons.gemIcon"
|
||||
></div>
|
||||
</div>
|
||||
<input
|
||||
id="gemsForm"
|
||||
v-model="gift.gems.amount"
|
||||
class="form-control"
|
||||
:max="maxGems"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="gray-circle"
|
||||
@click="gift.gems.amount < maxGems
|
||||
? gift.gems.amount++
|
||||
: gift.gems.amount = maxGems"
|
||||
>
|
||||
<div
|
||||
class="icon-positive"
|
||||
v-html="icons.positiveIcon"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="align-items-middle">
|
||||
<div class="d-flex justify-content-center align-items-middle">
|
||||
<span class="balance-text">
|
||||
{{ $t('yourBalance') }}
|
||||
</span>
|
||||
<span
|
||||
class="icon-gem balance-gem-margin"
|
||||
style="display: inline-block;"
|
||||
v-html="icons.gemIcon"
|
||||
></span>
|
||||
<span
|
||||
class="balance-gems"
|
||||
>
|
||||
{{ maxGems }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center align-items-middle mt-3">
|
||||
<button
|
||||
v-if="fromBal"
|
||||
class="btn btn-primary mx-auto mt-2"
|
||||
type="submit"
|
||||
:disabled="sendingInProgress"
|
||||
@click="sendGift()"
|
||||
>
|
||||
{{ $t("send") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- change to buying gems page -->
|
||||
<div
|
||||
:class="{active: selectedPage === 'buyGems'}"
|
||||
class="gem-state-change"
|
||||
@click="selectPage('buyGems')"
|
||||
>
|
||||
{{ $t('needToPurchaseGems') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/assets/scss/mixins.scss';
|
||||
#send-gift {
|
||||
.modal-dialog {
|
||||
max-width: 448px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 448px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 14px 28px 0 rgba(26, 24, 29, 0.24), 0 10px 10px 0 rgba(26, 24, 29, 0.28);
|
||||
}
|
||||
.modal-body{
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-close {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: middle;
|
||||
|
||||
& ::v-deep svg path {
|
||||
fill: #878190;
|
||||
}
|
||||
& :hover {
|
||||
fill: #686274;
|
||||
}
|
||||
}
|
||||
}
|
||||
#subscription-form .subscribe-option {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
#subscription-form .selected {
|
||||
background: rgba(213, 200, 255, 0.32);
|
||||
// using rgba for transparency
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
h2 {
|
||||
color: $purple-300;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.avatar-spacer {
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
.display-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.71;
|
||||
margin: 0px 6px 0 20px;
|
||||
}
|
||||
|
||||
.display-name a:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
text-align: center;
|
||||
color: $gray-100;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.row {
|
||||
background-color: $gray-700;
|
||||
margin: 0 0 0 0;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
font-weight: bold;
|
||||
font-size: 0.75rem;
|
||||
min-height: 32px;
|
||||
padding: 16px 0 0 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $gray-100;
|
||||
display: inline-block;
|
||||
padding: 0px 8px 6px 8px;
|
||||
|
||||
&.active {
|
||||
color: $purple-300;
|
||||
border-bottom: 2px solid $purple-400;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $purple-300;
|
||||
border-bottom: 2px solid $purple-400;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.gem-group {
|
||||
padding: 0 0 24px 0;
|
||||
background-color: $gray-700;
|
||||
margin: 0 0 0 0;
|
||||
border-bottom-right-radius: 8px;
|
||||
border-bottom-left-radius: 8px
|
||||
}
|
||||
|
||||
label {
|
||||
color: $gray-50;
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.71;
|
||||
margin: 12px 0 16px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
width: 94px;
|
||||
height: 32px;
|
||||
margin: 0px 16px 0px 16px;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
border: solid 1px $gray-400;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.gray-circle {
|
||||
border-radius: 100%;
|
||||
border: solid 2px $gray-300;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: $purple-400;
|
||||
}
|
||||
}
|
||||
|
||||
.gray-circle:hover{
|
||||
.icon-positive, .icon-negative {
|
||||
& ::v-deep svg path {
|
||||
fill: $purple-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-gem {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.icon-positive, .icon-negative {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 4px auto;
|
||||
|
||||
& ::v-deep svg path {
|
||||
fill: $gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
.buy-gem-total {
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.71;
|
||||
padding-top: 24px;
|
||||
text-align: center;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.buy-gem-amount {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
margin: 16px 0 24px 0;
|
||||
text-align: center;
|
||||
height: 28px;
|
||||
color: $green-10;
|
||||
}
|
||||
|
||||
.balance-text {
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
color: $gray-100;
|
||||
line-height: 1.33;
|
||||
margin: 12px 0px 0px 70px;
|
||||
}
|
||||
|
||||
.balance-gem-margin {
|
||||
margin: 8px 4px 0px 8px;
|
||||
}
|
||||
|
||||
.balance-gems {
|
||||
font-size: 0.75rem;
|
||||
color: $gray-100;
|
||||
line-height: 1.33;
|
||||
margin: 12px 71px 0px 4px;
|
||||
}
|
||||
|
||||
.gem-state-change {
|
||||
color: $blue-10;
|
||||
font-size: 0.875rem;
|
||||
min-height: 24px;
|
||||
margin: 16px 0 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.subscribe-option {
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.payment-buttons {
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
// libs imports
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
// mixins imports
|
||||
import paymentsMixin from '../../mixins/payments';
|
||||
|
||||
// component imports
|
||||
import avatar from '../avatar';
|
||||
import userLink from '../userLink';
|
||||
import subscriptionOptions from '../settings/subscriptionOptions.vue';
|
||||
import paymentsButtons from '@/components/payments/buttons/list';
|
||||
|
||||
// svg imports
|
||||
import closeIcon from '@/assets/svg/close.svg';
|
||||
import gemIcon from '@/assets/svg/gem.svg';
|
||||
import positiveIcon from '@/assets/svg/positive.svg';
|
||||
import negativeIcon from '@/assets/svg/negative.svg';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
avatar,
|
||||
subscriptionOptions,
|
||||
paymentsButtons,
|
||||
userLink,
|
||||
},
|
||||
mixins: [
|
||||
paymentsMixin,
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
subscription: {
|
||||
key: '',
|
||||
},
|
||||
icons: Object.freeze({
|
||||
closeIcon,
|
||||
gemIcon,
|
||||
positiveIcon,
|
||||
negativeIcon,
|
||||
}),
|
||||
userReceivingGift: {
|
||||
profile: '',
|
||||
},
|
||||
name: '',
|
||||
display: '',
|
||||
selectedPage: 'subscription',
|
||||
gift: {
|
||||
type: 'gems',
|
||||
gems: {
|
||||
amount: 0,
|
||||
fromBalance: true,
|
||||
},
|
||||
},
|
||||
sendingInProgress: false,
|
||||
amazonPayments: {},
|
||||
gemCost: 1,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
userLoggedIn: 'user.data',
|
||||
}),
|
||||
userName () {
|
||||
const userName = this.userReceivingGift.auth
|
||||
&& this.userReceivingGift.auth.local
|
||||
&& this.userReceivingGift.auth.local.username;
|
||||
return userName;
|
||||
},
|
||||
displayName () {
|
||||
const displayName = this.userReceivingGift.profile.name;
|
||||
return displayName;
|
||||
},
|
||||
userBacker () {
|
||||
const userBacker = this.userReceivingGift.backer;
|
||||
return userBacker;
|
||||
},
|
||||
userContributor () {
|
||||
const userContributor = this.userReceivingGift.contributor;
|
||||
return userContributor;
|
||||
},
|
||||
tierIcon () {
|
||||
if (this.isNPC) {
|
||||
return this.icons.tierNPC;
|
||||
}
|
||||
return this.icons[`tier${this.level}`];
|
||||
},
|
||||
fromBal () {
|
||||
return this.gift.type === 'gems' && this.gift.gems.fromBalance;
|
||||
},
|
||||
maxGems () {
|
||||
const maxGems = this.fromBal ? this.userLoggedIn.balance * 4 : 9999;
|
||||
return maxGems;
|
||||
},
|
||||
formatter () {
|
||||
const formatter = new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
minimumFractionDigits: 2,
|
||||
});
|
||||
return formatter;
|
||||
},
|
||||
totalGems () {
|
||||
const totalGems = this.gift.gems.amount * 0.25;
|
||||
return totalGems;
|
||||
},
|
||||
receiverName () {
|
||||
if (
|
||||
this.userReceivingGift.auth
|
||||
&& this.userReceivingGift.auth.local
|
||||
&& this.userReceivingGift.auth.local.username
|
||||
) {
|
||||
return this.userReceivingGift.auth.local.username;
|
||||
}
|
||||
return this.userReceivingGift.profile.name;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
startingPage () {
|
||||
this.selectedPage = this.startingPage;
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.$root.$on('habitica::send-gift', data => {
|
||||
this.userReceivingGift = data;
|
||||
if (this.$store.state.giftModalOptions.startingPage) {
|
||||
this.selectedPage = this.$store.state.giftModalOptions.startingPage;
|
||||
this.$store.state.giftModalOptions.startingPage = '';
|
||||
this.selectPage(this.selectedPage);
|
||||
} else {
|
||||
this.selectPage(this.startingPage);
|
||||
}
|
||||
this.setGemDefaults();
|
||||
this.$root.$emit('bv::show::modal', 'send-gift');
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
this.$root.$emit('bv::hide::modal', 'send-gift');
|
||||
},
|
||||
setGemDefaults () {
|
||||
if (this.selectedPage === 'buyGems') {
|
||||
this.gift.gems.amount = 20;
|
||||
} else if (this.selectedPage === 'ownGems') {
|
||||
this.gift.gems.amount = 1;
|
||||
} else {
|
||||
this.gift.gems.amount = 0;
|
||||
}
|
||||
},
|
||||
selectPage (page) {
|
||||
if (page === this.selectedPage) return;
|
||||
if (page === 'buyGems') this.selectedPage = 'buyGems';
|
||||
if (page === 'buyGems' && this.selectedPage === 'ownGems') return;
|
||||
this.selectedPage = page || 'subscription';
|
||||
this.setGemDefaults();
|
||||
},
|
||||
async sendGift () {
|
||||
this.sendingInProgress = true;
|
||||
await this.$store.dispatch('members:transferGems', {
|
||||
toUserId: this.userReceivingGift._id,
|
||||
gemAmount: this.gift.gems.amount,
|
||||
});
|
||||
this.close();
|
||||
setTimeout(() => { // wait for the send gem modal to be closed
|
||||
this.$root.$emit('habitica:payment-success', {
|
||||
paymentMethod: 'balance',
|
||||
paymentCompleted: true,
|
||||
paymentType: 'gift-gems-balance',
|
||||
gift: {
|
||||
gems: {
|
||||
amount: this.gift.gems.amount,
|
||||
},
|
||||
},
|
||||
giftReceiver: this.receiverName,
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
onHide () {
|
||||
this.sendingInProgress = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -450,10 +450,6 @@
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.subscribe-option {
|
||||
border-bottom: 1px solid $gray-600;
|
||||
}
|
||||
|
||||
.svg-amazon-pay {
|
||||
width: 208px;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -662,6 +662,11 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@@ -992,7 +992,8 @@ export default {
|
||||
axios.post(`/api/v4/user/block/${this.user._id}`);
|
||||
},
|
||||
openSendGemsModal () {
|
||||
this.$root.$emit('habitica::send-gems', this.user);
|
||||
this.$store.state.giftModalOptions.startingPage = 'buyGems';
|
||||
this.$root.$emit('habitica::send-gift', this.user);
|
||||
},
|
||||
adminTurnOnShadowMuting () {
|
||||
if (!this.hero.flags) {
|
||||
|
||||
@@ -124,6 +124,9 @@ export default function () {
|
||||
profileOptions: {
|
||||
startingPage: '',
|
||||
},
|
||||
giftModalOptions: {
|
||||
startingPage: '',
|
||||
},
|
||||
rageModalOptions: {
|
||||
npc: '',
|
||||
},
|
||||
|
||||
@@ -129,6 +129,7 @@
|
||||
"sendGiftHeading": "Send Gift to <%= name %>",
|
||||
"sendGiftGemsBalance": "From <%= number %> Gems",
|
||||
"sendGiftCost": "Total: $<%= cost %> USD",
|
||||
"sendGiftTotal": "Total:",
|
||||
"sendGiftFromBalance": "From Balance",
|
||||
"sendGiftPurchase": "Purchase",
|
||||
"sendGiftMessagePlaceholder": "Personal message (optional)",
|
||||
|
||||
@@ -125,6 +125,7 @@
|
||||
"unsubscribeAllPush": "Check to Unsubscribe from all Push Notifications",
|
||||
"correctlyUnsubscribedEmailType": "Correctly unsubscribed from \"<%= emailType %>\" emails.",
|
||||
"subscriptionRateText": "Recurring <strong>$<%= price %> USD</strong> every <strong><%= months %> months</strong>",
|
||||
"giftSubscriptionRateText": "<strong>$<%= price %> USD</strong> for <strong><%= months %> months</strong>",
|
||||
"benefits": "Benefits",
|
||||
"coupon": "Coupon",
|
||||
"couponText": "We sometimes have events and give out promo codes for special gear. (eg, those who stop by our Wondercon booth)",
|
||||
|
||||
@@ -3,6 +3,10 @@
|
||||
"subscriptions": "Subscriptions",
|
||||
"viewSubscriptions": "View Subscriptions",
|
||||
"sendGems": "Send Gems",
|
||||
"howManyGemsPurchase": "How many Gems would you like to purchase?",
|
||||
"howManyGemsSend":"How many Gems would you like to send?",
|
||||
"needToPurchaseGems": "Need to purchase Gems as a gift?",
|
||||
"wantToSendOwnGems": "Want to send your own Gems?",
|
||||
"buyGemsGold": "Buy Gems with Gold",
|
||||
"mustSubscribeToPurchaseGems": "Must subscribe to purchase gems with GP",
|
||||
"reachedGoldToGemCapQuantity": "Your requested amount <%= quantity %> exceeds the amount you can buy for this month (<%= convCap %>). The full amount becomes available within the first three days of each month. Thanks for subscribing!",
|
||||
@@ -198,5 +202,6 @@
|
||||
"needToUpdateCard": "Need to update your card?",
|
||||
"readyToResubscribe": "Are you ready to resubscribe?",
|
||||
"cancelYourSubscription": "Cancel your subscription?",
|
||||
"cancelSubAlternatives": "If you're having technical problems or Habitica doesn't seem to be working out for you, please consider <a href='mailto:admin@habitica.com'>contacting us</a>. We want to help you get the most from Habitica."
|
||||
"cancelSubAlternatives": "If you're having technical problems or Habitica doesn't seem to be working out for you, please consider <a href='mailto:admin@habitica.com'>contacting us</a>. We want to help you get the most from Habitica.",
|
||||
"sendAGift": "Send Gift"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user