krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-19 07:37:25 +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

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

@@ -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,13 @@ 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}")
button.purchase.btn.btn-primary.payment-button.payment-item(@click='showStripe({gift, uuid: userReceivingGems._id, receiverName})', :disabled="!gift.subscription.key")
.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")
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.mb-0(:amazon-data="{type: 'single', gift, giftedTo: userReceivingGems._id, receiverName}")
</template>
<style lang="scss">
@@ -78,6 +80,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 +94,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 +123,9 @@ export default {
},
sendingInProgress: false,
userReceivingGems: null,
icons: Object.freeze({
creditCardIcon,
}),
};
},
computed: {