diff --git a/website/client/assets/images/paypal-checkout.png b/website/client/assets/images/paypal-checkout.png
new file mode 100755
index 0000000000..71342566b1
Binary files /dev/null and b/website/client/assets/images/paypal-checkout.png differ
diff --git a/website/client/assets/scss/index.scss b/website/client/assets/scss/index.scss
index f8408b2812..de1f6b5021 100644
--- a/website/client/assets/scss/index.scss
+++ b/website/client/assets/scss/index.scss
@@ -36,3 +36,4 @@
@import './animals';
@import './iconalert';
@import './tiers';
+@import './payments';
diff --git a/website/client/assets/scss/payments.scss b/website/client/assets/scss/payments.scss
new file mode 100644
index 0000000000..469957ec9d
--- /dev/null
+++ b/website/client/assets/scss/payments.scss
@@ -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;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/website/client/assets/svg/credit-card-icon.svg b/website/client/assets/svg/credit-card-icon.svg
new file mode 100644
index 0000000000..85aabce066
--- /dev/null
+++ b/website/client/assets/svg/credit-card-icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/website/client/assets/svg/difficulty-star-empty.svg b/website/client/assets/svg/difficulty-star-empty.svg
index d8178601e3..de2e1e71e0 100644
--- a/website/client/assets/svg/difficulty-star-empty.svg
+++ b/website/client/assets/svg/difficulty-star-empty.svg
@@ -1,3 +1,3 @@
diff --git a/website/client/assets/svg/difficulty-star-half.svg b/website/client/assets/svg/difficulty-star-half.svg
index 8643d1a6fb..8a971eac36 100644
--- a/website/client/assets/svg/difficulty-star-half.svg
+++ b/website/client/assets/svg/difficulty-star-half.svg
@@ -1,6 +1,6 @@
diff --git a/website/client/assets/svg/difficulty-star.svg b/website/client/assets/svg/difficulty-star.svg
index 9409886974..f2179b8783 100644
--- a/website/client/assets/svg/difficulty-star.svg
+++ b/website/client/assets/svg/difficulty-star.svg
@@ -1,3 +1,3 @@
diff --git a/website/client/components/group-plans/createGroupModalPages.vue b/website/client/components/group-plans/createGroupModalPages.vue
index e0971792a8..8e480a9c11 100644
--- a/website/client/components/group-plans/createGroupModalPages.vue
+++ b/website/client/components/group-plans/createGroupModalPages.vue
@@ -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)")
diff --git a/website/client/components/payments/amazonModal.vue b/website/client/components/payments/amazonModal.vue
index 13380db0b5..823aae5e85 100644
--- a/website/client/components/payments/amazonModal.vue
+++ b/website/client/components/payments/amazonModal.vue
@@ -1,7 +1,6 @@
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;
- },
},
};
diff --git a/website/client/components/payments/buyGemsModal.vue b/website/client/components/payments/buyGemsModal.vue
index 1d98396be6..12e08dcc26 100644
--- a/website/client/components/payments/buyGemsModal.vue
+++ b/website/client/components/payments/buyGemsModal.vue
@@ -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 @@
@@ -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,
};
},
diff --git a/website/client/components/payments/sendGemsModal.vue b/website/client/components/payments/sendGemsModal.vue
index b03f521f57..79ddea17ff 100644
--- a/website/client/components/payments/sendGemsModal.vue
+++ b/website/client/components/payments/sendGemsModal.vue
@@ -1,6 +1,6 @@
-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",
+ )
+
+
-
diff --git a/website/client/components/shops/market/index.vue b/website/client/components/shops/market/index.vue
index ccf3f432de..6b8349bc27 100644
--- a/website/client/components/shops/market/index.vue
+++ b/website/client/components/shops/market/index.vue
@@ -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) {
diff --git a/website/client/components/shops/quests/index.vue b/website/client/components/shops/quests/index.vue
index 7194137872..9564e986f7 100644
--- a/website/client/components/shops/quests/index.vue
+++ b/website/client/components/shops/quests/index.vue
@@ -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) {
diff --git a/website/client/components/shops/quests/questInfo.vue b/website/client/components/shops/quests/questInfo.vue
index a395eca04e..b9d51ddeec 100644
--- a/website/client/components/shops/quests/questInfo.vue
+++ b/website/client/components/shops/quests/questInfo.vue
@@ -58,6 +58,15 @@ dt {
white-space: nowrap;
}
}
+
+// making sure the star-colors always correct
+.star {
+ fill: #ffb445;
+}
+.star-empty {
+ fill: #686274;
+}
+