sudoxreboot/habitica
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica.git synced 2026-07-10 14:18:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Revert "New payments buttons and new Amazon checkout flow (#10940)"

Browse source 
This reverts commit 77f3bb53de.
This commit is contained in:
Matteo Pagliazzi 2019-03-07 16:58:49 +01:00
parent bc91dd81e9
commit 2a367ab3a7
8 changed files with 118 additions and 195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
website/client/components/group-plans/createGroupModalPages.vue
View file

@ -25,8 +25,7 @@
.payment-providers
.box.payment-button(@click='pay(PAYMENTS.STRIPE)')
.svg-icon.credit-card-icon(v-html="icons.creditCard")
amazon-button(:amazon-data="pay(PAYMENTS.AMAZON)")
//.box.payment-button.amazon(@click='pay(PAYMENTS.AMAZON)')
.box.payment-button.amazon(@click='pay(PAYMENTS.AMAZON)')
.svg-icon.amazon-pay-icon(v-html="icons.amazonpay")
</template>
@ -88,21 +87,17 @@
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 amazonpay from 'assets/svg/amazonpay.svg';
import creditCard from 'assets/svg/credit-card.svg';
export default {
mixins: [paymentsMixin],
components: {
amazonButton,
},
data () {
return {
amazonPayments: {},
icons: Object.freeze({
// amazonpay,
amazonpay,
creditCard,
}),
PAGES: {
@ -164,7 +159,7 @@ export default {
this.showStripe(paymentData);
} else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
paymentData.type = 'subscription';
return paymentData;
this.amazonPaymentsInit(paymentData);
}
},
},

16
website/client/components/groups/groupPlan.vue
View file

@ -53,8 +53,7 @@ div
.svg-icon.credit-card-icon(v-html="icons.group")
p.credit-card Credit Card
p Powered by Stripe
amazon-button(:amazon-data="pay(PAYMENTS.AMAZON)")
//.box.payment-button(@click='pay(PAYMENTS.AMAZON)')
.box.payment-button(@click='pay(PAYMENTS.AMAZON)')
.svg-icon.amazon-pay-icon(v-html="icons.amazonpay")
.container.col-6.offset-3.create-option(v-if='!upgradingGroup._id')
@ -105,8 +104,7 @@ div
.box.payment-button(@click='pay(PAYMENTS.STRIPE)')
p Credit Card
p Powered by Stripe
amazon-button(:amazon-data="pay(PAYMENTS.AMAZON)")
//.box.payment-button(@click='pay(PAYMENTS.AMAZON)')
.box.payment-button(@click='pay(PAYMENTS.AMAZON)')
| Amazon Pay
</template>
@ -336,21 +334,17 @@ div
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 amazonpay from 'assets/svg/amazonpay.svg';
import positiveIcon from 'assets/svg/positive.svg';
import amazonButton from 'client/components/payments/amazonButton';
export default {
mixins: [paymentsMixin],
components: {
amazonButton,
},
data () {
return {
amazonPayments: {},
icons: Object.freeze({
group,
// amazonpay,
amazonpay,
positiveIcon,
}),
PAGES: {
@ -419,7 +413,7 @@ export default {
this.showStripe(paymentData);
} else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
paymentData.type = 'subscription';
return paymentData;
this.amazonPaymentsInit(paymentData);
}
},
},

110
website/client/components/payments/amazonButton.vue
View file

@ -1,110 +0,0 @@
<template lang="pug">
.amazon-pay-button(:id="buttonId")
</template>
<style scoped>
.amazon-pay-button {
width: 150px;
margin-bottom: 12px;
margin: 0 auto;
}
</style>
<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,
},
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;
},
},
beforeMount () {
this.buttonId = `AmazonPayButton-${uuid.v4()}`;
},
mounted () {
this.amazonPaymentsInit(this.amazonData); // TOOD clone
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: 'small',
agreementType: 'BillingAgreement',
onSignIn: async (contract) => { // @TODO send to modal
this.amazonPayments.billingAgreementId = contract.getAmazonBillingAgreementId();
this.$set(this.amazonPayments, 'loggedIn', true);
this.$root.$emit('habitica::pay-with-amazon', this.amazonPayments);
},
authorization: () => {
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>

114
website/client/components/payments/amazonModal.vue
View file

@ -1,6 +1,7 @@
<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
@ -18,7 +19,7 @@
margin-bottom: 12px;
}
#AmazonPayWallet, #AmazonPayRecurring {
#AmazonPayButton, #AmazonPayWallet, #AmazonPayRecurring {
margin: 0 auto;
}
@ -53,6 +54,7 @@ export default {
subscription: null,
coupon: null,
},
OffAmazonPayments: {},
isAmazonSetup: false,
amazonButtonEnabled: false,
groupToCreate: null, // creating new group
@ -72,6 +74,12 @@ 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;
@ -82,30 +90,67 @@ 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
@ -122,14 +167,15 @@ export default {
walletParams.onReady = (billingAgreement) => {
this.amazonPayments.billingAgreementId = billingAgreement.getAmazonBillingAgreementId();
new window.OffAmazonPayments.Widgets.Consent({
new this.OffAmazonPayments.Widgets.Consent({
sellerId: AMAZON_PAYMENTS.SELLER_ID,
amazonBillingAgreementId: this.amazonPayments.billingAgreementId,
design: {
designMode: 'responsive',
},
onReady: (consent) => {
this.$set(this.amazonPayments, 'recurringConsent', consent.getConsentStatus ? Boolean(consent.getConsentStatus()) : false);
let getConsent = consent.getConsentStatus;
this.$set(this.amazonPayments, 'recurringConsent', getConsent ? Boolean(getConsent()) : false);
this.$set(this, 'amazonButtonEnabled', true);
},
onConsent: (consent) => {
@ -143,7 +189,7 @@ export default {
walletParams.amazonOrderReferenceId = this.amazonPayments.orderReferenceId;
}
new window.OffAmazonPayments.Widgets.Wallet(walletParams).bind('AmazonPayWallet');
new this.OffAmazonPayments.Widgets.Wallet(walletParams).bind('AmazonPayWallet');
},
storePaymentStatusAndReload (url) {
let paymentType;
@ -259,6 +305,30 @@ 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>

14
website/client/components/payments/buyGemsModal.vue
View file

@ -51,8 +51,7 @@
.card.text-center.payment-method
a.card-body.paypal(@click="openPaypal(paypalCheckoutLink, 'gems')")
img(src='~assets/images/paypal.png')
amazon-button(:amazon-data="{type: 'single'}")
// .card.text-center.payment-method(@click="amazonPaymentsInit({type: 'single'})")
.card.text-center.payment-method(@click="amazonPaymentsInit({type: 'single'})")
.card-body.amazon
img(src='~assets/images/amazon-payments.png')
.row.text-center
@ -136,8 +135,7 @@
a.card-body.paypal(@click="openPaypal(paypalSubscriptionLink, 'subscription')")
img(src='~assets/images/paypal.png')
.card.text-center.payment-method
amazon-button(:amazon-data="{type: 'subscription', subscription: subscriptionPlan}")
// .card-body.amazon(@click="amazonPaymentsInit({type: 'subscription', subscription: subscriptionPlan})")
.card-body.amazon(@click="amazonPaymentsInit({type: 'subscription', subscription: subscriptionPlan})")
img(src='~assets/images/amazon-payments.png')
.row.text-center
.svg-icon.mx-auto(v-html='icons.heart', style='"height: 24px; width: 24px;"')
@ -176,6 +174,10 @@
font-size: 16px;
}
.amazon {
padding-top: 1.8em;
}
.benefits {
font-size: 14px;
}
@ -346,13 +348,10 @@
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'}),
@ -384,6 +383,7 @@
gemAmount: 0,
subscriptionPlan: '',
selectedPage: 'subscribe',
amazonPayments: {},
planGemLimits,
};
},

7
website/client/components/payments/sendGemsModal.vue
View file

@ -51,8 +51,7 @@ b-modal#send-gems(:title="title", :hide-footer="true", size='lg', @hide='onHide(
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
amazon-button(:amazon-data="{type: 'single', gift, giftedTo: userReceivingGems._id, receiverName}")
//button.btn.btn-success(@click="amazonPaymentsInit({type: 'single', gift, giftedTo: userReceivingGems._id, receiverName})") Amazon Payments
button.btn.btn-success(@click="amazonPaymentsInit({type: 'single', gift, giftedTo: userReceivingGems._id, receiverName})") Amazon Payments
button.btn.btn-secondary(@click='close()') {{$t('cancel')}}
</template>
@ -87,16 +86,12 @@ 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';
// @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,

15
website/client/components/settings/subscription.vue
View file

@ -80,8 +80,7 @@
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
amazon-button(:amazon-data="{type: 'subscription', subscription: this.subscription.key, coupon: this.subscription.coupon}")
// a.btn.btn-secondary.purchase(@click="payWithAmazon()")
a.btn.btn-secondary.purchase(@click="payWithAmazon()")
img(src='https://payments.amazon.com/gp/cba/button', :alt="$t('amazonPayments')")
.row
.col-6
@ -116,13 +115,8 @@ import planGemLimits from '../../../common/script/libs/planGemLimits';
import paymentsMixin from '../../mixins/payments';
import notificationsMixin from '../../mixins/notifications';
import amazonButton from 'client/components/payments/amazonButton';
export default {
mixins: [paymentsMixin, notificationsMixin],
components: {
amazonButton,
},
data () {
return {
loading: false,
@ -246,6 +240,13 @@ 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}`);

24
website/client/mixins/payments.js
View file

@ -251,30 +251,8 @@ 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;
// 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;
this.$root.$emit('habitica::pay-with-amazon', this.amazonPayments);
},
async cancelSubscription (config) {
if (config && config.group && !confirm(this.$t('confirmCancelGroupPlan'))) return;