krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-19 15:48:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

New Payments Buttons (#11045)

Browse Source 
* start implementing separate amazon button component

* wio

* switch amazon to new flow

* adjust amazon pay button size

* design buttons and add them to the settings page

* abstract css

* fixes and buy gems modal

* group plans css

* new buttons for gifts, fix padding in settings

* gift modal styles

* final style fixes
This commit is contained in:
Matteo Pagliazzi
2019-03-11 18:23:47 +01:00
committed by GitHub
parent ee20b1eea8
commit 6bccd2a866
15 changed files with 288 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,15 +73,13 @@
.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', srcset="~assets/images/paypal-checkout@3x.png 3x ~assets/images/paypal-checkout@2x.png 2x", :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 +90,7 @@
h4(v-once) {{ $t('giftSubscriptionText4') }}
</template>
<style scoped>
<style scoped lang="scss">
.badge.badge-success {
color: #fff;
}
@@ -115,8 +113,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 +141,9 @@ export default {
PAYPAL: 'Paypal',
GIFT: 'Gift',
},
icons: Object.freeze({
creditCardIcon,
}),
};
},
computed: {
@@ -240,13 +247,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}`);