diff --git a/website/client/assets/images/amazon-payments.png b/website/client/assets/images/amazon-payments.png new file mode 100644 index 0000000000..3ee2d1e437 Binary files /dev/null and b/website/client/assets/images/amazon-payments.png differ diff --git a/website/client/assets/images/gem-rain.png b/website/client/assets/images/gem-rain.png new file mode 100644 index 0000000000..3ca3f2b331 Binary files /dev/null and b/website/client/assets/images/gem-rain.png differ diff --git a/website/client/assets/images/gemfall.png b/website/client/assets/images/gemfall.png new file mode 100644 index 0000000000..f7b26f6b11 Binary files /dev/null and b/website/client/assets/images/gemfall.png differ diff --git a/website/client/assets/images/gold-rain.png b/website/client/assets/images/gold-rain.png new file mode 100644 index 0000000000..cec2f96505 Binary files /dev/null and b/website/client/assets/images/gold-rain.png differ diff --git a/website/client/assets/images/paypal.png b/website/client/assets/images/paypal.png new file mode 100644 index 0000000000..3a9abeae23 Binary files /dev/null and b/website/client/assets/images/paypal.png differ diff --git a/website/client/assets/svg/21-gems.svg b/website/client/assets/svg/21-gems.svg new file mode 100644 index 0000000000..683ac44c26 --- /dev/null +++ b/website/client/assets/svg/21-gems.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/client/assets/svg/4-gems.svg b/website/client/assets/svg/4-gems.svg new file mode 100644 index 0000000000..c1cb97adf2 --- /dev/null +++ b/website/client/assets/svg/4-gems.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/client/assets/svg/42-gems.svg b/website/client/assets/svg/42-gems.svg new file mode 100644 index 0000000000..c99a6c4034 --- /dev/null +++ b/website/client/assets/svg/42-gems.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/client/assets/svg/84-gems.svg b/website/client/assets/svg/84-gems.svg new file mode 100644 index 0000000000..2547c22754 --- /dev/null +++ b/website/client/assets/svg/84-gems.svg @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/client/assets/svg/credit-card.svg b/website/client/assets/svg/credit-card.svg new file mode 100644 index 0000000000..b0cbab8ab6 --- /dev/null +++ b/website/client/assets/svg/credit-card.svg @@ -0,0 +1,15 @@ + + + + + + + + Credit Card + + + + + + + diff --git a/website/client/components/appMenu.vue b/website/client/components/appMenu.vue index 19e9d10e65..a7fd89a087 100644 --- a/website/client/components/appMenu.vue +++ b/website/client/components/appMenu.vue @@ -56,7 +56,7 @@ div .svg-icon(v-html="icons.hourglasses") span {{ userHourglasses }} .item-with-icon - .svg-icon.gem(v-html="icons.gem", @click='showBuyGemsModal()') + .svg-icon.gem(v-html="icons.gem", @click='showBuyGemsModal("gems")') span {{userGems | roundBigNumber}} .item-with-icon .svg-icon(v-html="icons.gold") @@ -68,15 +68,22 @@ div a.dropdown-item.edit-avatar.dropdown-separated(@click='showAvatar()') h3 {{ user.profile.name }} span.small-text {{ $t('editAvatar') }} - a.nav-link.dropdown-item(@click.prevent='showInbox()') + a.nav-link.dropdown-item.dropdown-separated(@click.prevent='showInbox()') | {{ $t('messages') }} span.message-count(v-if='user.inbox.newMessages > 0') {{user.inbox.newMessages}} a.dropdown-item(@click='showAvatar("backgrounds", "2017")') {{ $t('backgrounds') }} a.dropdown-item(@click='showProfile("stats")') {{ $t('stats') }} a.dropdown-item(@click='showProfile("achievements")') {{ $t('achievements') }} - a.dropdown-item(@click='showProfile("profile")') {{ $t('profile') }} - router-link.dropdown-item(:to="{name: 'site'}") {{ $t('settings') }} - a.nav-link.dropdown-item(to="/", @click.prevent='logout()') {{ $t('logout') }} + a.dropdown-item.dropdown-separated(@click='showProfile("profile")') {{ $t('profile') }} + router-link.dropdown-item.dropdown-separated(:to="{name: 'site'}") {{ $t('settings') }} + a.nav-link.dropdown-item.dropdown-separated(to="/", @click.prevent='logout()') {{ $t('logout') }} + li(v-if='!this.user.purchased.plan.customerId', @click='showBuyGemsModal("subscribe")') + .dropdown-item.text-center + h3.purple {{ $t('needMoreGems') }} + span.small-text {{ $t('needMoreGemsInfo') }} + img.float-left.align-self-end(src='~assets/images/gem-rain.png') + button.btn.btn-primary.btn-lg.learn-button Learn More + img.float-right.align-self-end(src='~assets/images/gold-rain.png') b-nav-toggle(target='nav_collapse') @@ -179,6 +186,25 @@ div border-bottom: 1px solid $gray-500; } + .user-dropdown { + width: 14.75em; + } + + .learn-button { + margin: 0.75em 0.75em 0.75em 1em; + } + + .purple { + color: $purple-200; + } + + .small-text { + color: $gray-200; + font-style: normal; + display: block; + white-space: normal; + } + .dropdown-menu:not(.user-dropdown) { background: $purple-200; border-radius: 0px; @@ -250,12 +276,6 @@ div margin-bottom: 0px; } - .small-text { - color: $gray-200; - font-style: normal; - display: block; - } - padding-top: 16px; padding-bottom: 16px; } @@ -353,14 +373,17 @@ export default { openPartyModal () { this.$root.$emit('show::modal', 'create-party-modal'); }, - showBuyGemsModal () { + showBuyGemsModal (startingPage) { + this.$store.state.gemModalOptions.startingPage = startingPage; + Analytics.track({ hitType: 'event', eventCategory: 'button', eventAction: 'click', eventLabel: 'Gems > Toolbar', }); - this.$root.$emit('show::modal', 'buy-gems'); + + this.$root.$emit('show::modal', 'buy-gems', {alreadyTracked: true}); }, }, }; diff --git a/website/client/components/payments/buyGemsModal.vue b/website/client/components/payments/buyGemsModal.vue index 0c446af1fa..bdabf0c59e 100644 --- a/website/client/components/payments/buyGemsModal.vue +++ b/website/client/components/payments/buyGemsModal.vue @@ -1,124 +1,378 @@ - diff --git a/website/client/store/index.js b/website/client/store/index.js index 74e3fd4130..f06df6779e 100644 --- a/website/client/store/index.js +++ b/website/client/store/index.js @@ -114,6 +114,9 @@ export default function () { profileOptions: { startingPage: '', }, + gemModalOptions: { + startingPage: '', + }, profileUser: {}, upgradingGroup: {}, notificationStore: [], diff --git a/website/common/locales/en/generic.json b/website/common/locales/en/generic.json index b886ba4c61..0c212e36e8 100644 --- a/website/common/locales/en/generic.json +++ b/website/common/locales/en/generic.json @@ -90,6 +90,8 @@ "gemsPopoverTitle": "Gems", "gems": "Gems", "gemButton": "You have <%= number %> Gems.", + "needMoreGems": "Need More Gems?", + "needMoreGemsInfo": "Purchase Gems now, or become a subscriber to buy Gems with Gold, get monthly mystery items, enjoy increased drop caps and more!", "moreInfo": "More Info", "moreInfoChallengesURL": "http://habitica.wikia.com/wiki/Challenges", "moreInfoTagsURL": "http://habitica.wikia.com/wiki/Tags", diff --git a/website/common/locales/en/subscriber.json b/website/common/locales/en/subscriber.json index d348823489..102678a50e 100644 --- a/website/common/locales/en/subscriber.json +++ b/website/common/locales/en/subscriber.json @@ -175,5 +175,28 @@ "missingCustomerId": "Missing req.query.customerId", "missingPaypalBlock": "Missing req.session.paypalBlock", "missingSubKey": "Missing req.query.sub", - "paypalCanceled": "Your subscription has been canceled" + "paypalCanceled": "Your subscription has been canceled", + "earnGemsMonthly": "Earn up to **<%= cap %> Gems** per month", + "receiveMysticHourglass": "Receive a Mystic Hourglass!", + "receiveMysticHourglasses": "Receive **<%= amount %> Mystic Hourglasses**!", + "everyMonth": "Every Month", + "everyXMonths": "Every <%= interval %> Months", + "everyYear": "Every Year", + "choosePaymentMethod": "Choose your payment method", + "subscribeSupportsDevs": "Subscribing supports the developers and helps keep Habitica running", + "buyGemsSupportsDevs": "Purchasing Gems supports the developers and helps keep Habitica running", + "support": "SUPPORT", + "gemBenefitLeadin": "Gems allow you to buy fun extras for your account, including:", + "gemBenefit1": "Unique and fashionable costumes for your avatar.", + "gemBenefit2": "Backgrounds to immerse your avatar in the world of Habitica!", + "gemBenefit3": "Exciting Quest chains that drop pet eggs.", + "gemBenefit4": "Reset your avatar's attribute points and change its Class.", + "subscriptionBenefitLeadin": "Support Habitica by becoming a subscriber and you’ll receive these useful benefits!", + "subscriptionBenefit1": "Alexander the Merchant will sell you Gems, for 20 Gold each!", + "subscriptionBenefit2": "Completed To-Dos and task history are available for longer.", + "subscriptionBenefit3": "Discover more items in Habitica with a doubled daily drop cap.", + "subscriptionBenefit4": "Unique cosmetic items for your avatar each month.", + "subscriptionBenefit5": "Receive the exclusive Royal Purple Jackalope pet!", + "subscriptionBenefit6": "Earn Mystic Hourglasses for use in the Time Travelers' Shop!", + "haveCouponCode": "Do you have a coupon code?" }