krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 22:57:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Amazon payment fixes (#9562)

Browse Source 
* Added custom amazon event, removed redundency, fixed variable names

* Fixed more variables and group plan data
This commit is contained in:
Keith Holliday
2017-11-21 14:02:40 -06:00
committed by GitHub
parent 3ffea4332e
commit 9eaa531f66
7 changed files with 91 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
website/client/app.vue
View File

@@ -1,5 +1,6 @@
<template lang="pug">
#app(:class='{"casting-spell": castingSpell}')
amazon-payments-modal
snackbars
router-view(v-if="!isUserLoggedIn || isStaticPage")
template(v-else)
@@ -82,6 +83,7 @@ import BuyModal from './components/shops/buyModal.vue';
import SelectMembersModal from 'client/components/selectMembersModal.vue';
import notifications from 'client/mixins/notifications';
import { setup as setupPayments } from 'client/libs/payments';
import amazonPaymentsModal from 'client/components/payments/amazonModal';
export default {
mixins: [notifications],
@@ -94,6 +96,7 @@ export default {
snackbars,
BuyModal,
SelectMembersModal,
amazonPaymentsModal,
},
data () {
return {

11
website/client/components/groups/groupPlan.vue
View File

@@ -1,7 +1,6 @@
<template lang="pug">
// @TODO: Move to group plans folder
div
amazon-payments-modal(:amazon-payments-prop='amazonPayments')
div
.header
h1.text-center Need more for your Group?
@@ -78,7 +77,7 @@ div
div Each Additional
div Member
b-modal#group-plan-modal(title="Empty", size='md', hide-footer=true)
b-modal#group-plan-modal(title="Select Payment", size='md', hide-footer=true)
.col-12(v-if='activePage === PAGES.CREATE_GROUP')
.form-group
label.control-label(for='new-group-name') Name
@@ -200,6 +199,9 @@ div
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
padding: 2em;
text-align: center;
display: inline-block !important;
vertical-align: bottom;
margin-right: 1em;
img {
margin: 0 auto;
@@ -321,7 +323,6 @@ div
<script>
import paymentsMixin from '../../mixins/payments';
import amazonPaymentsModal from '../payments/amazonModal';
import { mapState } from 'client/libs/store';
import group from 'assets/svg/group.svg';
import amazonpay from 'assets/svg/amazonpay.svg';
@@ -329,9 +330,6 @@ import positiveIcon from 'assets/svg/positive.svg';
export default {
mixins: [paymentsMixin],
components: {
amazonPaymentsModal,
},
data () {
return {
amazonPayments: {},
@@ -405,6 +403,7 @@ export default {
if (this.paymentMethod === this.PAYMENTS.STRIPE) {
this.showStripe(paymentData);
} else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
paymentData.type = 'subscription';
this.amazonPaymentsInit(paymentData);
}
},

158
website/client/components/payments/amazonModal.vue
View File

@@ -2,8 +2,8 @@
b-modal#amazon-payment(title="Amazon", :hide-footer="true", size='md')
h2.text-center Continue with Amazon
#AmazonPayButton
#AmazonPayWallet(v-if="amazonLoggedIn", style="width: 400px; height: 228px;")
#AmazonPayRecurring(v-if="amazonLoggedIn && amazonPayments.type === 'subscription'",
#AmazonPayWallet(v-if="amazonPayments.loggedIn", style="width: 400px; height: 228px;")
#AmazonPayRecurring(v-if="amazonPayments.loggedIn && amazonPayments.type === 'subscription'",
style="width: 400px; height: 140px;")
.modal-footer
.text-center
@@ -30,40 +30,35 @@ import { mapState } from 'client/libs/store';
const AMAZON_PAYMENTS = process.env.AMAZON_PAYMENTS; // eslint-disable-line
export default {
props: ['amazonPaymentsProp'],
data () {
return {
amazonPayments: {
modal: null,
type: null,
gift: null,
loggedIn: false,
paymentSelected: false,
billingAgreementId: '',
recurringConsent: false,
orderReferenceId: null,
subscription: null,
coupon: null,
},
OffAmazonPayments: {},
isAmazonSetup: false,
amazonButtonEnabled: false,
amazonPaymentsbillingAgreementId: '',
amazonPaymentspaymentSelected: false,
amazonPaymentsrecurringConsent: 'false',
amazonLoggedIn: false,
};
},
computed: {
...mapState({user: 'user.data'}),
...mapState(['isAmazonReady']),
// @TODO: Eh, idk if we should move data props here or move these props to data. But we shouldn't have both
amazonPayments () {
let amazonPayments = {
type: 'single',
loggedIn: this.amazonLoggedIn,
};
amazonPayments = Object.assign({}, amazonPayments, this.amazonPaymentsProp);
return amazonPayments;
},
amazonPaymentsCanCheckout () {
if (this.amazonPayments.type === 'single') {
return this.amazonPaymentspaymentSelected === true;
return this.amazonPayments.paymentSelected === true;
} else if (this.amazonPayments.type === 'subscription') {
return this.amazonPaymentspaymentSelected === true &&
// Mah.. one is a boolean the other a string...
this.amazonPaymentsrecurringConsent === 'true';
} else {
return false;
return this.amazonPayments.paymentSelected && this.amazonPayments.recurringConsent;
}
return false;
},
},
mounted () {
@@ -72,6 +67,21 @@ export default {
this.$store.watch(state => state.isAmazonReady, (isAmazonReady) => {
if (isAmazonReady) return this.setupAmazon();
});
this.$root.$on('habitica::pay-with-amazon', (amazonPaymentsData) => {
if (!amazonPaymentsData) return;
let amazonPayments = {
type: 'single',
loggedIn: false,
};
this.amazonPayments = Object.assign({}, amazonPayments, amazonPaymentsData);
this.$root.$emit('bv::show::modal', 'amazon-payment');
});
},
destroyed () {
this.$root.$off('habitica::pay-with-amazon');
},
methods: {
setupAmazon () {
@@ -90,25 +100,21 @@ export default {
color: 'Gold',
size: 'small',
agreementType: 'BillingAgreement',
onSignIn: async (contract) => {
this.amazonPaymentsbillingAgreementId = contract.getAmazonBillingAgreementId();
this.amazonLoggedIn = true;
this.amazonPayments.billingAgreementId = contract.getAmazonBillingAgreementId();
this.$set(this.amazonPayments, 'loggedIn', true);
if (this.amazonPayments.type === 'subscription') {
this.amazonPaymentsinitWidgets();
this.amazonInitWidgets();
} else {
let url = '/amazon/createOrderReferenceId';
let response = await axios.post(url, {
billingAgreementId: this.amazonPaymentsbillingAgreementId,
billingAgreementId: this.amazonPayments.billingAgreementId,
});
if (response.status <= 400) {
this.amazonPayments.orderReferenceId = response.data.data.orderReferenceId;
// @TODO: Clarify the deifference of these functions by renaming
this.amazonPaymentsinitWidgets();
this.amazonInitWidgets();
return;
}
@@ -116,7 +122,6 @@ export default {
alert(response.message);
}
},
authorization: () => {
window.amazon.Login.authorize({
scope: 'payments:widget',
@@ -131,7 +136,6 @@ export default {
});
});
},
onError: this.amazonOnError,
});
},
@@ -141,38 +145,29 @@ export default {
design: {
designMode: 'responsive',
},
onPaymentSelect: () => {
this.amazonPaymentspaymentSelected = true;
},
onPaymentSelect: this.amazonOnPaymentSelect,
onError: this.amazonOnError,
};
// @TODO: Check if this is duplicated below
if (this.amazonPayments.type === 'subscription') {
walletParams.agreementType = 'BillingAgreement';
walletParams.billingAgreementId = this.amazonPaymentsbillingAgreementId;
walletParams.billingAgreementId = this.amazonPayments.billingAgreementId;
walletParams.onReady = (billingAgreement) => {
this.amazonPaymentsbillingAgreementId = billingAgreement.getAmazonBillingAgreementId();
this.amazonPayments.billingAgreementId = billingAgreement.getAmazonBillingAgreementId();
new this.OffAmazonPayments.Widgets.Consent({
sellerId: AMAZON_PAYMENTS.SELLER_ID,
amazonBillingAgreementId: this.amazonPaymentsbillingAgreementId,
amazonBillingAgreementId: this.amazonPayments.billingAgreementId,
design: {
designMode: 'responsive',
},
onReady: (consent) => {
let getConsent = consent.getConsentStatus;
this.amazonPaymentsrecurringConsent = getConsent ? getConsent() : false;
this.$set(this.amazonPayments, 'recurringConsent', getConsent ? Boolean(getConsent()) : false);
},
onConsent: (consent) => {
this.amazonPaymentsrecurringConsent = consent.getConsentStatus();
this.$set(this.amazonPayments, 'recurringConsent', Boolean(consent.getConsentStatus()));
},
onError: this.amazonOnError,
}).bind('AmazonPayRecurring');
};
@@ -191,7 +186,7 @@ export default {
let url = '/amazon/checkout';
let response = await axios.post(url, {
orderReferenceId: this.amazonPayments.orderReferenceId,
gift: this.amazonPaymentsgift,
gift: this.amazonPayments.gift,
});
if (response.status < 400) {
@@ -211,7 +206,7 @@ export default {
}
let response = await axios.post(url, {
billingAgreementId: this.amazonPaymentsbillingAgreementId,
billingAgreementId: this.amazonPayments.billingAgreementId,
subscription: this.amazonPayments.subscription,
coupon: this.amazonPayments.coupon,
groupId: this.amazonPayments.groupId,
@@ -243,67 +238,26 @@ export default {
this.reset();
}
},
amazonPaymentsinitWidgets () {
let walletParams = {
sellerId: AMAZON_PAYMENTS.SELLER_ID,
design: {
designMode: 'responsive',
},
onPaymentSelect: () => {
this.amazonPayments.paymentSelected = true;
},
onError: this.amazonOnError,
};
if (this.amazonPayments.type === 'subscription') {
walletParams.agreementType = 'BillingAgreement';
walletParams.billingAgreementId = this.amazonPayments.billingAgreementId;
walletParams.onReady = (billingAgreement) => {
this.amazonPayments.billingAgreementId = billingAgreement.getAmazonBillingAgreementId();
new this.OffAmazonPayments.Widgets.Consent({
sellerId: AMAZON_PAYMENTS.SELLER_ID,
amazonBillingAgreementId: this.amazonPayments.billingAgreementId,
design: {
designMode: 'responsive',
},
onReady: (consent) => {
let getConsent = consent.getConsentStatus;
this.amazonPayments.recurringConsent = getConsent ? getConsent() : false;
},
onConsent: (consent) => {
this.amazonPayments.recurringConsent = consent.getConsentStatus();
},
onError: this.amazonOnError,
}).bind('AmazonPayRecurring');
};
} else {
walletParams.amazonOrderReferenceId = this.amazonPayments.orderReferenceId;
}
new this.OffAmazonPayments.Widgets.Wallet(walletParams).bind('AmazonPayWallet');
amazonOnPaymentSelect () {
this.$set(this.amazonPayments, 'paymentSelected', true);
},
amazonOnError (error) {
alert(error.getErrorMessage());
this.reset();
},
reset () {
this.amazonPaymentsmodal = null;
// @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.amazonLoggedIn = false;
this.amazonPaymentsgift = null;
this.amazonPaymentsbillingAgreementId = null;
this.amazonPayments.loggedIn = false;
this.amazonPayments.gift = null;
this.amazonPayments.billingAgreementId = null;
this.amazonPayments.orderReferenceId = null;
this.amazonPaymentspaymentSelected = false;
this.amazonPaymentsrecurringConsent = false;
this.amazonPaymentssubscription = null;
this.amazonPaymentscoupon = null;
this.amazonPayments.paymentSelected = false;
this.amazonPayments.recurringConsent = false;
this.amazonPayments.subscription = null;
this.amazonPayments.coupon = null;
},
},
};

3
website/client/components/payments/buyGemsModal.vue
View File

@@ -7,7 +7,6 @@
.col-md-8.align-self-center
p=text
div(v-if='user')
amazon-payments-modal(:amazon-payments-prop='amazonPayments')
b-modal(:hide-footer='true', :hide-header='true', :id='"buy-gems"', size='lg')
.container-fluid.purple-gradient
.gemfall
@@ -344,7 +343,6 @@
import markdown from 'client/directives/markdown';
import planGemLimits from 'common/script/libs/planGemLimits';
import paymentsMixin from 'client/mixins/payments';
import amazonPaymentsModal from './amazonModal';
import checkIcon from 'assets/svg/check.svg';
import creditCard from 'assets/svg/credit-card.svg';
@@ -360,7 +358,6 @@
mixins: [paymentsMixin],
components: {
planGemLimits,
amazonPaymentsModal,
},
computed: {
...mapState({user: 'user.data'}),

5
website/client/components/payments/sendGemsModal.vue
View File

@@ -5,7 +5,6 @@ b-modal#send-gems(:title="title", :hide-footer="true", size='lg')
:class="gift.type === 'gems' ? 'panel-primary' : 'transparent'",
@click='gift.type = "gems"'
)
// @TODO the panel does not exists in Bootstrap 4
h3.panel-heading.clearfix
.float-right
span(v-if='gift.gems.fromBalance') {{ $t('sendGiftGemsBalance', {number: userLoggedIn.balance * 4}) }}
@@ -51,7 +50,7 @@ b-modal#send-gems(:title="title", :hide-footer="true", size='lg')
</template>
<style lang="scss">
.panel {
.panel {
margin-bottom: 4px;
&.transparent {
@@ -70,7 +69,7 @@ b-modal#send-gems(:title="title", :hide-footer="true", size='lg')
border-radius: 2px;
border: 1px solid #C3C0C7;
}
}
}
</style>
<script>

17
website/client/components/settings/subscription.vue
View File

@@ -1,7 +1,5 @@
<template lang="pug">
.standard-page
amazon-payments-modal(:amazon-payments-prop='amazonPayments')
h1 {{ $t('subscription') }}
.row
.col-6
@@ -82,9 +80,8 @@
a.purchase(:href='paypalPurchaseLink', :disabled='!subscription.key', target='_blank')
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="amazonPaymentsInit({type: 'subscription', subscription:subscription.key, coupon:subscription.coupon})")
a.btn.btn-secondary.purchase(@click="payWithAmazon()")
img(src='https://payments.amazon.com/gp/cba/button', :alt="$t('amazonPayments')")
.row
.col-6
h2 {{ $t('giftSubscription') }}
@@ -115,14 +112,10 @@ import { mapState } from 'client/libs/store';
import subscriptionBlocks from '../../../common/script/content/subscriptionBlocks';
import planGemLimits from '../../../common/script/libs/planGemLimits';
import amazonPaymentsModal from '../payments/amazonModal';
import paymentsMixin from '../../mixins/payments';
export default {
mixins: [paymentsMixin],
components: {
amazonPaymentsModal,
},
data () {
return {
gemCostTranslation: {
@@ -132,6 +125,7 @@ export default {
subscription: {
key: 'basic_earned',
},
// @TODO: Remove the need for this or move it to mixin
amazonPayments: {},
paymentMethods: {
AMAZON_PAYMENTS: 'Amazon Payments',
@@ -247,6 +241,13 @@ export default {
},
},
methods: {
payWithAmazon () {
this.amazonPaymentsInit({
type: 'subscription',
subscription: this.subscription.key,
coupon: this.subscription.coupon,
});
},
async applyCoupon (coupon) {
let response = await axios.get(`/api/v3/coupons/validate/${coupon}`);

2
website/client/mixins/payments.js
View File

@@ -169,7 +169,7 @@ export default {
this.amazonPayments.gift = data.gift;
this.amazonPayments.type = data.type;
this.$root.$emit('bv::show::modal', 'amazon-payment');
this.$root.$emit('habitica::pay-with-amazon', this.amazonPayments);
},
async cancelSubscription (config) {
if (config && config.group && !confirm(this.$t('confirmCancelGroupPlan'))) return;