mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-07-14 18:22:21 +00:00
Merge branch 'develop' into release
This commit is contained in:
Sabe Jones
commit
8486b9631f
27 changed files with 422 additions and 292 deletions
BIN
website/client/assets/images/paypal-checkout.png
Executable file
BIN
website/client/assets/images/paypal-checkout.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -36,3 +36,4 @@
|
|||
@import './animals';
|
||||
@import './iconalert';
|
||||
@import './tiers';
|
||||
@import './payments';
|
||||
|
|
|
|||
44
website/client/assets/scss/payments.scss
Normal file
44
website/client/assets/scss/payments.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
.payments-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 296px;
|
||||
justify-content: center;
|
||||
|
||||
&.payments-disabled {
|
||||
opacity: 0.64;
|
||||
|
||||
.btn, .btn:hover, .btn:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.payment-item > *{
|
||||
cursor: default !important;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-item {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
|
||||
&.payment-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.credit-card-icon {
|
||||
width: 21.3px;
|
||||
height: 16px;
|
||||
margin-right: 8.7px;
|
||||
}
|
||||
|
||||
&.paypal-checkout {
|
||||
background: #009cde;
|
||||
|
||||
img {
|
||||
width: 157px;
|
||||
height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
3
website/client/assets/svg/credit-card-icon.svg
Normal file
3
website/client/assets/svg/credit-card-icon.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="16" viewBox="0 0 22 16">
|
||||
<path fill="#FFF" fill-rule="nonzero" d="M0 13.872V5.333h21.333v8.539c0 1.176-.747 2.128-1.67 2.128H1.67C.747 16 0 15.047 0 13.872zM19.664 0c.922 0 1.67.918 1.67 2.053v.614H0v-.614C0 .918.747 0 1.67 0h17.994z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 307 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill="#E1E0E3" fill-rule="evenodd" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
|
||||
<path class="star-empty" fill="#E1E0E3" fill-rule="evenodd" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 213 B After Width: | Height: | Size: 232 B |
|
|
@ -1,6 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path fill="#E1E0E3" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
|
||||
<path fill="#FFB445" d="M8 0L5.333 5.333 0 8l5.333 2.667L8 16z"/>
|
||||
<path class="star-empty" fill="#E1E0E3" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
|
||||
<path class="star" fill="#FFB445" d="M8 0L5.333 5.333 0 8l5.333 2.667L8 16z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 320 B After Width: | Height: | Size: 352 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill="#FFB445" fill-rule="evenodd" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
|
||||
<path class="star" fill="#FFB445" fill-rule="evenodd" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 213 B After Width: | Height: | Size: 226 B |
|
|
@ -22,11 +22,11 @@
|
|||
button.btn.btn-primary.btn-lg.btn-block(@click="createGroup()", :disabled="!newGroupIsReady") {{ $t('createGroupPlan') }}
|
||||
.col-12(v-if='activePage === PAGES.PAY')
|
||||
h2 {{ $t('choosePaymentMethod') }}
|
||||
.payment-providers
|
||||
.box.payment-button(@click='pay(PAYMENTS.STRIPE)')
|
||||
.svg-icon.credit-card-icon(v-html="icons.creditCard")
|
||||
.box.payment-button.amazon(@click='pay(PAYMENTS.AMAZON)')
|
||||
.svg-icon.amazon-pay-icon(v-html="icons.amazonpay")
|
||||
.payments-column
|
||||
button.purchase.btn.btn-primary.payment-button.payment-item(@click='pay(PAYMENTS.STRIPE)')
|
||||
.svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
|
||||
| {{ $t('card') }}
|
||||
amazon-button.payment-item(:amazon-data="pay(PAYMENTS.AMAZON)")
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -65,40 +65,29 @@
|
|||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.amazon-pay-icon {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.credit-card-icon {
|
||||
width: 150px;
|
||||
color: #4e4a57;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.payment-button.amazon {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import * as Analytics from 'client/libs/analytics';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import paymentsMixin from '../../mixins/payments';
|
||||
import amazonButton from 'client/components/payments/amazonButton';
|
||||
|
||||
import amazonpay from 'assets/svg/amazonpay.svg';
|
||||
import creditCard from 'assets/svg/credit-card.svg';
|
||||
import creditCardIcon from 'assets/svg/credit-card-icon.svg';
|
||||
|
||||
export default {
|
||||
mixins: [paymentsMixin],
|
||||
components: {
|
||||
amazonButton,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
amazonPayments: {},
|
||||
icons: Object.freeze({
|
||||
amazonpay,
|
||||
creditCard,
|
||||
creditCardIcon,
|
||||
}),
|
||||
PAGES: {
|
||||
CREATE_GROUP: 'create-group',
|
||||
|
|
@ -159,7 +148,7 @@ export default {
|
|||
this.showStripe(paymentData);
|
||||
} else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
|
||||
paymentData.type = 'subscription';
|
||||
this.amazonPaymentsInit(paymentData);
|
||||
return paymentData;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template lang="pug">
|
||||
.row.chat-row
|
||||
.col-12
|
||||
h3(v-once) {{ label }}
|
||||
h3.float-left.label(:class="{accepted: communityGuidelinesAccepted }") {{ label }}
|
||||
div.float-right(v-markdown='$t("markdownFormattingHelp")')
|
||||
|
||||
.row
|
||||
.row(v-if="communityGuidelinesAccepted")
|
||||
textarea(:placeholder='placeholder',
|
||||
v-model='newMessage',
|
||||
ref='user-entry',
|
||||
|
|
@ -22,14 +23,14 @@
|
|||
:caretPosition = 'caretPosition',
|
||||
:chat='group.chat')
|
||||
|
||||
community-guidelines
|
||||
|
||||
.row.chat-actions
|
||||
.col-6.chat-receive-actions
|
||||
button.btn.btn-secondary.float-left.fetch(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }}
|
||||
button.btn.btn-secondary.float-left(v-once, @click='reverseChat()') {{ $t('reverseChat') }}
|
||||
.col-6.chat-send-actions
|
||||
button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
|
||||
|
||||
community-guidelines
|
||||
button.btn.btn-primary.send-chat.float-right(:disabled="!communityGuidelinesAccepted", @click='sendMessage()') {{ $t('send') }}
|
||||
|
||||
slot(
|
||||
name="additionRow",
|
||||
|
|
@ -46,9 +47,14 @@
|
|||
import autocomplete from '../chat/autoComplete';
|
||||
import communityGuidelines from './communityGuidelines';
|
||||
import chatMessage from '../chat/chatMessages';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import markdownDirective from 'client/directives/markdown';
|
||||
|
||||
export default {
|
||||
props: ['label', 'group', 'placeholder'],
|
||||
directives: {
|
||||
markdown: markdownDirective,
|
||||
},
|
||||
components: {
|
||||
autocomplete,
|
||||
communityGuidelines,
|
||||
|
|
@ -71,9 +77,13 @@
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
currentLength () {
|
||||
return this.newMessage.length;
|
||||
},
|
||||
communityGuidelinesAccepted () {
|
||||
return this.user.flags.communityGuidelinesAccepted;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a
|
||||
|
|
@ -196,6 +206,16 @@
|
|||
.chat-row {
|
||||
position: relative;
|
||||
|
||||
.label:not(.accepted) {
|
||||
color: #a5a1ac;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 150px;
|
||||
width: 100%;
|
||||
|
|
@ -204,7 +224,7 @@
|
|||
font-style: italic;
|
||||
line-height: 1.43;
|
||||
color: $gray-300;
|
||||
padding: .5em;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.user-entry {
|
||||
|
|
|
|||
|
|
@ -11,17 +11,31 @@
|
|||
|
||||
.community-guidelines {
|
||||
background-color: rgba(135, 129, 144, 0.84);
|
||||
padding: 1em;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
color: $white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 150px;
|
||||
margin-top: 2.3em;
|
||||
width: 100%;
|
||||
// width: calc(100% - 24px);
|
||||
border-radius: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.col {
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 20px 12px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.btn-follow-guidelines {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,12 +21,12 @@
|
|||
.svg-icon.shield(v-html="icons.silverGuildBadgeIcon", v-if='group.memberCount > 100 && group.memberCount < 999')
|
||||
.svg-icon.shield(v-html="icons.bronzeGuildBadgeIcon", v-if='group.memberCount < 100')
|
||||
span.number {{ group.memberCount | abbrNum }}
|
||||
div.member-list(v-once) {{ $t('memberList') }}
|
||||
div.member-list.label(v-once) {{ $t('memberList') }}
|
||||
.col-4(v-if='!isParty')
|
||||
.item-with-icon(@click='showGroupGems()')
|
||||
.svg-icon.gem(v-html="icons.gem")
|
||||
span.number {{group.balance * 4}}
|
||||
div(v-once) {{ $t('guildBank') }}
|
||||
div.label(v-once) {{ $t('guildBank') }}
|
||||
chat(
|
||||
:label="$t('chat')",
|
||||
:group="group",
|
||||
|
|
@ -100,6 +100,9 @@
|
|||
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
min-width: 80px;
|
||||
max-width: 120px;
|
||||
height: 76px;
|
||||
|
||||
.svg-icon.shield, .svg-icon.gem {
|
||||
width: 28px;
|
||||
|
|
@ -115,7 +118,7 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.member-list {
|
||||
.label {
|
||||
margin-top: .5em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,14 +48,11 @@ div
|
|||
|
||||
.box.payment-providers
|
||||
h3 Choose your payment method
|
||||
.box.payment-button(@click='pay(PAYMENTS.STRIPE)')
|
||||
div
|
||||
.svg-icon.credit-card-icon(v-html="icons.group")
|
||||
p.credit-card Credit Card
|
||||
p Powered by Stripe
|
||||
.box.payment-button(@click='pay(PAYMENTS.AMAZON)')
|
||||
.svg-icon.amazon-pay-icon(v-html="icons.amazonpay")
|
||||
|
||||
.payments-column
|
||||
button.purchase.btn.btn-primary.payment-button.payment-item(@click='pay(PAYMENTS.STRIPE)')
|
||||
.svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
|
||||
| {{ $t('card') }}
|
||||
amazon-button.payment-item(:amazon-data="pay(PAYMENTS.AMAZON)")
|
||||
.container.col-6.offset-3.create-option(v-if='!upgradingGroup._id')
|
||||
.row
|
||||
h1.col-12.text-center.purple-header Create your Group today!
|
||||
|
|
@ -99,13 +96,13 @@ div
|
|||
.form-group
|
||||
button.btn.btn-primary.btn-lg.btn-block(@click="createGroup()", :disabled="!newGroupIsReady") {{ $t('createGroupPlan') }}
|
||||
.col-12(v-if='activePage === PAGES.PAY')
|
||||
.payment-providers
|
||||
.text-center
|
||||
h3 Choose your payment method
|
||||
.box.payment-button(@click='pay(PAYMENTS.STRIPE)')
|
||||
p Credit Card
|
||||
p Powered by Stripe
|
||||
.box.payment-button(@click='pay(PAYMENTS.AMAZON)')
|
||||
| Amazon Pay
|
||||
.payments-column.mx-auto
|
||||
button.purchase.btn.btn-primary.payment-button.payment-item(@click='pay(PAYMENTS.STRIPE)')
|
||||
.svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
|
||||
| {{ $t('card') }}
|
||||
amazon-button.payment-item(:amazon-data="pay(PAYMENTS.AMAZON)")
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -130,12 +127,6 @@ div
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.payment-button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.plus .svg-icon{
|
||||
width: 24px;
|
||||
}
|
||||
|
|
@ -143,26 +134,6 @@ div
|
|||
.payment-providers {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.credit-card {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
margin-top: .5em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.credit-card-icon {
|
||||
width: 25px;
|
||||
display: inline-block;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.amazon-pay-icon {
|
||||
width: 150px;
|
||||
margin: 0 auto;
|
||||
margin-top: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
@ -316,35 +287,25 @@ div
|
|||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-button {
|
||||
width: 200px;
|
||||
height: 80px;
|
||||
margin-bottom: .5em;
|
||||
padding: .5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.payment-button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import paymentsMixin from '../../mixins/payments';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import group from 'assets/svg/group.svg';
|
||||
import amazonpay from 'assets/svg/amazonpay.svg';
|
||||
import positiveIcon from 'assets/svg/positive.svg';
|
||||
import creditCardIcon from 'assets/svg/credit-card-icon.svg';
|
||||
import amazonButton from 'client/components/payments/amazonButton';
|
||||
|
||||
export default {
|
||||
mixins: [paymentsMixin],
|
||||
components: {
|
||||
amazonButton,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
amazonPayments: {},
|
||||
icons: Object.freeze({
|
||||
group,
|
||||
amazonpay,
|
||||
creditCardIcon,
|
||||
positiveIcon,
|
||||
}),
|
||||
PAGES: {
|
||||
|
|
@ -413,7 +374,7 @@ export default {
|
|||
this.showStripe(paymentData);
|
||||
} else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
|
||||
paymentData.type = 'subscription';
|
||||
this.amazonPaymentsInit(paymentData);
|
||||
return paymentData;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
|
|||
|
||||
.member-count {
|
||||
position: relative;
|
||||
top: -3.6em;
|
||||
top: -3.7em;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 1.1;
|
||||
|
|
|
|||
114
website/client/components/payments/amazonButton.vue
Normal file
114
website/client/components/payments/amazonButton.vue
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<template lang="pug">
|
||||
.amazon-pay-button(:id="buttonId")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import { mapState } from 'client/libs/store';
|
||||
import uuid from 'uuid';
|
||||
import paymentsMixin from 'client/mixins/payments';
|
||||
|
||||
const AMAZON_PAYMENTS = process.env.AMAZON_PAYMENTS; // eslint-disable-line
|
||||
|
||||
export default {
|
||||
mixins: [paymentsMixin],
|
||||
data () {
|
||||
return { // @TODO what needed here? can be moved to mixin?
|
||||
amazonPayments: {
|
||||
modal: null,
|
||||
type: null,
|
||||
gift: null,
|
||||
loggedIn: false,
|
||||
paymentSelected: false,
|
||||
billingAgreementId: '',
|
||||
recurringConsent: false,
|
||||
orderReferenceId: null,
|
||||
subscription: null,
|
||||
coupon: null,
|
||||
},
|
||||
isAmazonSetup: false,
|
||||
amazonButtonEnabled: false,
|
||||
groupToCreate: null, // creating new group
|
||||
group: null, // upgrading existing group
|
||||
buttonId: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
amazonData: Object,
|
||||
amazonDisabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
...mapState(['isAmazonReady']),
|
||||
amazonPaymentsCanCheckout () {
|
||||
if (this.amazonPayments.type === 'single') {
|
||||
return this.amazonPayments.paymentSelected === true;
|
||||
} else if (this.amazonPayments.type === 'subscription') {
|
||||
return this.amazonPayments.paymentSelected && this.amazonPayments.recurringConsent;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
amazonData () {
|
||||
this.amazonPaymentsInit(this.amazonData);
|
||||
},
|
||||
},
|
||||
beforeMount () {
|
||||
this.buttonId = `AmazonPayButton-${uuid.v4()}`;
|
||||
},
|
||||
mounted () {
|
||||
this.amazonPaymentsInit(this.amazonData);
|
||||
if (this.isAmazonReady) return this.setupAmazon();
|
||||
|
||||
this.$store.watch(state => state.isAmazonReady, (isAmazonReady) => {
|
||||
if (isAmazonReady) return this.setupAmazon();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
setupAmazon () {
|
||||
if (this.isAmazonSetup) return false;
|
||||
this.isAmazonSetup = true;
|
||||
this.showButton();
|
||||
},
|
||||
showButton () {
|
||||
window.OffAmazonPayments.Button( // eslint-disable-line new-cap
|
||||
this.buttonId, // ID of the button
|
||||
AMAZON_PAYMENTS.SELLER_ID,
|
||||
{
|
||||
type: 'PwA',
|
||||
color: 'Gold',
|
||||
size: 'large',
|
||||
agreementType: 'BillingAgreement',
|
||||
onSignIn: async (contract) => { // @TODO send to modal
|
||||
if (this.amazonDisabled === true) return null;
|
||||
// if (!this.checkGemAmount(this.amazonData)) return;
|
||||
this.amazonPayments.billingAgreementId = contract.getAmazonBillingAgreementId();
|
||||
|
||||
this.$set(this.amazonPayments, 'loggedIn', true);
|
||||
|
||||
this.$root.$emit('habitica::pay-with-amazon', this.amazonPayments);
|
||||
},
|
||||
authorization: () => {
|
||||
if (this.amazonDisabled === true) return null;
|
||||
window.amazon.Login.authorize({
|
||||
scope: 'payments:widget',
|
||||
popup: true,
|
||||
}, function amazonSuccess (response) {
|
||||
if (response.error) return alert(response.error);
|
||||
|
||||
const url = '/amazon/verifyAccessToken';
|
||||
axios.post(url, response).catch((e) => {
|
||||
alert(e.message);
|
||||
});
|
||||
});
|
||||
},
|
||||
onError: this.amazonOnError, // @TODO port here
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
<template lang="pug">
|
||||
b-modal#amazon-payment(title="Amazon", :hide-footer="true", size='md')
|
||||
h2.text-center Continue with Amazon
|
||||
#AmazonPayButton
|
||||
#AmazonPayWallet(v-if="amazonPayments.loggedIn", style="width: 400px; height: 228px;")
|
||||
template(v-if="amazonPayments.loggedIn && amazonPayments.type === 'subscription'")
|
||||
br
|
||||
|
|
@ -19,7 +18,7 @@
|
|||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#AmazonPayButton, #AmazonPayWallet, #AmazonPayRecurring {
|
||||
#AmazonPayWallet, #AmazonPayRecurring {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -54,7 +53,6 @@ export default {
|
|||
subscription: null,
|
||||
coupon: null,
|
||||
},
|
||||
OffAmazonPayments: {},
|
||||
isAmazonSetup: false,
|
||||
amazonButtonEnabled: false,
|
||||
groupToCreate: null, // creating new group
|
||||
|
|
@ -74,12 +72,6 @@ export default {
|
|||
},
|
||||
},
|
||||
mounted () {
|
||||
if (this.isAmazonReady) return this.setupAmazon();
|
||||
|
||||
this.$store.watch(state => state.isAmazonReady, (isAmazonReady) => {
|
||||
if (isAmazonReady) return this.setupAmazon();
|
||||
});
|
||||
|
||||
this.$root.$on('habitica::pay-with-amazon', (amazonPaymentsData) => {
|
||||
if (!amazonPaymentsData) return;
|
||||
|
||||
|
|
@ -90,67 +82,30 @@ export default {
|
|||
this.amazonPayments = Object.assign({}, amazonPayments, amazonPaymentsData);
|
||||
|
||||
this.$root.$emit('bv::show::modal', 'amazon-payment');
|
||||
|
||||
this.$nextTick(async () => {
|
||||
if (this.amazonPayments.type === 'subscription') {
|
||||
this.amazonInitWidgets();
|
||||
} else {
|
||||
let url = '/amazon/createOrderReferenceId';
|
||||
let response = await axios.post(url, {
|
||||
billingAgreementId: this.amazonPayments.billingAgreementId,
|
||||
});
|
||||
|
||||
if (response.status <= 400) {
|
||||
this.amazonPayments.orderReferenceId = response.data.data.orderReferenceId;
|
||||
this.amazonInitWidgets();
|
||||
} else {
|
||||
alert(response.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
destroyed () {
|
||||
this.$root.$off('habitica::pay-with-amazon');
|
||||
},
|
||||
methods: {
|
||||
setupAmazon () {
|
||||
if (this.isAmazonSetup) return false;
|
||||
this.isAmazonSetup = true;
|
||||
this.OffAmazonPayments = window.OffAmazonPayments;
|
||||
this.showButton();
|
||||
},
|
||||
showButton () {
|
||||
// @TODO: prevent modal close form clicking outside
|
||||
let amazonButton = this.OffAmazonPayments.Button( // eslint-disable-line
|
||||
'AmazonPayButton',
|
||||
AMAZON_PAYMENTS.SELLER_ID,
|
||||
{
|
||||
type: 'PwA',
|
||||
color: 'Gold',
|
||||
size: 'small',
|
||||
agreementType: 'BillingAgreement',
|
||||
onSignIn: async (contract) => {
|
||||
this.amazonPayments.billingAgreementId = contract.getAmazonBillingAgreementId();
|
||||
|
||||
this.$set(this.amazonPayments, 'loggedIn', true);
|
||||
|
||||
if (this.amazonPayments.type === 'subscription') {
|
||||
this.amazonInitWidgets();
|
||||
} else {
|
||||
let url = '/amazon/createOrderReferenceId';
|
||||
let response = await axios.post(url, {
|
||||
billingAgreementId: this.amazonPayments.billingAgreementId,
|
||||
});
|
||||
|
||||
if (response.status <= 400) {
|
||||
this.amazonPayments.orderReferenceId = response.data.data.orderReferenceId;
|
||||
this.amazonInitWidgets();
|
||||
return;
|
||||
}
|
||||
|
||||
alert(response.message);
|
||||
}
|
||||
},
|
||||
authorization: () => {
|
||||
window.amazon.Login.authorize({
|
||||
scope: 'payments:widget',
|
||||
popup: true,
|
||||
}, function amazonSuccess (response) {
|
||||
if (response.error) return alert(response.error);
|
||||
|
||||
let url = '/amazon/verifyAccessToken';
|
||||
axios.post(url, response)
|
||||
.catch((e) => {
|
||||
alert(e.message);
|
||||
});
|
||||
});
|
||||
},
|
||||
onError: this.amazonOnError,
|
||||
});
|
||||
},
|
||||
amazonInitWidgets () {
|
||||
let walletParams = {
|
||||
sellerId: AMAZON_PAYMENTS.SELLER_ID, // @TODO: Import
|
||||
|
|
@ -167,15 +122,14 @@ export default {
|
|||
walletParams.onReady = (billingAgreement) => {
|
||||
this.amazonPayments.billingAgreementId = billingAgreement.getAmazonBillingAgreementId();
|
||||
|
||||
new this.OffAmazonPayments.Widgets.Consent({
|
||||
new window.OffAmazonPayments.Widgets.Consent({
|
||||
sellerId: AMAZON_PAYMENTS.SELLER_ID,
|
||||
amazonBillingAgreementId: this.amazonPayments.billingAgreementId,
|
||||
design: {
|
||||
designMode: 'responsive',
|
||||
},
|
||||
onReady: (consent) => {
|
||||
let getConsent = consent.getConsentStatus;
|
||||
this.$set(this.amazonPayments, 'recurringConsent', getConsent ? Boolean(getConsent()) : false);
|
||||
this.$set(this.amazonPayments, 'recurringConsent', consent.getConsentStatus ? Boolean(consent.getConsentStatus()) : false);
|
||||
this.$set(this, 'amazonButtonEnabled', true);
|
||||
},
|
||||
onConsent: (consent) => {
|
||||
|
|
@ -189,7 +143,7 @@ export default {
|
|||
walletParams.amazonOrderReferenceId = this.amazonPayments.orderReferenceId;
|
||||
}
|
||||
|
||||
new this.OffAmazonPayments.Widgets.Wallet(walletParams).bind('AmazonPayWallet');
|
||||
new window.OffAmazonPayments.Widgets.Wallet(walletParams).bind('AmazonPayWallet');
|
||||
},
|
||||
storePaymentStatusAndReload (url) {
|
||||
let paymentType;
|
||||
|
|
@ -305,30 +259,6 @@ export default {
|
|||
amazonOnPaymentSelect () {
|
||||
this.$set(this.amazonPayments, 'paymentSelected', true);
|
||||
},
|
||||
amazonOnError (error) {
|
||||
alert(error.getErrorMessage());
|
||||
this.reset();
|
||||
},
|
||||
reset () {
|
||||
// @TODO: Ensure we are using all of these
|
||||
// some vars are set in the payments mixin. We should try to edit in one place
|
||||
this.amazonPayments.modal = null;
|
||||
this.amazonPayments.type = null;
|
||||
this.amazonPayments.loggedIn = false;
|
||||
|
||||
// Gift
|
||||
this.amazonPayments.gift = null;
|
||||
this.amazonPayments.giftReceiver = null;
|
||||
|
||||
this.amazonPayments.billingAgreementId = null;
|
||||
this.amazonPayments.orderReferenceId = null;
|
||||
this.amazonPayments.paymentSelected = false;
|
||||
this.amazonPayments.recurringConsent = false;
|
||||
this.amazonPayments.subscription = null;
|
||||
this.amazonPayments.coupon = null;
|
||||
this.amazonPayments.groupToCreate = null;
|
||||
this.amazonPayments.group = null;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -44,16 +44,15 @@
|
|||
button.btn.btn-primary(@click='gemAmount === 20 ? gemAmount = 0 : gemAmount = 20') {{gemAmount === 20 ? $t('selected') : '$5.00'}}
|
||||
.row.text-center
|
||||
h2.mx-auto.text-payment {{ $t('choosePaymentMethod') }}
|
||||
.card-deck
|
||||
.card.text-center.payment-method(@click='showStripe({})')
|
||||
.card-body
|
||||
.mx-auto(v-html='icons.creditCard', style='"height: 56px; width: 159px; margin-top: 1em;"')
|
||||
.card.text-center.payment-method
|
||||
a.card-body.paypal(@click="openPaypal(paypalCheckoutLink, 'gems')")
|
||||
img(src='~assets/images/paypal.png')
|
||||
.card.text-center.payment-method(@click="amazonPaymentsInit({type: 'single'})")
|
||||
.card-body.amazon
|
||||
img(src='~assets/images/amazon-payments.png')
|
||||
.payments-column
|
||||
button.purchase.btn.btn-primary.payment-button.payment-item(@click='showStripe()')
|
||||
.svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
|
||||
| {{ $t('card') }}
|
||||
button.btn.payment-item.paypal-checkout.payment-button(@click="openPaypal(paypalCheckoutLink, 'gems')")
|
||||
|
|
||||
img(src='~assets/images/paypal-checkout.png', :alt="$t('paypal')")
|
||||
|
|
||||
amazon-button.payment-item(:amazon-data="{type: 'single'}")
|
||||
.row.text-center
|
||||
.svg-icon.mx-auto(v-html='icons.heart', style='"height: 24px; width: 24px;"')
|
||||
.row.text-center.text-outtro
|
||||
|
|
@ -127,16 +126,16 @@
|
|||
h2.mx-auto.text-payment(v-once) {{ $t('choosePaymentMethod') }}
|
||||
.row.text-center
|
||||
a.mx-auto(v-once) {{ $t('haveCouponCode') }}
|
||||
.card-deck(v-if='subscriptionPlan')
|
||||
.card.text-center.payment-method
|
||||
.card-body(@click='showStripe({subscription: subscriptionPlan})')
|
||||
.mx-auto(v-html='icons.creditCard', style='"height: 56px; width: 159px; margin-top: 1em;"')
|
||||
.card.text-center.payment-method
|
||||
a.card-body.paypal(@click="openPaypal(paypalSubscriptionLink, 'subscription')")
|
||||
img(src='~assets/images/paypal.png')
|
||||
.card.text-center.payment-method
|
||||
.card-body.amazon(@click="amazonPaymentsInit({type: 'subscription', subscription: subscriptionPlan})")
|
||||
img(src='~assets/images/amazon-payments.png')
|
||||
.payments-column(v-if='subscriptionPlan')
|
||||
button.purchase.btn.btn-primary.payment-button.payment-item(@click='showStripe({subscription: subscriptionPlan})')
|
||||
.svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
|
||||
| {{ $t('card') }}
|
||||
button.btn.payment-item.paypal-checkout.payment-button(@click="openPaypal(paypalSubscriptionLink, 'subscription')")
|
||||
|
|
||||
img(src='~assets/images/paypal-checkout.png', :alt="$t('paypal')")
|
||||
|
|
||||
amazon-button.payment-item(:amazon-data="{type: 'subscription', subscription: subscriptionPlan}")
|
||||
|
||||
.row.text-center
|
||||
.svg-icon.mx-auto(v-html='icons.heart', style='"height: 24px; width: 24px;"')
|
||||
.row.text-center.text-outtro
|
||||
|
|
@ -162,6 +161,11 @@
|
|||
<style lang="scss" scoped>
|
||||
@import '~client/assets/scss/colors.scss';
|
||||
|
||||
|
||||
.payments-column {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
a.mx-auto {
|
||||
color: #2995cd;
|
||||
}
|
||||
|
|
@ -174,10 +178,6 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
.amazon {
|
||||
padding-top: 1.8em;
|
||||
}
|
||||
|
||||
.benefits {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -194,19 +194,6 @@
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1em;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
|
||||
}
|
||||
|
||||
.card.active {
|
||||
border-color: #24cc8f;
|
||||
button {
|
||||
background-color: #24cc8f;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 80%;
|
||||
height: 1px;
|
||||
|
|
@ -272,18 +259,6 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.payment-method {
|
||||
background-color: #e1e0e3;
|
||||
}
|
||||
|
||||
.payment-method:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.paypal {
|
||||
padding-top: 1.3em;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 4em;
|
||||
}
|
||||
|
|
@ -328,7 +303,6 @@
|
|||
color: #4e4a57;
|
||||
font-size: 24px;
|
||||
margin: 1em;
|
||||
opacity: 0.64;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -339,7 +313,7 @@
|
|||
import paymentsMixin from 'client/mixins/payments';
|
||||
|
||||
import checkIcon from 'assets/svg/check.svg';
|
||||
import creditCard from 'assets/svg/credit-card.svg';
|
||||
import creditCardIcon from 'assets/svg/credit-card-icon.svg';
|
||||
import heart from 'assets/svg/health.svg';
|
||||
import logo from 'assets/svg/habitica-logo.svg';
|
||||
|
||||
|
|
@ -348,10 +322,13 @@
|
|||
import fortyTwoGems from 'assets/svg/42-gems.svg';
|
||||
import eightyFourGems from 'assets/svg/84-gems.svg';
|
||||
|
||||
import amazonButton from 'client/components/payments/amazonButton';
|
||||
|
||||
export default {
|
||||
mixins: [paymentsMixin],
|
||||
components: {
|
||||
planGemLimits,
|
||||
amazonButton,
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
|
|
@ -373,7 +350,7 @@
|
|||
icons: Object.freeze({
|
||||
logo,
|
||||
check: checkIcon,
|
||||
creditCard,
|
||||
creditCardIcon,
|
||||
fourGems,
|
||||
heart,
|
||||
twentyOneGems,
|
||||
|
|
@ -383,7 +360,6 @@
|
|||
gemAmount: 0,
|
||||
subscriptionPlan: '',
|
||||
selectedPage: 'subscribe',
|
||||
amazonPayments: {},
|
||||
planGemLimits,
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="pug">
|
||||
b-modal#send-gems(:title="title", :hide-footer="true", size='lg', @hide='onHide()')
|
||||
.modal-body(v-if='userReceivingGems')
|
||||
b-modal#send-gems(:title="title", :hide-footer="true", size='md', @hide='onHide()')
|
||||
div(v-if='userReceivingGems')
|
||||
.panel.panel-default(
|
||||
:class="gift.type === 'gems' ? 'panel-primary' : 'transparent'",
|
||||
@click='gift.type = "gems"'
|
||||
|
|
@ -32,7 +32,7 @@ b-modal#send-gems(:title="title", :hide-footer="true", size='lg', @hide='onHide(
|
|||
h3.panel-heading {{ $t('subscription') }}
|
||||
.panel-body
|
||||
.row
|
||||
.col-md-4
|
||||
.col-md-12
|
||||
.form-group
|
||||
.radio(v-for='block in subscriptionBlocks', v-if="block.target !== 'group' && block.canSubscribe === true")
|
||||
label
|
||||
|
|
@ -48,11 +48,18 @@ b-modal#send-gems(:title="title", :hide-footer="true", size='lg', @hide='onHide(
|
|||
@click="sendGift()",
|
||||
:disabled="sendingInProgress"
|
||||
) {{ $t("send") }}
|
||||
template(v-else)
|
||||
button.btn.btn-primary(@click='showStripe({gift, uuid: userReceivingGems._id, receiverName})') {{ $t('card') }}
|
||||
button.btn.btn-warning(@click='openPaypalGift({gift: gift, giftedTo: userReceivingGems._id, receiverName})') PayPal
|
||||
button.btn.btn-success(@click="amazonPaymentsInit({type: 'single', gift, giftedTo: userReceivingGems._id, receiverName})") Amazon Payments
|
||||
button.btn.btn-secondary(@click='close()') {{$t('cancel')}}
|
||||
.payments-column.mx-auto(v-else, :class="{'payments-disabled': !gift.subscription.key && gift.gems.amount < 1}")
|
||||
button.purchase.btn.btn-primary.payment-button.payment-item(@click='showStripe({gift, uuid: userReceivingGems._id, receiverName})', :disabled="!gift.subscription.key && gift.gems.amount < 1")
|
||||
.svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
|
||||
| {{ $t('card') }}
|
||||
button.btn.payment-item.paypal-checkout.payment-button(@click="openPaypalGift({gift: gift, giftedTo: userReceivingGems._id, receiverName})", :disabled="!gift.subscription.key && gift.gems.amount < 1")
|
||||
|
|
||||
img(src='~assets/images/paypal-checkout.png', :alt="$t('paypal')")
|
||||
|
|
||||
amazon-button.payment-item.mb-0(
|
||||
:amazon-data="{type: 'single', gift, giftedTo: userReceivingGems._id, receiverName}",
|
||||
:amazon-disabled="!gift.subscription.key && gift.gems.amount < 1",
|
||||
)
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -78,6 +85,12 @@ b-modal#send-gems(:title="title", :hide-footer="true", size='lg', @hide='onHide(
|
|||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
input[type="radio"] {
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import toArray from 'lodash/toArray';
|
||||
import omitBy from 'lodash/omitBy';
|
||||
|
|
@ -86,12 +99,17 @@ import { mapState } from 'client/libs/store';
|
|||
import planGemLimits from '../../../common/script/libs/planGemLimits';
|
||||
import paymentsMixin from 'client/mixins/payments';
|
||||
import notificationsMixin from 'client/mixins/notifications';
|
||||
import amazonButton from 'client/components/payments/amazonButton';
|
||||
import creditCardIcon from 'assets/svg/credit-card-icon.svg';
|
||||
|
||||
// @TODO: EMAILS.TECH_ASSISTANCE_EMAIL, load from config
|
||||
const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
|
||||
|
||||
export default {
|
||||
mixins: [paymentsMixin, notificationsMixin],
|
||||
components: {
|
||||
amazonButton,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
planGemLimits,
|
||||
|
|
@ -110,6 +128,9 @@ export default {
|
|||
},
|
||||
sendingInProgress: false,
|
||||
userReceivingGems: null,
|
||||
icons: Object.freeze({
|
||||
creditCardIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -73,15 +73,15 @@
|
|||
|
||||
.subscribe-pay(v-if='!hasSubscription || hasCanceledSubscription')
|
||||
h3 {{ $t('subscribeUsing') }}
|
||||
.row.text-center
|
||||
.col-md-4
|
||||
button.purchase.btn.btn-primary(@click='showStripe({subscription:subscription.key, coupon:subscription.coupon})', :disabled='!subscription.key') {{ $t('card') }}
|
||||
.col-md-4
|
||||
a.purchase(@click="openPaypal(paypalPurchaseLink, 'subscription')", :disabled='!subscription.key')
|
||||
img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png', :alt="$t('paypal')")
|
||||
.col-md-4
|
||||
a.btn.btn-secondary.purchase(@click="payWithAmazon()")
|
||||
img(src='https://payments.amazon.com/gp/cba/button', :alt="$t('amazonPayments')")
|
||||
.payments-column
|
||||
button.purchase.btn.btn-primary.payment-button.payment-item(@click='showStripe({subscription:subscription.key, coupon:subscription.coupon})', :disabled='!subscription.key')
|
||||
.svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
|
||||
| {{ $t('card') }}
|
||||
button.btn.payment-item.paypal-checkout.payment-button(@click="openPaypal(paypalPurchaseLink, 'subscription')", :disabled='!subscription.key')
|
||||
|
|
||||
img(src='~assets/images/paypal-checkout.png', :alt="$t('paypal')")
|
||||
|
|
||||
amazon-button.payment-item(:amazon-data="{type: 'subscription', subscription: this.subscription.key, coupon: this.subscription.coupon}")
|
||||
.row
|
||||
.col-6
|
||||
h2(v-once) {{ $t('giftSubscription') }}
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
h4(v-once) {{ $t('giftSubscriptionText4') }}
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.badge.badge-success {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -115,8 +115,14 @@ import planGemLimits from '../../../common/script/libs/planGemLimits';
|
|||
import paymentsMixin from '../../mixins/payments';
|
||||
import notificationsMixin from '../../mixins/notifications';
|
||||
|
||||
import amazonButton from 'client/components/payments/amazonButton';
|
||||
import creditCardIcon from 'assets/svg/credit-card-icon.svg';
|
||||
|
||||
export default {
|
||||
mixins: [paymentsMixin, notificationsMixin],
|
||||
components: {
|
||||
amazonButton,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
|
|
@ -137,6 +143,9 @@ export default {
|
|||
PAYPAL: 'Paypal',
|
||||
GIFT: 'Gift',
|
||||
},
|
||||
icons: Object.freeze({
|
||||
creditCardIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -240,13 +249,6 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
payWithAmazon () {
|
||||
this.amazonPaymentsInit({
|
||||
type: 'subscription',
|
||||
subscription: this.subscription.key,
|
||||
coupon: this.subscription.coupon,
|
||||
});
|
||||
},
|
||||
async applyCoupon (coupon) {
|
||||
const response = await axios.post(`/api/v4/coupons/validate/${coupon}`);
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ layout-section(:title="$t('equipment')")
|
|||
span(slot="item", slot-scope="ctx")
|
||||
span.text {{ $t(ctx.item.id) }}
|
||||
|
||||
itemRows(
|
||||
itemRows.equipment-rows(
|
||||
:items="sortedGearItems",
|
||||
:itemWidth=94,
|
||||
:itemMargin=24,
|
||||
|
|
@ -169,6 +169,10 @@ layout-section(:title="$t('equipment')")
|
|||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.equipment-rows {
|
||||
/deep/ .item.item-empty {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
h1.mb-4.page-header(v-once) {{ $t('market') }}
|
||||
|
||||
equipment-section(
|
||||
v-if="viewOptions['equipment'].selected",
|
||||
v-if="!anyFilterSelected || viewOptions['equipment'].selected",
|
||||
:hidePinned="hidePinned",
|
||||
:hideLocked="hideLocked",
|
||||
:searchBy="searchTextThrottled"
|
||||
|
|
@ -39,17 +39,17 @@
|
|||
span.text {{ $t(ctx.item.id) }}
|
||||
div(
|
||||
v-for="category in categories",
|
||||
v-if="viewOptions[category.identifier].selected && category.identifier !== 'equipment'"
|
||||
v-if="!anyFilterSelected || viewOptions[category.identifier].selected && category.identifier !== 'equipment'"
|
||||
)
|
||||
h4 {{ category.text }}
|
||||
category-row(
|
||||
:hidePinned="hidePinned",
|
||||
:hideLocked="hideLocked",
|
||||
:searchBy="searchTextThrottled",
|
||||
:sortBy="selectedSortItemsBy.id",
|
||||
:category="category"
|
||||
)
|
||||
keys-to-kennel(v-if='category.identifier === "special"')
|
||||
category-row(
|
||||
:hidePinned="hidePinned",
|
||||
:hideLocked="hideLocked",
|
||||
:searchBy="searchTextThrottled",
|
||||
:sortBy="selectedSortItemsBy.id",
|
||||
:category="category"
|
||||
)
|
||||
keys-to-kennel(v-if='category.identifier === "special"')
|
||||
div.fill-height
|
||||
|
||||
inventoryDrawer(:showEggs="true", :showPotions="true")
|
||||
|
|
@ -290,13 +290,16 @@ export default {
|
|||
categories.map((category) => {
|
||||
if (!this.viewOptions[category.identifier]) {
|
||||
this.$set(this.viewOptions, category.identifier, {
|
||||
selected: true,
|
||||
selected: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return categories;
|
||||
},
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
sellItem (itemScope) {
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
|
||||
div(
|
||||
v-for="category in categories",
|
||||
v-if="viewOptions[category.identifier].selected"
|
||||
v-if="!anyFilterSelected || viewOptions[category.identifier].selected"
|
||||
)
|
||||
h2.mb-3 {{ category.text }}
|
||||
|
||||
|
|
@ -244,12 +244,14 @@
|
|||
display: inline-block;
|
||||
width: 33%;
|
||||
margin-bottom: 24px;
|
||||
vertical-align: top;
|
||||
|
||||
.items {
|
||||
border-radius: 2px;
|
||||
background-color: #edecee;
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
|
|
@ -258,6 +260,7 @@
|
|||
|
||||
.items > div:not(:last-of-type) {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -415,7 +418,7 @@ export default {
|
|||
if (this.shop.categories) {
|
||||
this.shop.categories.map((category) => {
|
||||
this.$set(this.viewOptions, category.identifier, {
|
||||
selected: true,
|
||||
selected: false,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -424,6 +427,10 @@ export default {
|
|||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
questItems (category, sortBy, searchBy, hideLocked, hidePinned) {
|
||||
|
|
|
|||
|
|
@ -58,6 +58,15 @@ dt {
|
|||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// making sure the star-colors always correct
|
||||
.star {
|
||||
fill: #ffb445;
|
||||
}
|
||||
.star-empty {
|
||||
fill: #686274;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -437,7 +437,7 @@
|
|||
|
||||
_forEach(equipmentList, (value) => {
|
||||
this.$set(this.viewOptions, value.key, {
|
||||
selected: true,
|
||||
selected: false,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -446,6 +446,10 @@
|
|||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getClassName (classType) {
|
||||
|
|
@ -468,7 +472,7 @@
|
|||
return false;
|
||||
}
|
||||
|
||||
if (viewOptions[i.type] && !viewOptions[i.type].selected) {
|
||||
if (this.anyFilterSelected && viewOptions[i.type] && !viewOptions[i.type].selected) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
div(
|
||||
v-for="category in categories",
|
||||
v-if="!closed && viewOptions[category.identifier].selected",
|
||||
v-if="!anyFilterSelected || (!closed && viewOptions[category.identifier].selected)",
|
||||
:class="category.identifier"
|
||||
)
|
||||
h2.mb-3 {{ category.text }}
|
||||
|
|
@ -329,12 +329,15 @@
|
|||
|
||||
normalGroups.map((category) => {
|
||||
this.$set(this.viewOptions, category.identifier, {
|
||||
selected: true,
|
||||
selected: false,
|
||||
});
|
||||
});
|
||||
|
||||
return normalGroups;
|
||||
},
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
travelersItems (category, sortBy, searchBy, hidePinned) {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ span.badge.badge-pill.badge-item.badge-count(
|
|||
min-width: 24px;
|
||||
height: 24px;
|
||||
box-shadow: 0 1px 1px 0 rgba($black, 0.12);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -223,7 +223,6 @@ export default {
|
|||
return true;
|
||||
},
|
||||
amazonPaymentsInit (data) {
|
||||
if (!this.checkGemAmount(data)) return;
|
||||
if (data.type !== 'single' && data.type !== 'subscription') return;
|
||||
|
||||
if (data.gift) {
|
||||
|
|
@ -251,8 +250,30 @@ export default {
|
|||
|
||||
this.amazonPayments.gift = data.gift;
|
||||
this.amazonPayments.type = data.type;
|
||||
},
|
||||
amazonOnError (error) {
|
||||
alert(error.getErrorMessage());
|
||||
this.reset();
|
||||
},
|
||||
reset () {
|
||||
// @TODO: Ensure we are using all of these
|
||||
// some vars are set in the payments mixin. We should try to edit in one place
|
||||
this.amazonPayments.modal = null;
|
||||
this.amazonPayments.type = null;
|
||||
this.amazonPayments.loggedIn = false;
|
||||
|
||||
this.$root.$emit('habitica::pay-with-amazon', this.amazonPayments);
|
||||
// Gift
|
||||
this.amazonPayments.gift = null;
|
||||
this.amazonPayments.giftReceiver = null;
|
||||
|
||||
this.amazonPayments.billingAgreementId = null;
|
||||
this.amazonPayments.orderReferenceId = null;
|
||||
this.amazonPayments.paymentSelected = false;
|
||||
this.amazonPayments.recurringConsent = false;
|
||||
this.amazonPayments.subscription = null;
|
||||
this.amazonPayments.coupon = null;
|
||||
this.amazonPayments.groupToCreate = null;
|
||||
this.amazonPayments.group = null;
|
||||
},
|
||||
async cancelSubscription (config) {
|
||||
if (config && config.group && !confirm(this.$t('confirmCancelGroupPlan'))) return;
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@
|
|||
"donationDesc": "20 Gems, Donation to Habitica",
|
||||
"payWithCard": "Pay with Card",
|
||||
"payNote": "Note: PayPal sometimes takes a long time to clear. We recommend paying with card.",
|
||||
"card": "Credit Card (using Stripe)",
|
||||
"card": "Credit Card",
|
||||
"amazonInstructions": "Click the button to pay using Amazon Payments",
|
||||
"paymentMethods": "Purchase using",
|
||||
"paymentSuccessful": "Your payment was successful!",
|
||||
|
|
|
|||
Loading…
Reference in a new issue