mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 14:47:53 +01:00
Subscription Page Overhaul (#11823)
* WIP(settings): subscriber page improvements * WIP(subscriptions): more design build-out * fix(css): disabled button styles * fix(css): better Amazon targeting * WIP(g1g1): notif * WIP(g1g1): notif cont'd * WIP(gifting): partial modal implementation * feat(gifting): select giftee modal * fix(gifting): notification order, modal dismiss * fix(modals): correct some repops * fix(gifting): style updates * fix(modals): also clean out "prev" * refactor(modals): hide in dismiss event * fix(modals): new dismiss logic * fix(modals): new dismiss no go?? * WIP(subscription): unsubscribed state * WIP(subscription): partial subscribed * WIP(subscription): finish subscribed * feat(subscription): revised sub page RC * fix(subs): style tweaks * fix(subs): moar style tweaks
This commit is contained in:
Sabe Jones
GitHub
BIN
website/client/src/assets/images/g1g1-notif.png
Normal file
BIN
website/client/src/assets/images/g1g1-notif.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
website/client/src/assets/images/g1g1-send.png
Normal file
BIN
website/client/src/assets/images/g1g1-send.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
website/client/src/assets/images/subscriber-food.png
Normal file
BIN
website/client/src/assets/images/subscriber-food.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
@@ -61,7 +61,7 @@ h3 {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: $gray-50;
|
color: $gray-50;
|
||||||
margin-bottom: 9px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
|
|||||||
3
website/client/src/assets/svg/apple-pay-logo.svg
Normal file
3
website/client/src/assets/svg/apple-pay-logo.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="98" height="40" viewBox="0 0 98 40">
|
||||||
|
<path fill="#000" fill-rule="nonzero" d="M17.744 5.137c-1.137 1.346-2.957 2.408-4.777 2.256-.228-1.82.663-3.753 1.706-4.948C15.81 1.062 17.801.075 19.413 0c.189 1.896-.55 3.754-1.669 5.137zm1.65 2.617c-2.636-.152-4.892 1.497-6.143 1.497-1.27 0-3.185-1.422-5.27-1.384-2.71.038-5.232 1.574-6.616 4.02C-1.48 16.776.625 24.018 3.375 28c1.345 1.972 2.957 4.133 5.08 4.057 2.01-.076 2.806-1.308 5.232-1.308 2.446 0 3.147 1.308 5.27 1.27 2.2-.038 3.583-1.972 4.93-3.943 1.535-2.237 2.16-4.417 2.198-4.531-.038-.038-4.246-1.65-4.284-6.502-.038-4.057 3.317-5.99 3.47-6.105-1.897-2.805-4.854-3.109-5.878-3.184zm15.222-5.498V31.81h4.588V21.706h6.35c5.801 0 9.877-3.98 9.877-9.744 0-5.763-4-9.706-9.725-9.706h-11.09zm4.588 3.867h5.289c3.98 0 6.256 2.123 6.256 5.858 0 3.735-2.275 5.877-6.275 5.877h-5.27V6.123zM63.81 32.038c2.882 0 5.555-1.46 6.768-3.773h.095v3.545h4.246V17.1c0-4.266-3.412-7.015-8.663-7.015-4.872 0-8.474 2.787-8.607 6.616h4.133c.341-1.82 2.028-3.014 4.341-3.014 2.806 0 4.38 1.308 4.38 3.716v1.63l-5.726.341c-5.327.323-8.208 2.503-8.208 6.294 0 3.83 2.976 6.37 7.241 6.37zm1.233-3.507c-2.446 0-4-1.176-4-2.976 0-1.858 1.497-2.939 4.36-3.11l5.1-.322v1.668c0 2.768-2.351 4.74-5.46 4.74zm15.545 11.317c4.474 0 6.578-1.706 8.417-6.881l8.057-22.597h-4.664l-5.403 17.46H86.9l-5.402-17.46H76.7l7.773 21.516-.417 1.308c-.702 2.218-1.839 3.071-3.867 3.071-.36 0-1.062-.038-1.346-.075v3.545c.265.075 1.402.113 1.744.113z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
8
website/client/src/assets/svg/calendar-purple.svg
Normal file
8
website/client/src/assets/svg/calendar-purple.svg
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<path fill="#9A62FF" d="M20.571 3.429V0h-3.428v3.429H6.857V0H3.43v3.429A3.428 3.428 0 0 0 0 6.857v13.714A3.428 3.428 0 0 0 3.429 24H20.57A3.428 3.428 0 0 0 24 20.571V6.857a3.428 3.428 0 0 0-3.429-3.428z"/>
|
||||||
|
<path fill="#D5C8FF" d="M3.429 20.571H20.57V10.286H3.43z"/>
|
||||||
|
<path fill="#9A62FF" d="M3.429 13.286H20.57v-3H3.43z"/>
|
||||||
|
<path fill="#BDA8FF" d="M3.429 13.286H20.57v-3H3.43z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 550 B |
5
website/client/src/assets/svg/close-teal.svg
Normal file
5
website/client/src/assets/svg/close-teal.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
|
||||||
|
<g fill="none" fill-rule="evenodd" stroke="#8EEDF6" stroke-width="2">
|
||||||
|
<path d="M1 11L11 1M11 11L1 1"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 215 B |
13
website/client/src/assets/svg/gift-purple.svg
Normal file
13
website/client/src/assets/svg/gift-purple.svg
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="34" viewBox="0 0 32 34">
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<path stroke="#22AEB7" stroke-width="4" d="M12.558 7.452C11.49 5.033 9.422 2.896 6.934 2.79 4.446 2.684 3.019 4.68 3.75 6.444c.73 1.766 2.47 2.09 8.113 3.601 1.603.43 1.764-.174.695-2.593z"/>
|
||||||
|
<path stroke="#38C9C6" stroke-width="4" d="M18.916 7.452c1.07-2.419 3.137-4.556 5.625-4.662 2.488-.106 3.915 1.89 3.184 3.654-.73 1.766-2.47 2.09-8.114 3.601-1.602.43-1.764-.174-.695-2.593z"/>
|
||||||
|
<path fill="#46DDDA" d="M15.564 6c-4.87 0-1.953 5.572 0 5.572 1.954 0 4.87-5.572 0-5.572z"/>
|
||||||
|
<path fill="#6133B4" d="M3 17h26v17H3zM0 11h32v6H0z"/>
|
||||||
|
<path fill="#FFF" fill-opacity=".5" d="M16 17h13v17H16z" style="mix-blend-mode:soft-light"/>
|
||||||
|
<path fill="#8EEDF6" d="M16 17h3v17h-3z"/>
|
||||||
|
<path fill="#3BCAD7" d="M13 17h3v17h-3zM10 11h6v6h-6z"/>
|
||||||
|
<path fill="#8EEDF6" d="M16 11h6v6h-6z"/>
|
||||||
|
<path fill="#000" fill-opacity=".2" d="M3 17h13v3H3zM10 11h6v3h-6zM0 14h10v3H0zM22 14h10v3H22zM16 11h6v3h-6zM3 31h13v3H3zM16 17h13v3H16zM16 31h13v3H16z" style="mix-blend-mode:multiply"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
10
website/client/src/assets/svg/google-pay-logo.svg
Normal file
10
website/client/src/assets/svg/google-pay-logo.svg
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="40" viewBox="0 0 100 40">
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<path fill="#5F6368" fill-rule="nonzero" d="M47.131 19.561v11.6h-3.68V2.514h9.76a8.825 8.825 0 0 1 6.32 2.48 7.973 7.973 0 0 1 2.64 6.046 7.936 7.936 0 0 1-2.64 6.08c-1.706 1.627-3.813 2.44-6.32 2.439h-6.08v.002zm0-13.52v10h6.172a4.864 4.864 0 0 0 3.641-1.481 4.882 4.882 0 0 0 0-7.001 4.8 4.8 0 0 0-3.641-1.52H47.13v.002zM70.651 10.921c2.72 0 4.867.727 6.442 2.18 1.574 1.454 2.36 3.448 2.358 5.98v12.08h-3.52v-2.72h-.16c-1.523 2.24-3.55 3.36-6.08 3.36-2.159 0-3.965-.64-5.419-1.92a6.13 6.13 0 0 1-2.18-4.8c0-2.028.766-3.641 2.299-4.839 1.533-1.197 3.58-1.798 6.14-1.8 2.184 0 3.984.4 5.398 1.2V18.8a4.19 4.19 0 0 0-1.52-3.257 5.211 5.211 0 0 0-3.552-1.342c-2.055 0-3.682.867-4.88 2.601l-3.241-2.04c1.783-2.56 4.421-3.84 7.915-3.84zm-4.76 14.24a2.94 2.94 0 0 0 1.22 2.4 4.49 4.49 0 0 0 2.86.96 5.867 5.867 0 0 0 4.139-1.719c1.219-1.147 1.828-2.493 1.828-4.039-1.147-.914-2.747-1.371-4.8-1.371-1.495 0-2.741.36-3.74 1.081-1.007.732-1.508 1.62-1.508 2.688z"/>
|
||||||
|
<path fill="#5F6368" d="M99.657 11.561L87.37 39.801H83.57l4.56-9.881-8.08-18.359h4l5.84 14.08h.08l5.68-14.08z"/>
|
||||||
|
<path fill="#4285F4" d="M32.26 17.06a19.61 19.61 0 0 0-.283-3.346h-15.52v6.339h8.89a7.618 7.618 0 0 1-3.288 5v4.115h5.306c3.106-2.864 4.896-7.1 4.896-12.107z"/>
|
||||||
|
<path fill="#34A853" d="M16.457 33.143c4.441 0 8.18-1.458 10.908-3.973l-5.306-4.114c-1.476 1.001-3.378 1.573-5.602 1.573-4.292 0-7.936-2.894-9.239-6.794H1.753v4.24a16.457 16.457 0 0 0 14.704 9.068z"/>
|
||||||
|
<path fill="#FBBC04" d="M7.218 19.835a9.86 9.86 0 0 1 0-6.299v-4.24H1.753a16.457 16.457 0 0 0 0 14.78l5.465-4.24z"/>
|
||||||
|
<path fill="#EA4335" d="M16.457 6.743A8.935 8.935 0 0 1 22.77 9.21l4.697-4.697A15.813 15.813 0 0 0 16.457.23 16.457 16.457 0 0 0 1.753 9.296l5.465 4.24c1.303-3.9 4.947-6.793 9.24-6.793z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -1,5 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="24" viewBox="0 0 34 24">
|
|
||||||
<g fill="#4E4A57" fill-rule="nonzero">
|
|
||||||
<path d="M0 20.776c0 1.646 1.182 2.98 2.641 2.98H31.11c1.459 0 2.641-1.333 2.641-2.98V8.818H0v11.958zM31.109.244H2.64C1.182.244 0 1.577 0 3.224v.892h33.75v-.892c0-1.647-1.182-2.98-2.641-2.98z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 346 B |
7
website/client/src/assets/svg/habitica-logo-purple.svg
Normal file
7
website/client/src/assets/svg/habitica-logo-purple.svg
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="31" viewBox="0 0 144 31">
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<path fill="#4F2A93" d="M120.876 24.007a2.27 2.27 0 0 0-3.183.41 4.595 4.595 0 0 1-3.663 1.804 4.62 4.62 0 0 1-4.613-4.335c-.005-.35-.009-2.864-.009-3.19a4.627 4.627 0 0 1 4.622-4.622c1.28 0 2.47.51 3.353 1.44a2.269 2.269 0 0 0 3.29-3.125 9.2 9.2 0 0 0-6.643-2.853c-5.05 0-9.16 4.109-9.16 9.16 0 .03.002 3.175.014 3.406a9.158 9.158 0 0 0 9.146 8.657 9.1 9.1 0 0 0 7.257-3.57 2.27 2.27 0 0 0-.411-3.182M134.373 26.221a4.62 4.62 0 0 1-4.613-4.333c-.005-.353-.008-2.877-.008-3.193a4.627 4.627 0 0 1 4.621-4.622 4.627 4.627 0 0 1 4.622 4.622c0 .328-.003 2.84-.009 3.189a4.618 4.618 0 0 1-4.613 4.337m6.891-17.078a2.264 2.264 0 0 0-2.19 1.706 9.095 9.095 0 0 0-4.7-1.313c-5.051 0-9.16 4.109-9.16 9.16 0 .031.001 3.173.013 3.406a9.158 9.158 0 0 0 9.146 8.657 9.118 9.118 0 0 0 4.81-1.37 2.268 2.268 0 0 0 4.35-.899V11.412a2.27 2.27 0 0 0-2.269-2.269M30.546 26.221a4.62 4.62 0 0 1-4.613-4.335c-.006-.35-.01-2.863-.01-3.19a4.627 4.627 0 0 1 4.623-4.623 4.627 4.627 0 0 1 4.622 4.622c0 .328-.004 2.84-.01 3.189a4.618 4.618 0 0 1-4.612 4.337m6.89-17.078a2.264 2.264 0 0 0-2.19 1.706 9.095 9.095 0 0 0-4.7-1.313c-5.052 0-9.16 4.109-9.16 9.16 0 .031 0 3.174.013 3.406a9.158 9.158 0 0 0 9.147 8.657 9.118 9.118 0 0 0 4.809-1.37 2.268 2.268 0 0 0 4.35-.899V11.412a2.27 2.27 0 0 0-2.269-2.269M70.84 9.143a2.27 2.27 0 0 0-2.27 2.27V28.49a2.27 2.27 0 0 0 4.539 0V11.412a2.27 2.27 0 0 0-2.27-2.269M97.563 9.143a2.27 2.27 0 0 0-2.27 2.27V28.49a2.27 2.27 0 0 0 4.538 0V11.412a2.27 2.27 0 0 0-2.268-2.269M59.066 21.888a4.62 4.62 0 0 1-4.613 4.333 4.62 4.62 0 0 1-4.613-4.338c-.006-.35-.009-2.86-.009-3.187a4.627 4.627 0 0 1 4.622-4.622 4.627 4.627 0 0 1 4.622 4.622c0 .315-.004 2.84-.009 3.192M54.453 9.536a9.089 9.089 0 0 0-4.622 1.265V2.33a2.27 2.27 0 0 0-4.537 0V28.49a2.269 2.269 0 0 0 4.35.9 9.117 9.117 0 0 0 4.81 1.37 9.16 9.16 0 0 0 9.146-8.666c.011-.224.013-3.367.013-3.398 0-5.052-4.11-9.16-9.16-9.16M8.92 9.536a9.143 9.143 0 0 0-4.382 1.11V2.33A2.27 2.27 0 0 0 0 2.33v26.16a2.269 2.269 0 1 0 4.538 0V16.763c.173-.147.333-.314.46-.516a4.601 4.601 0 0 1 3.921-2.173 4.627 4.627 0 0 1 4.622 4.622c0 .415-.004 9.233-.01 9.738a2.27 2.27 0 0 0 4.535.172c.01-.225.012-9.814.012-9.91 0-5.052-4.108-9.16-9.159-9.16M88.95 9.143h-2.648V2.33a2.27 2.27 0 0 0-4.538 0v6.813h-2.647a2.27 2.27 0 0 0 0 4.538h2.647V28.49a2.27 2.27 0 0 0 4.538 0V13.681h2.647a2.27 2.27 0 0 0 0-4.538"/>
|
||||||
|
<path fill="#FF6066" d="M73.025 2.33a2.27 2.27 0 1 1-4.538 0 2.27 2.27 0 0 1 4.538 0"/>
|
||||||
|
<path fill="#4FB5E8" d="M99.748 2.33a2.27 2.27 0 1 1-4.539 0 2.27 2.27 0 0 1 4.539 0"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
8
website/client/src/assets/svg/paypal-logo.svg
Normal file
8
website/client/src/assets/svg/paypal-logo.svg
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="149" height="40" viewBox="0 0 149 40">
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<path fill="#283B82" fill-rule="nonzero" d="M17.806.284H6.265c-.79 0-1.462.574-1.585 1.354L.012 31.234a.96.96 0 0 0 .952 1.11h5.51c.79 0 1.461-.574 1.585-1.355l1.259-7.982A1.602 1.602 0 0 1 10.9 21.65h3.653c7.603 0 11.99-3.679 13.137-10.97.516-3.189.022-5.695-1.472-7.45C24.58 1.304 21.67.284 17.806.284zm1.332 10.81c-.631 4.141-3.796 4.141-6.855 4.141H10.54l1.222-7.734a.962.962 0 0 1 .95-.812h.798c2.085 0 4.05 0 5.067 1.188.606.709.791 1.762.56 3.217zM52.306 10.96H46.78a.963.963 0 0 0-.95.812l-.245 1.546-.387-.56c-1.196-1.737-3.865-2.317-6.528-2.317-6.107 0-11.323 4.625-12.34 11.114-.528 3.237.223 6.332 2.06 8.49 1.684 1.985 4.094 2.812 6.961 2.812 4.921 0 7.65-3.164 7.65-3.164l-.246 1.536a.961.961 0 0 0 .948 1.113h4.978c.792 0 1.46-.573 1.585-1.355l2.987-18.916a.958.958 0 0 0-.947-1.11zm-7.704 10.757c-.533 3.158-3.039 5.278-6.235 5.278-1.605 0-2.888-.515-3.711-1.49-.817-.97-1.128-2.348-.868-3.884.498-3.13 3.047-5.32 6.194-5.32 1.57 0 2.845.522 3.686 1.506.842.994 1.176 2.381.934 3.91z"/>
|
||||||
|
<path fill="#283B82" d="M81.742 10.96h-5.554a1.61 1.61 0 0 0-1.328.704L67.2 22.948l-3.247-10.843a1.608 1.608 0 0 0-1.54-1.145h-5.457a.962.962 0 0 0-.913 1.273l6.118 17.953-5.752 8.119a.962.962 0 0 0 .785 1.519h5.547a1.6 1.6 0 0 0 1.318-.689l18.473-26.664a.961.961 0 0 0-.79-1.51"/>
|
||||||
|
<path fill="#469BDB" fill-rule="nonzero" d="M100.13.284H88.587c-.788 0-1.46.574-1.583 1.354l-4.668 29.596a.96.96 0 0 0 .949 1.11h5.923c.55 0 1.021-.401 1.107-.948l1.325-8.39a1.602 1.602 0 0 1 1.583-1.355h3.652c7.604 0 11.99-3.679 13.138-10.97.518-3.189.02-5.695-1.473-7.45-1.639-1.927-4.547-2.947-8.41-2.947zm1.332 10.81c-.63 4.141-3.794 4.141-6.855 4.141h-1.74l1.223-7.734a.958.958 0 0 1 .949-.812h.798c2.083 0 4.05 0 5.066 1.188.606.709.79 1.762.559 3.217zM134.629 10.96h-5.524a.957.957 0 0 0-.948.812l-.245 1.546-.388-.56c-1.197-1.737-3.863-2.317-6.526-2.317-6.108 0-11.322 4.625-12.338 11.114-.527 3.237.22 6.332 2.057 8.49 1.688 1.985 4.094 2.812 6.961 2.812 4.921 0 7.65-3.164 7.65-3.164l-.246 1.536a.962.962 0 0 0 .952 1.113h4.977c.788 0 1.46-.573 1.583-1.355l2.988-18.916a.964.964 0 0 0-.953-1.11zm-7.704 10.757c-.53 3.158-3.04 5.278-6.236 5.278-1.602 0-2.888-.515-3.711-1.49-.817-.97-1.124-2.348-.867-3.884.5-3.13 3.046-5.32 6.193-5.32 1.57 0 2.845.522 3.686 1.506.845.994 1.18 2.381.935 3.91z"/>
|
||||||
|
<path fill="#469BDB" d="M141.145 1.096l-4.738 30.138a.96.96 0 0 0 .949 1.11h4.762c.792 0 1.464-.574 1.585-1.355l4.671-29.594a.961.961 0 0 0-.948-1.112h-5.333a.964.964 0 0 0-.948.813"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
26
website/client/src/assets/svg/subscriber-gems.svg
Normal file
26
website/client/src/assets/svg/subscriber-gems.svg
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="39" height="44" viewBox="0 0 39 44">
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<path fill="#24CC8F" d="M2.782 35.927l1.867-8.397 12.887-5.47 7.338 4.49-5.967 16.655z"/>
|
||||||
|
<path fill="#FFF" d="M9.147 33.008L6.351 28.98l5.523-2.344zM18.352 29.1l-.955-4.808-5.523 2.344z" opacity=".25"/>
|
||||||
|
<path fill="#FFF" d="M9.147 33.008l2.727-6.372 6.478 2.465zM5.097 34.727L6.35 28.98l2.796 4.028z" opacity=".5"/>
|
||||||
|
<path fill="#1B996B" d="M22.402 27.382l-5.005-3.09.955 4.809zM5.097 34.727l4.05-1.719 8.627 7.528z" opacity=".35"/>
|
||||||
|
<path fill="#FFF" d="M22.402 27.382l-4.05 1.719-.578 11.435z" opacity=".5"/>
|
||||||
|
<path fill="#FFF" d="M9.147 33.008l9.205-3.907-.578 11.435z" opacity=".25"/>
|
||||||
|
<g>
|
||||||
|
<path fill="#24CC8F" d="M23.248 7.266l4.784-3.162 8.714 3.345 1.44 5.55-10.575 5.225z"/>
|
||||||
|
<path fill="#FFF" d="M27.653 8.814l.524-3.227 3.734 1.434zM33.876 11.203l1.77-2.749-3.735-1.433z" opacity=".25"/>
|
||||||
|
<path fill="#FFF" d="M27.653 8.814L31.91 7.02l1.965 4.182zM24.914 7.763l3.263-2.176-.524 3.227z" opacity=".5"/>
|
||||||
|
<path fill="#1B996B" d="M36.615 12.254l-.97-3.8-1.769 2.749zM24.914 7.763l2.739 1.05.65 7.606z" opacity=".35"/>
|
||||||
|
<path fill="#FFF" d="M36.615 12.254l-2.739-1.051-5.572 5.216z" opacity=".5"/>
|
||||||
|
<path fill="#FFF" d="M27.653 8.814l6.223 2.389-5.572 5.216z" opacity=".25"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path fill="#24CC8F" d="M.815 5.996l1.58-4L9.185.301l3.273 2.791-4.25 7.758z"/>
|
||||||
|
<path fill="#FFF" d="M4.187 5.052L3.121 2.845l2.911-.726zM9.039 3.843l-.096-2.45-2.91.726z" opacity=".25"/>
|
||||||
|
<path fill="#FFF" d="M4.187 5.052L6.032 2.12 9.04 3.843zM2.053 5.585l1.068-2.74 1.066 2.207z" opacity=".5"/>
|
||||||
|
<path fill="#1B996B" d="M11.173 3.31l-2.23-1.917.096 2.45zM2.053 5.585l2.134-.533L7.86 9.445z" opacity=".35"/>
|
||||||
|
<path fill="#FFF" d="M11.173 3.31l-2.134.533-1.18 5.602z" opacity=".5"/>
|
||||||
|
<path fill="#FFF" d="M4.187 5.052l4.852-1.21-1.18 5.603z" opacity=".25"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
26
website/client/src/assets/svg/subscriber-hourglasses.svg
Normal file
26
website/client/src/assets/svg/subscriber-hourglasses.svg
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="47" viewBox="0 0 35 47">
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<path fill="#A9DCF6" fill-opacity=".8" d="M25.955 43.329l-.999 2.352a.939.939 0 0 1-.644.555c-3.194.747-9.918-2.107-11.6-4.923a.941.941 0 0 1-.047-.85l.998-2.351c.911-2.146 2.886-3.738 5.074-4.257a.957.957 0 0 0 .607-1.429c-1.147-1.934-1.374-4.46-.463-6.606l.998-2.352a.937.937 0 0 1 .643-.555c3.195-.746 9.919 2.108 11.6 4.924a.935.935 0 0 1 .049.848l-.999 2.353c-.91 2.145-2.886 3.737-5.074 4.256a.957.957 0 0 0-.606 1.429c1.146 1.934 1.373 4.46.463 6.606"/>
|
||||||
|
<path fill="#FFF" fill-opacity=".9" d="M26.145 25.795c-1.997-.848-3.705-1.145-4.72-1.087l-.788 1.857c-.656 1.547-.524 3.42.347 4.889.466.786.532 1.753.178 2.588a2.881 2.881 0 0 1-1.983 1.669c-1.664.395-3.103 1.6-3.76 3.146l-.788 1.858c.663.77 2.063 1.792 4.06 2.64 1.996.847 3.705 1.144 4.719 1.086l.789-1.858c.656-1.545.523-3.418-.348-4.887a2.883 2.883 0 0 1-.178-2.588 2.886 2.886 0 0 1 1.984-1.67c1.663-.394 3.103-1.6 3.759-3.146l.788-1.857c-.662-.77-2.063-1.793-4.06-2.64"/>
|
||||||
|
<path fill="#9A62FF" d="M25.383 27.029c1.497.636 3.026 1.448 2.883 1.825-.112.305-.366.882-1.844.982-1.436.098-2.123 1.1-2.765.828-.746-.317-.521-.966-1.166-1.98-.664-1.043-.444-1.979-.287-2.32.219-.473 1.681.03 3.179.665"/>
|
||||||
|
<path fill="#4F2A93" d="M22.491 28.685c-.664-1.044-.444-1.98-.287-2.32.173-.376 1.126-.139 2.26.292-.382.027-.93.194-1.114.902-.19.738.576 1.97.14 2.507a.755.755 0 0 1-.29.223c-.231-.363-.257-.894-.709-1.604"/>
|
||||||
|
<path fill="#9A62FF" d="M21.74 36.173c.455.193.22 1.074.662 1.871.543.978.984 2.084.72 3.294-.218.998-.425 1.046-.664 1.021-.238-.024-1.979-.438-3.425-1.454-1.447-1.016-2.062-2.025-1.633-2.608.409-.556 1.079-.893 2.157-1.154 1.032-.25 1.727-1.164 2.182-.97"/>
|
||||||
|
<path fill="#4F2A93" d="M22.458 42.36c-.24-.025-1.98-.439-3.425-1.455-1.15-.807-1.774-1.61-1.766-2.2a.138.138 0 0 1 .019-.027c.233-.302 1.651.06 3.193 1.031 1.47.925 2.526 1.988 2.271 2.573-.093.085-.19.088-.292.077"/>
|
||||||
|
<g>
|
||||||
|
<path fill="#A9DCF6" fill-opacity=".8" d="M12.754 15.163l.61 1.59a.626.626 0 0 1-.052.565c-1.185 1.837-5.732 3.582-7.843 3.01a.627.627 0 0 1-.415-.385l-.61-1.59c-.558-1.45-.348-3.129.461-4.39a.638.638 0 0 0-.37-.967c-1.446-.397-2.725-1.503-3.282-2.954l-.61-1.59a.625.625 0 0 1 .05-.564c1.187-1.837 5.734-3.582 7.844-3.01a.623.623 0 0 1 .416.384l.61 1.59c.557 1.45.347 3.129-.462 4.39a.638.638 0 0 0 .371.967c1.446.397 2.725 1.503 3.282 2.954"/>
|
||||||
|
<path fill="#FFF" fill-opacity=".9" d="M4.725 6.666c-1.35.518-2.307 1.167-2.767 1.665l.482 1.255c.402 1.046 1.333 1.883 2.43 2.184a1.922 1.922 0 0 1 1.284 1.159 1.92 1.92 0 0 1-.178 1.719c-.615.96-.747 2.204-.346 3.249l.483 1.256c.674.062 1.82-.096 3.17-.614 1.349-.518 2.306-1.167 2.765-1.664l-.482-1.257c-.401-1.044-1.332-1.881-2.43-2.182a1.922 1.922 0 0 1-1.284-1.16 1.924 1.924 0 0 1 .178-1.72c.615-.958.747-2.203.346-3.248l-.482-1.256c-.674-.062-1.82.096-3.17.614"/>
|
||||||
|
<path fill="#9A62FF" d="M4.93 7.61c1.013-.388 2.122-.706 2.229-.46.087.199.233.593-.43 1.325-.643.713-.508 1.512-.942 1.678-.505.194-.698-.222-1.476-.41-.802-.192-1.13-.743-1.212-.979-.115-.328.82-.765 1.832-1.153"/>
|
||||||
|
<path fill="#4F2A93" d="M4.31 9.744c-.801-.193-1.129-.743-1.211-.98-.091-.26.476-.587 1.219-.906-.17.19-.357.524-.116.948.25.443 1.188.678 1.228 1.138a.503.503 0 0 1-.036.241c-.28-.067-.537-.31-1.083-.44"/>
|
||||||
|
<path fill="#9A62FF" d="M7.418 13.683c.308-.118.603.413 1.185.59.713.218 1.436.544 1.87 1.247.358.58.28.698.154.797-.125.099-1.15.706-2.315.889-1.165.183-1.926-.016-1.991-.495-.061-.455.104-.927.5-1.552.38-.598.289-1.358.597-1.476"/>
|
||||||
|
<path fill="#4F2A93" d="M10.628 16.317c-.126.1-1.152.707-2.316.89-.926.144-1.597.048-1.866-.238a.092.092 0 0 1-.004-.022c-.027-.253.82-.736 2.01-.984 1.132-.237 2.132-.217 2.28.182-.006.084-.05.13-.104.172"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path fill="#A9DCF6" fill-opacity=".8" d="M32.605 10.804l-.31 1.24a.47.47 0 0 1-.275.324c-1.518.619-5.062-.265-6.113-1.524a.47.47 0 0 1-.09-.416l.31-1.24c.281-1.13 1.132-2.07 2.172-2.498a.479.479 0 0 0 .188-.753c-.718-.866-1.027-2.096-.745-3.226l.309-1.24a.469.469 0 0 1 .274-.324c1.519-.619 5.063.265 6.113 1.524.097.114.127.27.09.415l-.308 1.24c-.282 1.13-1.133 2.071-2.173 2.498a.479.479 0 0 0-.188.754c.718.865 1.027 2.095.746 3.226"/>
|
||||||
|
<path fill="#FFF" fill-opacity=".9" d="M31.327 2.13c-1.052-.262-1.92-.276-2.416-.168l-.244.98c-.203.814.009 1.729.554 2.386.292.352.4.824.29 1.264a1.44 1.44 0 0 1-.849.98 2.762 2.762 0 0 0-1.61 1.847l-.244.98c.387.328 1.16.723 2.211.986 1.052.262 1.92.275 2.416.167l.244-.98a2.761 2.761 0 0 0-.554-2.385 1.442 1.442 0 0 1-.29-1.265c.11-.44.427-.806.849-.98a2.76 2.76 0 0 0 1.61-1.847l.244-.979c-.387-.328-1.159-.724-2.211-.986"/>
|
||||||
|
<path fill="#9A62FF" d="M31.047 2.799c.79.197 1.608.478 1.567.676-.032.159-.112.464-.834.629-.701.16-.962.71-1.3.625-.394-.098-.334-.436-.731-.886-.41-.464-.375-.943-.324-1.124.071-.25.833-.117 1.622.08"/>
|
||||||
|
<path fill="#4F2A93" d="M29.749 3.843c-.41-.464-.375-.943-.324-1.124.056-.198.546-.156 1.139-.032-.186.044-.444.169-.48.533-.036.38.44.927.266 1.227a.378.378 0 0 1-.126.133c-.143-.161-.197-.422-.475-.737"/>
|
||||||
|
<path fill="#9A62FF" d="M29.963 7.6c.24.06.193.513.474.872.344.44.648.952.613 1.57-.03.51-.128.55-.248.556-.12.007-1.012-.061-1.805-.45-.794-.388-1.177-.838-1.01-1.16.158-.306.462-.525.974-.739.49-.204.762-.71 1.002-.65"/>
|
||||||
|
<path fill="#4F2A93" d="M30.802 10.599c-.12.006-1.012-.062-1.806-.45-.63-.31-1.002-.657-1.043-.949a.069.069 0 0 1 .007-.015c.091-.167.82-.1 1.657.26.798.341 1.403.784 1.323 1.092-.04.05-.087.059-.138.062"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.6 KiB |
@@ -4,6 +4,7 @@
|
|||||||
<profileModal />
|
<profileModal />
|
||||||
<report-flag-modal />
|
<report-flag-modal />
|
||||||
<send-gems-modal />
|
<send-gems-modal />
|
||||||
|
<select-user-modal />
|
||||||
<b-navbar
|
<b-navbar
|
||||||
class="topbar navbar-inverse static-top"
|
class="topbar navbar-inverse static-top"
|
||||||
toggleable="lg"
|
toggleable="lg"
|
||||||
@@ -360,7 +361,7 @@
|
|||||||
class="top-menu-icon svg-icon gem"
|
class="top-menu-icon svg-icon gem"
|
||||||
:aria-label="$t('gems')"
|
:aria-label="$t('gems')"
|
||||||
href="#buy-gems"
|
href="#buy-gems"
|
||||||
@click.prevent="showBuyGemsModal('gems')"
|
@click.prevent="showBuyGemsModal()"
|
||||||
v-html="icons.gem"
|
v-html="icons.gem"
|
||||||
></a>
|
></a>
|
||||||
<span>{{ userGems }}</span>
|
<span>{{ userGems }}</span>
|
||||||
@@ -719,6 +720,7 @@ import notificationMenu from './notificationsDropdown';
|
|||||||
import profileModal from '../userMenu/profileModal';
|
import profileModal from '../userMenu/profileModal';
|
||||||
import reportFlagModal from '../chat/reportFlagModal';
|
import reportFlagModal from '../chat/reportFlagModal';
|
||||||
import sendGemsModal from '@/components/payments/sendGemsModal';
|
import sendGemsModal from '@/components/payments/sendGemsModal';
|
||||||
|
import selectUserModal from '@/components/payments/selectUserModal';
|
||||||
import sync from '@/mixins/sync';
|
import sync from '@/mixins/sync';
|
||||||
import userDropdown from './userDropdown';
|
import userDropdown from './userDropdown';
|
||||||
|
|
||||||
@@ -730,6 +732,7 @@ export default {
|
|||||||
profileModal,
|
profileModal,
|
||||||
reportFlagModal,
|
reportFlagModal,
|
||||||
sendGemsModal,
|
sendGemsModal,
|
||||||
|
selectUserModal,
|
||||||
userDropdown,
|
userDropdown,
|
||||||
},
|
},
|
||||||
mixins: [sync],
|
mixins: [sync],
|
||||||
@@ -787,9 +790,7 @@ export default {
|
|||||||
openPartyModal () {
|
openPartyModal () {
|
||||||
this.$root.$emit('bv::show::modal', 'create-party-modal');
|
this.$root.$emit('bv::show::modal', 'create-party-modal');
|
||||||
},
|
},
|
||||||
showBuyGemsModal (startingPage) {
|
showBuyGemsModal () {
|
||||||
this.$store.state.gemModalOptions.startingPage = startingPage;
|
|
||||||
|
|
||||||
Analytics.track({
|
Analytics.track({
|
||||||
hitType: 'event',
|
hitType: 'event',
|
||||||
eventCategory: 'button',
|
eventCategory: 'button',
|
||||||
|
|||||||
95
website/client/src/components/header/notifications/g1g1.vue
Normal file
95
website/client/src/components/header/notifications/g1g1.vue
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="notification d-flex flex-column justify-content-center text-center"
|
||||||
|
>
|
||||||
|
<strong class="mx-auto mb-2"> {{ $t('g1g1Announcement') }} </strong>
|
||||||
|
<p class="mx-4"> {{ $t('g1g1Details') }} </p>
|
||||||
|
<div
|
||||||
|
class="btn-secondary mx-auto d-flex"
|
||||||
|
@click="showSelectUser()"
|
||||||
|
>
|
||||||
|
<div class="m-auto"> {{ $t('sendGift') }} </div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="notification-remove"
|
||||||
|
@click.stop="remove()"
|
||||||
|
>
|
||||||
|
<div class="svg-icon" v-html="icons.close"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
@import '~@/assets/scss/colors.scss';
|
||||||
|
|
||||||
|
p, strong {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification {
|
||||||
|
background-image: url('~@/assets/images/g1g1-notif.png');
|
||||||
|
background-size: 378px 204px;
|
||||||
|
width: 378px;
|
||||||
|
height: 204px;
|
||||||
|
padding: 3rem;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: normal;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-remove {
|
||||||
|
position: absolute;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
padding: 4px;
|
||||||
|
right: 24px;
|
||||||
|
top: 24px;
|
||||||
|
|
||||||
|
.svg-icon {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
width: 5.75rem;
|
||||||
|
min-height: 1.5rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
border-color: $white;
|
||||||
|
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import closeIcon from '@/assets/svg/close-teal.svg';
|
||||||
|
import { mapActions } from '@/libs/store';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: ['notification'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
icons: Object.freeze({
|
||||||
|
close: closeIcon,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions({
|
||||||
|
readNotification: 'notifications:readNotification',
|
||||||
|
}),
|
||||||
|
remove () {
|
||||||
|
this.readNotification({ notificationId: this.notification.id });
|
||||||
|
},
|
||||||
|
showSelectUser () {
|
||||||
|
this.$root.$emit('bv::show::modal', 'select-user-modal');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -147,6 +147,7 @@ import ACHIEVEMENT_JUST_ADD_WATER from './notifications/justAddWater';
|
|||||||
import ACHIEVEMENT_LOST_MASTERCLASSER from './notifications/lostMasterclasser';
|
import ACHIEVEMENT_LOST_MASTERCLASSER from './notifications/lostMasterclasser';
|
||||||
import ACHIEVEMENT_MIND_OVER_MATTER from './notifications/mindOverMatter';
|
import ACHIEVEMENT_MIND_OVER_MATTER from './notifications/mindOverMatter';
|
||||||
import ONBOARDING_COMPLETE from './notifications/onboardingComplete';
|
import ONBOARDING_COMPLETE from './notifications/onboardingComplete';
|
||||||
|
import GIFT_ONE_GET_ONE from './notifications/g1g1';
|
||||||
import OnboardingGuide from './onboardingGuide';
|
import OnboardingGuide from './onboardingGuide';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -176,6 +177,7 @@ export default {
|
|||||||
VERIFY_USERNAME,
|
VERIFY_USERNAME,
|
||||||
OnboardingGuide,
|
OnboardingGuide,
|
||||||
ONBOARDING_COMPLETE,
|
ONBOARDING_COMPLETE,
|
||||||
|
GIFT_ONE_GET_ONE,
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
@@ -195,7 +197,7 @@ export default {
|
|||||||
// listed in the order they should appear in the notifications panel.
|
// listed in the order they should appear in the notifications panel.
|
||||||
// NOTE: Those not listed here won't be shown in the notification panel!
|
// NOTE: Those not listed here won't be shown in the notification panel!
|
||||||
handledNotifications: [
|
handledNotifications: [
|
||||||
'NEW_STUFF', 'GROUP_TASK_NEEDS_WORK',
|
'NEW_STUFF', 'GIFT_ONE_GET_ONE', 'GROUP_TASK_NEEDS_WORK',
|
||||||
'GUILD_INVITATION', 'PARTY_INVITATION', 'CHALLENGE_INVITATION',
|
'GUILD_INVITATION', 'PARTY_INVITATION', 'CHALLENGE_INVITATION',
|
||||||
'QUEST_INVITATION', 'GROUP_TASK_ASSIGNED', 'GROUP_TASK_APPROVAL', 'GROUP_TASK_APPROVED',
|
'QUEST_INVITATION', 'GROUP_TASK_ASSIGNED', 'GROUP_TASK_APPROVAL', 'GROUP_TASK_APPROVED',
|
||||||
'GROUP_TASK_CLAIMED', 'NEW_MYSTERY_ITEMS', 'CARD_RECEIVED',
|
'GROUP_TASK_CLAIMED', 'NEW_MYSTERY_ITEMS', 'CARD_RECEIVED',
|
||||||
|
|||||||
@@ -75,7 +75,7 @@
|
|||||||
>{{ $t('logout') }}</a>
|
>{{ $t('logout') }}</a>
|
||||||
<li
|
<li
|
||||||
v-if="!user.purchased.plan.customerId"
|
v-if="!user.purchased.plan.customerId"
|
||||||
@click="showBuyGemsModal('subscribe')"
|
@click="showBuyGemsModal()"
|
||||||
>
|
>
|
||||||
<div class="dropdown-item text-center">
|
<div class="dropdown-item text-center">
|
||||||
<h3 class="purple">
|
<h3 class="purple">
|
||||||
@@ -176,9 +176,7 @@ export default {
|
|||||||
showProfile (startingPage) {
|
showProfile (startingPage) {
|
||||||
this.$router.push({ name: startingPage });
|
this.$router.push({ name: startingPage });
|
||||||
},
|
},
|
||||||
showBuyGemsModal (startingPage) {
|
showBuyGemsModal () {
|
||||||
this.$store.state.gemModalOptions.startingPage = startingPage;
|
|
||||||
|
|
||||||
Analytics.track({
|
Analytics.track({
|
||||||
hitType: 'event',
|
hitType: 'event',
|
||||||
eventCategory: 'button',
|
eventCategory: 'button',
|
||||||
|
|||||||
@@ -23,465 +23,153 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex nav justify-content-center">
|
<div v-if="hasSubscription">
|
||||||
<div
|
|
||||||
class="nav-item text-center"
|
|
||||||
:class="{active: selectedPage === 'subscribe'}"
|
|
||||||
@click="selectedPage = 'subscribe'"
|
|
||||||
>
|
|
||||||
{{ $t('subscribe') }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="nav-item text-center"
|
|
||||||
:class="{active: selectedPage === 'gems'}"
|
|
||||||
@click="selectedPage = 'gems'"
|
|
||||||
>
|
|
||||||
{{ $t('buyGems') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-show="selectedPage === 'gems'">
|
|
||||||
<div v-if="hasSubscription">
|
|
||||||
<div class="row text-center">
|
|
||||||
<h2 class="mx-auto text-leadin">
|
|
||||||
{{ $t('subscriptionAlreadySubscribedLeadIn') }}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="row text-center">
|
|
||||||
<div class="col-6 offset-3">
|
|
||||||
<p>{{ $t("gemsPurchaseNote") }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row text-center">
|
<div class="row text-center">
|
||||||
<h2 class="mx-auto text-leadin">
|
<h2 class="mx-auto text-leadin">
|
||||||
{{ $t('gemBenefitLeadin') }}
|
{{ $t('subscriptionAlreadySubscribedLeadIn') }}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-2 offset-1">
|
|
||||||
<div class="d-flex bubble justify-content-center align-items-center">
|
|
||||||
<div
|
|
||||||
class="svg-icon check mx-auto"
|
|
||||||
v-html="icons.check"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-8 align-self-center">
|
|
||||||
<p>{{ $t('gemBenefit1') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-2 offset-1">
|
|
||||||
<div class="d-flex bubble justify-content-center align-items-center">
|
|
||||||
<div
|
|
||||||
class="svg-icon check mx-auto"
|
|
||||||
v-html="icons.check"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-8 align-self-center">
|
|
||||||
<p>{{ $t('gemBenefit2') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-2 offset-1">
|
|
||||||
<div class="d-flex bubble justify-content-center align-items-center">
|
|
||||||
<div
|
|
||||||
class="svg-icon check mx-auto"
|
|
||||||
v-html="icons.check"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-8 align-self-center">
|
|
||||||
<p>{{ $t('gemBenefit3') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-2 offset-1">
|
|
||||||
<div class="d-flex bubble justify-content-center align-items-center">
|
|
||||||
<div
|
|
||||||
class="svg-icon check mx-auto"
|
|
||||||
v-html="icons.check"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-8 align-self-center">
|
|
||||||
<p>{{ $t('gemBenefit4') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-deck gem-deck">
|
|
||||||
<div
|
|
||||||
class="card text-center col-3"
|
|
||||||
:class="{active: gemAmount === 20 }"
|
|
||||||
>
|
|
||||||
<div class="card-img-top">
|
|
||||||
<div
|
|
||||||
class="mx-auto"
|
|
||||||
style="'height: 55px; width: 47.5px; margin-top: 1.85em;'"
|
|
||||||
v-html="icons.twentyOneGems"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="gem-count">
|
|
||||||
20
|
|
||||||
</div>
|
|
||||||
<div class="gem-text">
|
|
||||||
{{ $t('gems') }}
|
|
||||||
</div>
|
|
||||||
<div class="divider"></div>
|
|
||||||
<button
|
|
||||||
class="btn btn-primary"
|
|
||||||
@click="gemAmount === 20 ? gemAmount = 0 : gemAmount = 20"
|
|
||||||
>
|
|
||||||
{{ gemAmount === 20 ? $t('selected') : '$5.00' }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row text-center">
|
<div class="row text-center">
|
||||||
<h2 class="mx-auto text-payment">
|
|
||||||
{{ $t('choosePaymentMethod') }}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="payments-column">
|
|
||||||
<button
|
|
||||||
class="purchase btn btn-primary payment-button payment-item"
|
|
||||||
@click="showStripe({})"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="svg-icon credit-card-icon"
|
|
||||||
v-html="icons.creditCardIcon"
|
|
||||||
></div>
|
|
||||||
{{ $t('card') }}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn payment-item paypal-checkout payment-button"
|
|
||||||
@click="openPaypal(paypalCheckoutLink, 'gems')"
|
|
||||||
>
|
|
||||||
|
|
||||||
<img
|
|
||||||
src="~@/assets/images/paypal-checkout.png"
|
|
||||||
:alt="$t('paypal')"
|
|
||||||
>
|
|
||||||
</button>
|
|
||||||
<amazon-button
|
|
||||||
class="payment-item"
|
|
||||||
:amazon-data="{type: 'single'}"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="row text-center">
|
|
||||||
<div
|
|
||||||
class="svg-icon mx-auto"
|
|
||||||
style="'height: 24px; width: 24px;'"
|
|
||||||
v-html="icons.heart"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<div class="row text-center text-outtro">
|
|
||||||
<div class="col-6 offset-3">
|
<div class="col-6 offset-3">
|
||||||
{{ $t('buyGemsSupportsDevs') }}
|
<p>{{ $t("gemsPurchaseNote") }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="selectedPage === 'subscribe'">
|
<div class="row text-center">
|
||||||
<div v-if="hasSubscription">
|
<h2 class="mx-auto text-leadin">
|
||||||
<div class="row text-center">
|
{{ $t('gemBenefitLeadin') }}
|
||||||
<h2 class="mx-auto text-leadin">
|
</h2>
|
||||||
{{ $t('subscriptionAlreadySubscribedLeadIn') }}
|
</div>
|
||||||
</h2>
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-2 offset-1">
|
||||||
|
<div class="d-flex bubble justify-content-center align-items-center">
|
||||||
|
<div
|
||||||
|
class="svg-icon check mx-auto"
|
||||||
|
v-html="icons.check"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-8 align-self-center">
|
||||||
|
<p>{{ $t('gemBenefit1') }}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row text-center">
|
<div class="row">
|
||||||
<div class="col-10 offset-1">
|
<div class="col-md-2 offset-1">
|
||||||
<p v-html="$t('subscriptionAlreadySubscribed1')"></p>
|
<div class="d-flex bubble justify-content-center align-items-center">
|
||||||
|
<div
|
||||||
|
class="svg-icon check mx-auto"
|
||||||
|
v-html="icons.check"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-8 align-self-center">
|
||||||
|
<p>{{ $t('gemBenefit2') }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!hasSubscription">
|
<div class="col">
|
||||||
<div class="row text-center">
|
<div class="row">
|
||||||
<h2 class="mx-auto text-leadin">
|
<div class="col-md-2 offset-1">
|
||||||
{{ $t('subscriptionBenefitLeadin') }}
|
<div class="d-flex bubble justify-content-center align-items-center">
|
||||||
</h2>
|
<div
|
||||||
|
class="svg-icon check mx-auto"
|
||||||
|
v-html="icons.check"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-8 align-self-center">
|
||||||
|
<p>{{ $t('gemBenefit3') }}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col-md-2 offset-1">
|
||||||
<div class="row">
|
<div class="d-flex bubble justify-content-center align-items-center">
|
||||||
<div class="col-md-2 offset-1">
|
<div
|
||||||
<div class="d-flex bubble justify-content-center align-items-center">
|
class="svg-icon check mx-auto"
|
||||||
<div
|
v-html="icons.check"
|
||||||
class="svg-icon check mx-auto"
|
></div>
|
||||||
v-html="icons.check"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-8 align-self-center">
|
|
||||||
<p>{{ $t('subscriptionBenefit1') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-2 offset-1">
|
|
||||||
<div class="d-flex bubble justify-content-center align-items-center">
|
|
||||||
<div
|
|
||||||
class="svg-icon check mx-auto"
|
|
||||||
v-html="icons.check"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-8 align-self-center">
|
|
||||||
<p>{{ $t('subscriptionBenefit2') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-2 offset-1">
|
|
||||||
<div class="d-flex bubble justify-content-center align-items-center">
|
|
||||||
<div
|
|
||||||
class="svg-icon check mx-auto"
|
|
||||||
v-html="icons.check"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-8 align-self-center">
|
|
||||||
<p>{{ $t('subscriptionBenefit3') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col-md-8 align-self-center">
|
||||||
<div class="row">
|
<p>{{ $t('gemBenefit4') }}</p>
|
||||||
<div class="col-md-2 offset-1">
|
|
||||||
<div class="d-flex bubble justify-content-center align-items-center">
|
|
||||||
<div
|
|
||||||
class="svg-icon check mx-auto"
|
|
||||||
v-html="icons.check"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-8 align-self-center">
|
|
||||||
<p>{{ $t('subscriptionBenefit4') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-2 offset-1">
|
|
||||||
<div class="d-flex bubble justify-content-center align-items-center">
|
|
||||||
<div
|
|
||||||
class="svg-icon check mx-auto"
|
|
||||||
v-html="icons.check"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-8 align-self-center">
|
|
||||||
<p>{{ $t('subscriptionBenefit5') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-2 offset-1">
|
|
||||||
<div class="d-flex bubble justify-content-center align-items-center">
|
|
||||||
<div
|
|
||||||
class="svg-icon check mx-auto"
|
|
||||||
v-html="icons.check"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-8 align-self-center">
|
|
||||||
<p>{{ $t('subscriptionBenefit6') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-deck">
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-deck gem-deck">
|
||||||
|
<div
|
||||||
|
class="card text-center col-3"
|
||||||
|
:class="{active: gemAmount === 20 }"
|
||||||
|
>
|
||||||
|
<div class="card-img-top">
|
||||||
<div
|
<div
|
||||||
class="card text-center"
|
|
||||||
:class="{active: subscriptionPlan === 'basic_earned'}"
|
|
||||||
>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="subscription-price">
|
|
||||||
<span class="superscript">$</span>
|
|
||||||
<span>5</span>
|
|
||||||
<span class="superscript muted">.00</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-once
|
|
||||||
class="small"
|
|
||||||
>
|
|
||||||
{{ $t('everyMonth') }}
|
|
||||||
</div>
|
|
||||||
<div class="divider"></div>
|
|
||||||
<p
|
|
||||||
v-markdown="$t('earnGemsMonthly', {cap:25})"
|
|
||||||
class="benefits"
|
|
||||||
></p>
|
|
||||||
<div class="spacer"></div>
|
|
||||||
<button
|
|
||||||
class="btn btn-primary"
|
|
||||||
@click="subscriptionPlan = 'basic_earned'"
|
|
||||||
>
|
|
||||||
{{ subscriptionPlan === "basic_earned" ? $t('selected') : $t('select') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="card text-center"
|
|
||||||
:class="{active: subscriptionPlan === 'basic_3mo'}"
|
|
||||||
>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="subscription-price">
|
|
||||||
<span class="superscript">$</span>
|
|
||||||
<span>15</span>
|
|
||||||
<span class="superscript muted">.00</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-once
|
|
||||||
class="small"
|
|
||||||
>
|
|
||||||
{{ $t('everyXMonths', {interval: 3}) }}
|
|
||||||
</div>
|
|
||||||
<div class="divider"></div>
|
|
||||||
<p
|
|
||||||
v-markdown="$t('earnGemsMonthly', {cap:30})"
|
|
||||||
class="benefits"
|
|
||||||
></p>
|
|
||||||
<p
|
|
||||||
v-markdown="$t('receiveMysticHourglass')"
|
|
||||||
class="benefits"
|
|
||||||
></p>
|
|
||||||
<button
|
|
||||||
class="btn btn-primary"
|
|
||||||
@click="subscriptionPlan = 'basic_3mo'"
|
|
||||||
>
|
|
||||||
{{ subscriptionPlan === "basic_3mo" ? $t('selected') : $t('select') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="card text-center"
|
|
||||||
:class="{active: subscriptionPlan === 'basic_6mo'}"
|
|
||||||
>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="subscription-price">
|
|
||||||
<span class="superscript">$</span>
|
|
||||||
<span>30</span>
|
|
||||||
<span class="superscript muted">.00</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-once
|
|
||||||
class="small"
|
|
||||||
>
|
|
||||||
{{ $t('everyXMonths', {interval: 6}) }}
|
|
||||||
</div>
|
|
||||||
<div class="divider"></div>
|
|
||||||
<p
|
|
||||||
v-markdown="$t('earnGemsMonthly', {cap:35})"
|
|
||||||
class="benefits"
|
|
||||||
></p>
|
|
||||||
<p
|
|
||||||
v-markdown="$t('receiveMysticHourglasses', {amount:2})"
|
|
||||||
class="benefits"
|
|
||||||
></p>
|
|
||||||
<button
|
|
||||||
class="btn btn-primary"
|
|
||||||
@click="subscriptionPlan = 'basic_6mo'"
|
|
||||||
>
|
|
||||||
{{ subscriptionPlan === "basic_6mo" ? $t('selected') : $t('select') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="card text-center"
|
|
||||||
:class="{active: subscriptionPlan === 'basic_12mo'}"
|
|
||||||
>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="subscription-price">
|
|
||||||
<span class="superscript">$</span>
|
|
||||||
<span>48</span>
|
|
||||||
<span class="superscript muted">.00</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-once
|
|
||||||
class="small"
|
|
||||||
>
|
|
||||||
{{ $t('everyYear') }}
|
|
||||||
</div>
|
|
||||||
<div class="divider"></div>
|
|
||||||
<p
|
|
||||||
v-markdown="$t('earnGemsMonthly', {cap:45})"
|
|
||||||
class="benefits"
|
|
||||||
></p>
|
|
||||||
<p
|
|
||||||
v-markdown="$t('receiveMysticHourglasses', {amount:4})"
|
|
||||||
class="benefits"
|
|
||||||
></p>
|
|
||||||
<button
|
|
||||||
class="btn btn-primary"
|
|
||||||
@click="subscriptionPlan = 'basic_12mo'"
|
|
||||||
>
|
|
||||||
{{ subscriptionPlan === "basic_12mo" ? $t('selected') : $t('select') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="subscriptionPlan"
|
|
||||||
class="row text-center"
|
|
||||||
>
|
|
||||||
<h2
|
|
||||||
v-once
|
|
||||||
class="mx-auto text-payment"
|
|
||||||
>
|
|
||||||
{{ $t('choosePaymentMethod') }}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="row text-center">
|
|
||||||
<a
|
|
||||||
v-once
|
|
||||||
class="mx-auto"
|
class="mx-auto"
|
||||||
>{{ $t('haveCouponCode') }}</a>
|
style="'height: 55px; width: 47.5px; margin-top: 1.85em;'"
|
||||||
</div>
|
v-html="icons.twentyOneGems"
|
||||||
<div
|
|
||||||
v-if="subscriptionPlan"
|
|
||||||
class="payments-column"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="purchase btn btn-primary payment-button payment-item"
|
|
||||||
@click="showStripe({subscription: subscriptionPlan})"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="svg-icon credit-card-icon"
|
|
||||||
v-html="icons.creditCardIcon"
|
|
||||||
></div>
|
|
||||||
{{ $t('card') }}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn payment-item paypal-checkout payment-button"
|
|
||||||
@click="openPaypal(paypalSubscriptionLink, 'subscription')"
|
|
||||||
>
|
|
||||||
|
|
||||||
<img
|
|
||||||
src="~@/assets/images/paypal-checkout.png"
|
|
||||||
:alt="$t('paypal')"
|
|
||||||
>
|
|
||||||
</button>
|
|
||||||
<amazon-button
|
|
||||||
class="payment-item"
|
|
||||||
:amazon-data="{type: 'subscription', subscription: subscriptionPlan}"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="row text-center">
|
|
||||||
<div
|
|
||||||
class="svg-icon mx-auto"
|
|
||||||
style="'height: 24px; width: 24px;'"
|
|
||||||
v-html="icons.heart"
|
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row text-center text-outtro">
|
<div class="card-body">
|
||||||
<div class="col-6 offset-3">
|
<div class="gem-count">
|
||||||
{{ $t('subscribeSupportsDevs') }}
|
20
|
||||||
</div>
|
</div>
|
||||||
|
<div class="gem-text">
|
||||||
|
{{ $t('gems') }}
|
||||||
|
</div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<button
|
||||||
|
class="btn btn-primary"
|
||||||
|
@click="gemAmount === 20 ? gemAmount = 0 : gemAmount = 20"
|
||||||
|
>
|
||||||
|
{{ gemAmount === 20 ? $t('selected') : '$5.00' }}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row text-center">
|
||||||
|
<h2 class="mx-auto text-payment">
|
||||||
|
{{ $t('choosePaymentMethod') }}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="payments-column">
|
||||||
|
<button
|
||||||
|
class="purchase btn btn-primary payment-button payment-item"
|
||||||
|
@click="showStripe({})"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="svg-icon credit-card-icon"
|
||||||
|
v-html="icons.creditCardIcon"
|
||||||
|
></div>
|
||||||
|
{{ $t('card') }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn payment-item paypal-checkout payment-button"
|
||||||
|
@click="openPaypal(paypalCheckoutLink, 'gems')"
|
||||||
|
>
|
||||||
|
|
||||||
|
<img
|
||||||
|
src="~@/assets/images/paypal-checkout.png"
|
||||||
|
:alt="$t('paypal')"
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
<amazon-button
|
||||||
|
class="payment-item"
|
||||||
|
:amazon-data="{type: 'single'}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="row text-center">
|
||||||
|
<div
|
||||||
|
class="svg-icon mx-auto"
|
||||||
|
style="'height: 24px; width: 24px;'"
|
||||||
|
v-html="icons.heart"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="row text-center text-outtro">
|
||||||
|
<div class="col-6 offset-3">
|
||||||
|
{{ $t('buyGemsSupportsDevs') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</b-modal>
|
</b-modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -522,10 +210,6 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.benefits {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble {
|
.bubble {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
@@ -579,46 +263,6 @@
|
|||||||
height: 56px;
|
height: 56px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.muted {
|
|
||||||
color: #c3c0c7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
font-weight: bold;
|
|
||||||
background-color: $gray-600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 0rem;
|
|
||||||
padding: 1rem;
|
|
||||||
width: 7.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item:hover, .nav-item.active {
|
|
||||||
color: #4f2a93;
|
|
||||||
border-bottom: 4px solid $purple-300;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spacer {
|
|
||||||
height: 4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subscription-price {
|
|
||||||
font-family: Roboto Condensed;
|
|
||||||
font-size: 48px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #1ca372;
|
|
||||||
}
|
|
||||||
|
|
||||||
.superscript {
|
|
||||||
font-size: 24px;
|
|
||||||
vertical-align: super;
|
|
||||||
}
|
|
||||||
|
|
||||||
.svg-icon.check {
|
.svg-icon.check {
|
||||||
color: #bda8ff;
|
color: #bda8ff;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
@@ -696,9 +340,6 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({ user: 'user.data' }),
|
...mapState({ user: 'user.data' }),
|
||||||
startingPageOption () {
|
|
||||||
return this.$store.state.gemModalOptions.startingPage;
|
|
||||||
},
|
|
||||||
hasSubscription () {
|
hasSubscription () {
|
||||||
return Boolean(this.user.purchased.plan.customerId);
|
return Boolean(this.user.purchased.plan.customerId);
|
||||||
},
|
},
|
||||||
@@ -708,11 +349,6 @@ export default {
|
|||||||
>= (this.user.purchased.plan.consecutive.gemCapExtra + this.planGemLimits.convCap);
|
>= (this.user.purchased.plan.consecutive.gemCapExtra + this.planGemLimits.convCap);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
|
||||||
startingPageOption () {
|
|
||||||
this.selectedPage = this.$store.state.gemModalOptions.startingPage;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
close () {
|
close () {
|
||||||
this.$root.$emit('bv::hide::modal', 'buy-gems');
|
this.$root.$emit('bv::hide::modal', 'buy-gems');
|
||||||
|
|||||||
220
website/client/src/components/payments/selectUserModal.vue
Normal file
220
website/client/src/components/payments/selectUserModal.vue
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
<template>
|
||||||
|
<b-modal
|
||||||
|
id="select-user-modal"
|
||||||
|
:hide-header="true"
|
||||||
|
:hide-footer="true"
|
||||||
|
@hide="onHide()"
|
||||||
|
>
|
||||||
|
<h2 class="ml-2"> {{ $t('sendGift')}} </h2>
|
||||||
|
<div class="d-flex flex-column align-items-center">
|
||||||
|
<div
|
||||||
|
class="modal-close"
|
||||||
|
@click="close()"
|
||||||
|
>
|
||||||
|
<div class="svg-icon" v-html="icons.close"></div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-2 mr-auto">
|
||||||
|
<strong> {{ $t('sendGiftToWhom')}} </strong>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="form"
|
||||||
|
name="selectUser"
|
||||||
|
novalidate="novalidate"
|
||||||
|
>
|
||||||
|
<div class="input-group">
|
||||||
|
<input
|
||||||
|
id="selectUser"
|
||||||
|
v-model="userSearchTerm"
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
:placeholder="$t('usernameOrUserId')"
|
||||||
|
:class="{
|
||||||
|
'input-valid': foundUser._id,
|
||||||
|
'is-invalid input-invalid': userNotFound,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="userSearchTerm.length > 0 && userNotFound"
|
||||||
|
class="input-error text-center mt-2"
|
||||||
|
>
|
||||||
|
{{ $t('userWithUsernameOrUserIdNotFound') }}
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-center align-items-middle mt-3">
|
||||||
|
<a
|
||||||
|
class="my-auto ml-auto mr-3 cancel-link"
|
||||||
|
@click="close()"
|
||||||
|
>
|
||||||
|
{{ $t('cancel') }}
|
||||||
|
</a>
|
||||||
|
<button
|
||||||
|
class="btn btn-primary my-auto mr-auto"
|
||||||
|
type="submit"
|
||||||
|
:disabled="searchCannotSubmit"
|
||||||
|
@click="selectUser()"
|
||||||
|
>
|
||||||
|
{{ $t('selectGift') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</b-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '~@/assets/scss/modal.scss';
|
||||||
|
|
||||||
|
#select-user-modal {
|
||||||
|
@include centeredModal();
|
||||||
|
|
||||||
|
.modal-dialog {
|
||||||
|
width: 29.5rem;
|
||||||
|
margin-top: 25vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '~@/assets/scss/colors.scss';
|
||||||
|
|
||||||
|
a:not([href]) {
|
||||||
|
color: $blue-10;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
width: 26.5rem;
|
||||||
|
border: 0px;
|
||||||
|
color: $gray-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.g1g1 {
|
||||||
|
background-image: url('~@/assets/images/g1g1-send.png');
|
||||||
|
background-size: 472px 152px;
|
||||||
|
width: 470px;
|
||||||
|
height: 152px;
|
||||||
|
margin: -1rem 0rem 0rem -1rem;
|
||||||
|
border-radius: 0.3rem 0.3rem 0rem 0rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
color: $white;
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
padding: 0rem 6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-error {
|
||||||
|
color: $red-50;
|
||||||
|
font-size: 90%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
border-radius: 2px;
|
||||||
|
border: solid 1px $gray-400;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group:focus-within {
|
||||||
|
border-color: $purple-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close {
|
||||||
|
position: absolute;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
padding: 4px;
|
||||||
|
right: 16px;
|
||||||
|
top: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.svg-icon {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import debounce from 'lodash/debounce';
|
||||||
|
import isUUID from 'validator/lib/isUUID';
|
||||||
|
import closeIcon from '@/assets/svg/close.svg';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
userNotFound: false,
|
||||||
|
userSearchTerm: '',
|
||||||
|
foundUser: {},
|
||||||
|
icons: Object.freeze({
|
||||||
|
close: closeIcon,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
searchCannotSubmit () {
|
||||||
|
if (this.userSearchTerm.length < 1) return true;
|
||||||
|
return typeof this.foundUser._id === 'undefined';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
userSearchTerm: {
|
||||||
|
handler () {
|
||||||
|
this.searchUser(this.userSearchTerm);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
close () {
|
||||||
|
this.$root.$emit('habitica::dismiss-modal', 'select-user-modal');
|
||||||
|
this.$root.$emit('bv::hide::modal', 'select-user-modal');
|
||||||
|
},
|
||||||
|
searchUser: debounce(async function userSearch (searchTerm) {
|
||||||
|
this.foundUser = {};
|
||||||
|
if (searchTerm.length < 1) {
|
||||||
|
this.userNotFound = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let result;
|
||||||
|
if (isUUID(searchTerm)) {
|
||||||
|
try {
|
||||||
|
result = await this.$store.dispatch('members:fetchMember', {
|
||||||
|
memberId: searchTerm,
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
result = null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
result = await this.$store.dispatch('members:fetchMemberByUsername', {
|
||||||
|
username: searchTerm,
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
result = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!result || !result.data || !result.data.data) {
|
||||||
|
this.userNotFound = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.userNotFound = false;
|
||||||
|
this.foundUser = result.data.data;
|
||||||
|
}, 500),
|
||||||
|
selectUser () {
|
||||||
|
this.$root.$emit('habitica::send-gems', this.foundUser);
|
||||||
|
this.close();
|
||||||
|
},
|
||||||
|
onHide () {
|
||||||
|
this.userNotFound = false;
|
||||||
|
this.userSearchTerm = '';
|
||||||
|
this.foundUser = {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -2,7 +2,6 @@
|
|||||||
<b-modal
|
<b-modal
|
||||||
id="payments-success-modal"
|
id="payments-success-modal"
|
||||||
:title="$t('accountSuspendedTitle')"
|
:title="$t('accountSuspendedTitle')"
|
||||||
size="sm"
|
|
||||||
:hide-footer="isFromBalance"
|
:hide-footer="isFromBalance"
|
||||||
:modal-class="isFromBalance ? ['modal-hidden-footer'] : []"
|
:modal-class="isFromBalance ? ['modal-hidden-footer'] : []"
|
||||||
>
|
>
|
||||||
@@ -102,6 +101,10 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '~@/assets/scss/colors.scss';
|
@import '~@/assets/scss/colors.scss';
|
||||||
|
|
||||||
|
#payments-success-modal .modal-md {
|
||||||
|
max-width: 20.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
#payments-success-modal .modal-content {
|
#payments-success-modal .modal-content {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
@@ -115,7 +118,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-top: 24px;
|
padding-top: 24px;
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
background: $green-10;
|
background: $green-100;
|
||||||
border-top-right-radius: 8px;
|
border-top-right-radius: 8px;
|
||||||
border-top-left-radius: 8px;
|
border-top-left-radius: 8px;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
@@ -241,6 +244,7 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
close () {
|
close () {
|
||||||
this.paymentData = {};
|
this.paymentData = {};
|
||||||
|
this.$root.$emit('habitica::dismiss-modal', 'payments-success-modal');
|
||||||
this.$root.$emit('bv::hide::modal', 'payments-success-modal');
|
this.$root.$emit('bv::hide::modal', 'payments-success-modal');
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,263 +1,510 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="standard-page pt-0 px-0">
|
<div class="standard-page pt-0 px-0">
|
||||||
<h1>{{ $t('subscription') }}</h1>
|
<div v-if="!hasSubscription && !hasCanceledSubscription">
|
||||||
<div class="row">
|
<div class="row mt-3">
|
||||||
<div class="col-6">
|
<div class="block-header mx-auto">
|
||||||
<h2>{{ $t('benefits') }}</h2>
|
{{ $t('support') }}
|
||||||
<ul>
|
</div>
|
||||||
<li>
|
|
||||||
<span
|
|
||||||
class="hint"
|
|
||||||
:popover="$t('buyGemsGoldText', {gemCostTranslation})"
|
|
||||||
popover-trigger="mouseenter"
|
|
||||||
popover-placement="right"
|
|
||||||
>{{ $t('buyGemsGold') }}</span>
|
|
||||||
<span
|
|
||||||
v-if="subscription.key !== 'basic_earned'"
|
|
||||||
class="badge badge-success"
|
|
||||||
>{{ $t('buyGemsGoldCap', buyGemsGoldCap) }}</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span
|
|
||||||
class="hint"
|
|
||||||
:popover="$t('retainHistoryText')"
|
|
||||||
popover-trigger="mouseenter"
|
|
||||||
popover-placement="right"
|
|
||||||
>{{ $t('retainHistory') }}</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span
|
|
||||||
class="hint"
|
|
||||||
:popover="$t('doubleDropsText')"
|
|
||||||
popover-trigger="mouseenter"
|
|
||||||
popover-placement="right"
|
|
||||||
>{{ $t('doubleDrops') }}</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span
|
|
||||||
class="hint"
|
|
||||||
:popover="$t('mysteryItemText')"
|
|
||||||
popover-trigger="mouseenter"
|
|
||||||
popover-placement="right"
|
|
||||||
>{{ $t('mysteryItem') }}</span>
|
|
||||||
<div v-if="subscription.key !== 'basic_earned'">
|
|
||||||
<div class="badge badge-success">
|
|
||||||
{{ $t('mysticHourglass', mysticHourglass) }}
|
|
||||||
</div>
|
|
||||||
<div class="small muted">
|
|
||||||
{{ $t('mysticHourglassText') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span
|
|
||||||
class="hint"
|
|
||||||
:popover="$t('exclusiveJackalopePetText')"
|
|
||||||
popover-trigger="mouseenter"
|
|
||||||
popover-placement="right"
|
|
||||||
>{{ $t('exclusiveJackalopePet') }}</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span
|
|
||||||
class="hint"
|
|
||||||
:popover="$t('supportDevsText')"
|
|
||||||
popover-trigger="mouseenter"
|
|
||||||
popover-placement="right"
|
|
||||||
>{{ $t('supportDevs') }}</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="row mb-5">
|
||||||
<h2>Plan</h2>
|
|
||||||
<table
|
|
||||||
v-if="hasSubscription"
|
|
||||||
class="table alert alert-info"
|
|
||||||
>
|
|
||||||
<tr v-if="hasCanceledSubscription">
|
|
||||||
<td class="alert alert-warning">
|
|
||||||
<span class="noninteractive-button btn-danger">{{ $t('canceledSubscription') }}</span>
|
|
||||||
<i class="glyphicon glyphicon-time"></i>
|
|
||||||
{{ $t('subCanceled') }}
|
|
||||||
<strong>{{ dateTerminated }}</strong>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr v-if="!hasCanceledSubscription">
|
|
||||||
<td>
|
|
||||||
<h4>{{ $t('subscribed') }}</h4>
|
|
||||||
<p v-if="hasPlan && !hasGroupPlan">
|
|
||||||
{{ $t('purchasedPlanId', purchasedPlanIdInfo) }}
|
|
||||||
</p>
|
|
||||||
<p v-if="hasGroupPlan">
|
|
||||||
{{ $t('youHaveGroupPlan') }}
|
|
||||||
</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr v-if="user.purchased.plan.extraMonths">
|
|
||||||
<td>
|
|
||||||
<span class="glyphicon glyphicon-credit-card"></span>
|
|
||||||
{{ $t('purchasedPlanExtraMonths', purchasedPlanExtraMonthsDetails) }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr v-if="hasConsecutiveSubscription">
|
|
||||||
<td>
|
|
||||||
<span class="glyphicon glyphicon-forward"></span>
|
|
||||||
{{ $t('consecutiveSubscription') }}
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
<li>{{ $t('consecutiveMonths') }} {{ user.purchased.plan.consecutive.count + user.purchased.plan.consecutive.offset }}</li> <!-- eslint-disable-line max-len -->
|
|
||||||
<li>{{ $t('gemCapExtra') }} {{ user.purchased.plan.consecutive.gemCapExtra }}</li>
|
|
||||||
<li>{{ $t('mysticHourglasses') }} {{ user.purchased.plan.consecutive.trinkets }}</li> <!-- eslint-disable-line max-len -->
|
|
||||||
</ul>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<div v-if="!hasSubscription || hasCanceledSubscription">
|
|
||||||
<h4 v-if="hasCanceledSubscription">
|
|
||||||
{{ $t("resubscribe") }}
|
|
||||||
</h4>
|
|
||||||
<div class="form-group reduce-top-margin">
|
|
||||||
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
|
|
||||||
<div
|
|
||||||
v-for="block in subscriptionBlocksOrdered"
|
|
||||||
v-if="block.target !== 'group' && block.canSubscribe === true"
|
|
||||||
:key="block.key"
|
|
||||||
class="radio"
|
|
||||||
>
|
|
||||||
<!-- eslint-enable vue/no-use-v-if-with-v-for -->
|
|
||||||
<label>
|
|
||||||
<input
|
|
||||||
v-model="subscription.key"
|
|
||||||
type="radio"
|
|
||||||
name="subRadio"
|
|
||||||
:value="block.key"
|
|
||||||
>
|
|
||||||
<span v-if="block.original">
|
|
||||||
<span class="label label-success line-through">${{ block.original }}</span>
|
|
||||||
{{ $t('subscriptionRateText', {price: block.price, months: block.months}) }}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
v-if="!block.original"
|
|
||||||
>{{ $t('subscriptionRateText', {price: block.price, months: block.months}) }}</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-inline">
|
|
||||||
<div class="form-group">
|
|
||||||
<input
|
|
||||||
v-model="subscription.coupon"
|
|
||||||
class="form-control"
|
|
||||||
type="text"
|
|
||||||
:placeholder="$t('couponPlaceholder')"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<button
|
|
||||||
class="btn btn-primary"
|
|
||||||
type="button"
|
|
||||||
@click="applyCoupon(subscription.coupon)"
|
|
||||||
>
|
|
||||||
{{ $t("apply") }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="hasSubscription">
|
|
||||||
<div
|
|
||||||
v-if="canEditCardDetails"
|
|
||||||
class="btn btn-primary"
|
|
||||||
@click="showStripeEdit()"
|
|
||||||
>
|
|
||||||
{{ $t('subUpdateCard') }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="canCancelSubscription && !loading"
|
|
||||||
class="btn btn-sm btn-danger"
|
|
||||||
@click="cancelSubscriptionConfirm()"
|
|
||||||
>
|
|
||||||
{{ $t('cancelSub') }}
|
|
||||||
</div>
|
|
||||||
<small
|
|
||||||
v-if="!canCancelSubscription && !hasCanceledSubscription"
|
|
||||||
v-html="getCancelSubInfo()"
|
|
||||||
></small>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
v-if="!hasSubscription || hasCanceledSubscription"
|
v-once
|
||||||
class="subscribe-pay"
|
class="svg-icon svg-logo mx-auto mt-1"
|
||||||
>
|
v-html="icons.logo"
|
||||||
<h3>{{ $t('subscribeUsing') }}</h3>
|
></div>
|
||||||
<div class="payments-column">
|
</div>
|
||||||
<button
|
<div class="d-flex justify-content-center">
|
||||||
class="purchase btn btn-primary payment-button payment-item"
|
<div>
|
||||||
:disabled="!subscription.key"
|
<div class="row col-12 ml-1">
|
||||||
@click="showStripe({subscription:subscription.key, coupon:subscription.coupon})"
|
<h2> {{ $t('subscribersReceiveBenefits') }} </h2>
|
||||||
>
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-2">
|
||||||
<div
|
<div
|
||||||
class="svg-icon credit-card-icon"
|
v-once
|
||||||
v-html="icons.creditCardIcon"
|
class="svg-icon svg-gems ml-3 mt-1"
|
||||||
|
v-html="icons.subscriberGems"
|
||||||
></div>
|
></div>
|
||||||
{{ $t('card') }}
|
</div>
|
||||||
</button>
|
<div class="col-10">
|
||||||
<button
|
<h3> {{ $t('buyGemsGold') }} </h3>
|
||||||
class="btn payment-item paypal-checkout payment-button"
|
<p> {{ $t('subscriptionBenefit1') }} </p>
|
||||||
:disabled="!subscription.key"
|
</div>
|
||||||
@click="openPaypal(paypalPurchaseLink, 'subscription')"
|
</div>
|
||||||
>
|
<div class="row">
|
||||||
|
<div class="col-2">
|
||||||
<img
|
<div
|
||||||
src="~@/assets/images/paypal-checkout.png"
|
v-once
|
||||||
:alt="$t('paypal')"
|
class="svg-icon svg-hourglasses ml-3 mt-1"
|
||||||
>
|
v-html="icons.subscriberHourglasses"
|
||||||
</button>
|
></div>
|
||||||
<amazon-button
|
</div>
|
||||||
class="payment-item"
|
<div class="col-10">
|
||||||
:amazon-data="{
|
<h3> {{ $t('mysticHourglassesTooltip') }} </h3>
|
||||||
type: 'subscription', subscription: subscription.key, coupon: subscription.coupon}"
|
<p> {{ $t('subscriptionBenefit6') }} </p>
|
||||||
/>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-2">
|
||||||
|
<div
|
||||||
|
:class="currentMysterySet"
|
||||||
|
class="mt-n1"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-10">
|
||||||
|
<h3> {{ $t('monthlyMysteryItems') }} </h3>
|
||||||
|
<p> {{ $t('subscriptionBenefit4') }} </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-2">
|
||||||
|
<div class="Pet-Jackalope-RoyalPurple"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-10">
|
||||||
|
<h3> {{ $t('exclusiveJackalopePet') }} </h3>
|
||||||
|
<p> {{ $t('subscriptionBenefit5') }} </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-2">
|
||||||
|
<div class="image-foods ml-2 mt-2"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-10">
|
||||||
|
<h3> {{ $t('doubleDropCap') }} </h3>
|
||||||
|
<p> {{ $t('subscriptionBenefit3') }} </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-spacer"></div>
|
||||||
|
<div>
|
||||||
|
<div class="subscribe-card d-flex flex-column">
|
||||||
|
<subscription-options class="mb-4"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div
|
||||||
<div class="col-6">
|
v-if="hasSubscription"
|
||||||
<h2 v-once>
|
class="d-flex flex-column align-items-center"
|
||||||
{{ $t('giftSubscription') }}
|
>
|
||||||
</h2>
|
<h1 class="mt-4 mx-auto">{{ $t('subscription') }}</h1>
|
||||||
<ol>
|
<div class="subscribe-card mx-auto">
|
||||||
<li v-once>
|
<div
|
||||||
{{ $t('giftSubscriptionText1') }}
|
v-if="hasSubscription && !hasCanceledSubscription"
|
||||||
</li>
|
class="d-flex flex-column align-items-center my-4"
|
||||||
<li v-once>
|
>
|
||||||
{{ $t('giftSubscriptionText2') }}
|
<div class="round-container bg-green-10 d-flex align-items-center justify-content-center">
|
||||||
</li>
|
<div
|
||||||
<li v-once>
|
v-once
|
||||||
{{ $t('giftSubscriptionText3') }}
|
class="svg-icon svg-check"
|
||||||
</li>
|
v-html="icons.checkmarkIcon"
|
||||||
</ol>
|
></div>
|
||||||
<h4 v-once>
|
</div>
|
||||||
{{ $t('giftSubscriptionText4') }}
|
<h2 class="green-10 mx-auto">{{ $t('youAreSubscribed') }}</h2>
|
||||||
</h4>
|
<div
|
||||||
|
v-if="hasGroupPlan"
|
||||||
|
class="mx-5 text-center"
|
||||||
|
>
|
||||||
|
{{ $t('youHaveGroupPlan') }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="w-55 text-center"
|
||||||
|
v-html="$t('paymentSubBillingWithMethod', {
|
||||||
|
amount: purchasedPlanIdInfo.price,
|
||||||
|
months: purchasedPlanIdInfo.months,
|
||||||
|
paymentMethod: purchasedPlanIdInfo.plan
|
||||||
|
})"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="canEditCardDetails"
|
||||||
|
class="mt-4 text-center"
|
||||||
|
>
|
||||||
|
<div class="font-weight-bold gray-10 mb-2">{{ $t('needToUpdateCard') }}</div>
|
||||||
|
<button
|
||||||
|
class="btn btn-primary btn-update-card
|
||||||
|
d-flex justify-content-center align-items-center"
|
||||||
|
@click="showStripeEdit()"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-once
|
||||||
|
class="svg-icon svg-credit-card mr-2"
|
||||||
|
v-html="icons.creditCardIcon"
|
||||||
|
></div>
|
||||||
|
<div>{{ $t('subUpdateCard') }}</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="svg-icon"
|
||||||
|
:class="paymentMethodLogo.class"
|
||||||
|
v-html="paymentMethodLogo.icon"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="purchasedPlanExtraMonthsDetails.months > 0"
|
||||||
|
class="extra-months green-10 py-2 px-3 mt-4"
|
||||||
|
v-html="$t('purchasedPlanExtraMonths',
|
||||||
|
{months: purchasedPlanExtraMonthsDetails.months})"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="hasCanceledSubscription"
|
||||||
|
class="d-flex flex-column align-items-center mt-4"
|
||||||
|
>
|
||||||
|
<div class="round-container bg-gray-300 d-flex align-items-center justify-content-center">
|
||||||
|
<div
|
||||||
|
v-once
|
||||||
|
class="svg-icon svg-close"
|
||||||
|
v-html="icons.closeIcon"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<h2 class="gray-50">{{ $t('subscriptionCanceled') }}</h2>
|
||||||
|
<div
|
||||||
|
class="w-75 text-center mb-4"
|
||||||
|
v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<h2>{{ $t('readyToResubscribe') }}</h2>
|
||||||
|
<subscription-options class="w-100 mb-2"/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="hasSubscription"
|
||||||
|
class="bg-gray-700 p-2 text-center"
|
||||||
|
>
|
||||||
|
<div class="header-mini mb-3">{{ $t('subscriptionStats') }}</div>
|
||||||
|
<div class="d-flex justify-content-around">
|
||||||
|
<div class="ml-4 mr-3">
|
||||||
|
<div class="d-flex justify-content-center align-items-center">
|
||||||
|
<div
|
||||||
|
v-once
|
||||||
|
class="svg-icon svg-calendar mr-2"
|
||||||
|
v-html="icons.calendarIcon"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="number-heavy">
|
||||||
|
{{ user.purchased.plan.consecutive.count +
|
||||||
|
user.purchased.plan.consecutive.offset }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-label">{{ $t('subMonths') }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-spacer"></div>
|
||||||
|
<div>
|
||||||
|
<div class="d-flex justify-content-center align-items-center">
|
||||||
|
<div
|
||||||
|
v-once
|
||||||
|
class="svg-icon svg-gem mr-2"
|
||||||
|
v-html="icons.gemIcon"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="number-heavy">
|
||||||
|
{{ user.purchased.plan.consecutive.gemCapExtra }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-label">{{ $t('gemCapExtra') }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-spacer"></div>
|
||||||
|
<div>
|
||||||
|
<div class="d-flex justify-content-center align-items-center">
|
||||||
|
<div
|
||||||
|
v-once
|
||||||
|
class="svg-icon svg-hourglass mt-1 mr-2"
|
||||||
|
v-html="icons.hourglassIcon"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="number-heavy">
|
||||||
|
{{ user.purchased.plan.consecutive.trinkets }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-label">{{ $t('mysticHourglassesTooltip') }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column justify-content-center align-items-center mt-4 mb-3">
|
||||||
|
<div
|
||||||
|
v-once
|
||||||
|
class="svg-icon svg-heart mb-1"
|
||||||
|
v-html="icons.heartIcon"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="stats-label">{{ $t('giftSubscriptionText4') }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="hasSubscription && !hasCanceledSubscription"
|
||||||
|
class="d-flex flex-column align-items-center mt-3"
|
||||||
|
>
|
||||||
|
<div class="cancel-card p-4 text-center">
|
||||||
|
<h2 class="maroon-50">{{ $t('cancelYourSubscription') }}</h2>
|
||||||
|
<div v-if="hasGroupPlan">{{ $t('cancelSubInfoGroupPlan') }}</div>
|
||||||
|
<div
|
||||||
|
v-if="!hasGroupPlan && !canCancelSubscription"
|
||||||
|
v-html="$t(`cancelSubInfo${user.purchased.plan.paymentMethod}`)"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="canCancelSubscription"
|
||||||
|
v-html="$t('cancelSubAlternatives')"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="btn btn-danger mt-4"
|
||||||
|
:class="{disabled: !canCancelSubscription}"
|
||||||
|
:disabled="!canCancelSubscription"
|
||||||
|
@click="cancelSubscriptionConfirm({canCancel: canCancelSubscription})"
|
||||||
|
>
|
||||||
|
{{ $t('cancelSub') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column align-items-center mt-4">
|
||||||
|
<div
|
||||||
|
v-once
|
||||||
|
class="svg-icon svg-gift-box m-auto"
|
||||||
|
v-html="icons.giftBox"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="muted mx-auto mt-3 mb-1">
|
||||||
|
{{ $t('giftSubscription') }}
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
class="mx-auto"
|
||||||
|
@click="showSelectUser()"
|
||||||
|
>
|
||||||
|
{{ $t('giftASubscription') }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import '~@/assets/scss/colors.scss';
|
@import '~@/assets/scss/colors.scss';
|
||||||
|
|
||||||
.badge.badge-success {
|
a {
|
||||||
|
color: $purple-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2 {
|
||||||
|
color: $purple-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 21rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-green-10 {
|
||||||
|
background-color: $green-10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gray-300 {
|
||||||
|
background-color: $gray-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gray-700 {
|
||||||
|
background-color: $gray-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-header {
|
||||||
|
color: $purple-200;
|
||||||
|
letter-spacing: 0.25rem;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-update-card {
|
||||||
|
width: 12.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-card {
|
||||||
|
width: 28rem;
|
||||||
|
border: 2px solid $gray-500;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
opacity: 0.64;
|
||||||
|
|
||||||
|
.btn, .btn:hover, .btn:active {
|
||||||
|
box-shadow: none;
|
||||||
|
cursor: default !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.extra-months {
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid $green-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-spacer {
|
||||||
|
width: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gray-10 {
|
||||||
|
color: $gray-10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gray-50 {
|
||||||
|
color: $gray-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green-10 {
|
||||||
|
color: $green-10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-mini {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-foods {
|
||||||
|
background: url(~@/assets/images/subscriber-food.png);
|
||||||
|
background-size: contain;
|
||||||
|
width: 46px;
|
||||||
|
height: 49px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.maroon-50 {
|
||||||
|
color: $maroon-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.muted {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $gray-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number-heavy {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Pet-Jackalope-RoyalPurple {
|
||||||
|
margin-top: -1.75rem;
|
||||||
|
transform: scale(0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.round-container {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: $gray-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-spacer {
|
||||||
|
width: 1px;
|
||||||
|
height: 3rem;
|
||||||
|
background-color: $gray-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscribe-card {
|
||||||
|
width: 28rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
|
||||||
|
background-color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscribe-option {
|
||||||
|
border-bottom: 1px solid $gray-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-amazon-pay {
|
||||||
|
width: 208px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-apple-pay {
|
||||||
|
width: 97.1px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-calendar, .svg-heart {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-check {
|
||||||
|
width: 35.1px;
|
||||||
|
height: 28px;
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subscribe-pay {
|
.svg-close {
|
||||||
margin-top: 1em;
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
|
||||||
|
& ::v-deep svg path {
|
||||||
|
stroke: $white;
|
||||||
|
stroke-width: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-credit-card {
|
||||||
|
width: 21.3px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-gem {
|
||||||
|
width: 32px;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-gems {
|
||||||
|
width: 42px;
|
||||||
|
height: 52px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-google-pay {
|
||||||
|
width: 99.7px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-hourglass {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-gift-box {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-hourglasses {
|
||||||
|
width: 43px;
|
||||||
|
height: 53px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-logo {
|
||||||
|
width: 256px;
|
||||||
|
height: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-paypal {
|
||||||
|
width: 148px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-55 {
|
||||||
|
width: 55%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import filter from 'lodash/filter';
|
|
||||||
import sortBy from 'lodash/sortBy';
|
|
||||||
import min from 'lodash/min';
|
import min from 'lodash/min';
|
||||||
|
import moment from 'moment';
|
||||||
import { mapState } from '@/libs/store';
|
import { mapState } from '@/libs/store';
|
||||||
|
|
||||||
import subscriptionBlocks from '@/../../common/script/content/subscriptionBlocks';
|
import subscriptionBlocks from '@/../../common/script/content/subscriptionBlocks';
|
||||||
@@ -265,12 +512,27 @@ import planGemLimits from '@/../../common/script/libs/planGemLimits';
|
|||||||
import paymentsMixin from '../../mixins/payments';
|
import paymentsMixin from '../../mixins/payments';
|
||||||
import notificationsMixin from '../../mixins/notifications';
|
import notificationsMixin from '../../mixins/notifications';
|
||||||
|
|
||||||
import amazonButton from '@/components/payments/amazonButton';
|
import subscriptionOptions from './subscriptionOptions.vue';
|
||||||
|
|
||||||
|
import amazonPayLogo from '@/assets/svg/amazonpay.svg';
|
||||||
|
import applePayLogo from '@/assets/svg/apple-pay-logo.svg';
|
||||||
|
import calendarIcon from '@/assets/svg/calendar-purple.svg';
|
||||||
|
import checkmarkIcon from '@/assets/svg/check.svg';
|
||||||
|
import closeIcon from '@/assets/svg/close.svg';
|
||||||
import creditCardIcon from '@/assets/svg/credit-card-icon.svg';
|
import creditCardIcon from '@/assets/svg/credit-card-icon.svg';
|
||||||
|
import gemIcon from '@/assets/svg/gem.svg';
|
||||||
|
import giftBox from '@/assets/svg/gift-purple.svg';
|
||||||
|
import googlePayLogo from '@/assets/svg/google-pay-logo.svg';
|
||||||
|
import heartIcon from '@/assets/svg/health.svg';
|
||||||
|
import hourglassIcon from '@/assets/svg/hourglass.svg';
|
||||||
|
import logo from '@/assets/svg/habitica-logo-purple.svg';
|
||||||
|
import paypalLogo from '@/assets/svg/paypal-logo.svg';
|
||||||
|
import subscriberGems from '@/assets/svg/subscriber-gems.svg';
|
||||||
|
import subscriberHourglasses from '@/assets/svg/subscriber-hourglasses.svg';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
amazonButton,
|
subscriptionOptions,
|
||||||
},
|
},
|
||||||
mixins: [paymentsMixin, notificationsMixin],
|
mixins: [paymentsMixin, notificationsMixin],
|
||||||
data () {
|
data () {
|
||||||
@@ -281,7 +543,7 @@ export default {
|
|||||||
gemLimit: planGemLimits.convRate,
|
gemLimit: planGemLimits.convRate,
|
||||||
},
|
},
|
||||||
subscription: {
|
subscription: {
|
||||||
key: 'basic_earned',
|
key: null,
|
||||||
},
|
},
|
||||||
// @TODO: Remove the need for this or move it to mixin
|
// @TODO: Remove the need for this or move it to mixin
|
||||||
amazonPayments: {},
|
amazonPayments: {},
|
||||||
@@ -294,17 +556,26 @@ export default {
|
|||||||
GIFT: 'Gift',
|
GIFT: 'Gift',
|
||||||
},
|
},
|
||||||
icons: Object.freeze({
|
icons: Object.freeze({
|
||||||
|
amazonPayLogo,
|
||||||
|
applePayLogo,
|
||||||
|
calendarIcon,
|
||||||
|
checkmarkIcon,
|
||||||
|
closeIcon,
|
||||||
creditCardIcon,
|
creditCardIcon,
|
||||||
|
gemIcon,
|
||||||
|
giftBox,
|
||||||
|
googlePayLogo,
|
||||||
|
heartIcon,
|
||||||
|
hourglassIcon,
|
||||||
|
logo,
|
||||||
|
paypalLogo,
|
||||||
|
subscriberGems,
|
||||||
|
subscriberHourglasses,
|
||||||
}),
|
}),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({ user: 'user.data', credentials: 'credentials' }),
|
...mapState({ user: 'user.data', credentials: 'credentials' }),
|
||||||
subscriptionBlocksOrdered () {
|
|
||||||
const subscriptions = filter(subscriptionBlocks, o => o.discount !== true);
|
|
||||||
|
|
||||||
return sortBy(subscriptions, [o => o.months]);
|
|
||||||
},
|
|
||||||
purchasedPlanIdInfo () {
|
purchasedPlanIdInfo () {
|
||||||
if (!this.subscriptionBlocks[this.user.purchased.plan.planId]) {
|
if (!this.subscriptionBlocks[this.user.purchased.plan.planId]) {
|
||||||
// @TODO: find which subs are in the common
|
// @TODO: find which subs are in the common
|
||||||
@@ -391,6 +662,41 @@ export default {
|
|||||||
&& !this.hasGroupPlan
|
&& !this.hasGroupPlan
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
currentMysterySet () {
|
||||||
|
return `shop_set_mystery_${moment().format('YYYYMM')}`;
|
||||||
|
},
|
||||||
|
paymentMethodLogo () {
|
||||||
|
switch (this.user.purchased.plan.paymentMethod) {
|
||||||
|
case this.paymentMethods.AMAZON_PAYMENTS:
|
||||||
|
return {
|
||||||
|
icon: this.icons.amazonPayLogo,
|
||||||
|
class: 'svg-amazon-pay mt-3',
|
||||||
|
};
|
||||||
|
case this.paymentMethods.APPLE:
|
||||||
|
return {
|
||||||
|
icon: this.icons.applePayLogo,
|
||||||
|
class: 'svg-apple-pay mt-4',
|
||||||
|
};
|
||||||
|
case this.paymentMethods.GOOGLE:
|
||||||
|
return {
|
||||||
|
icon: this.icons.googlePayLogo,
|
||||||
|
class: 'svg-google-pay mt-4',
|
||||||
|
};
|
||||||
|
case this.paymentMethods.PAYPAL:
|
||||||
|
return {
|
||||||
|
icon: this.icons.paypalLogo,
|
||||||
|
class: 'svg-paypal mt-4',
|
||||||
|
};
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
icon: null,
|
||||||
|
class: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
subscriptionEndDate () {
|
||||||
|
return moment(this.user.purchased.plan.dateTerminated).format('MM/DD/YYYY');
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async applyCoupon (coupon) {
|
async applyCoupon (coupon) {
|
||||||
@@ -406,6 +712,9 @@ export default {
|
|||||||
if (payMethod === 'Group Plan') payMethod = 'GroupPlan';
|
if (payMethod === 'Group Plan') payMethod = 'GroupPlan';
|
||||||
return this.$t(`cancelSubInfo${payMethod}`);
|
return this.$t(`cancelSubInfo${payMethod}`);
|
||||||
},
|
},
|
||||||
|
showSelectUser () {
|
||||||
|
this.$root.$emit('bv::show::modal', 'select-user-modal');
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
178
website/client/src/components/settings/subscriptionOptions.vue
Normal file
178
website/client/src/components/settings/subscriptionOptions.vue
Normal file
@@ -0,0 +1,178 @@
|
|||||||
|
<template>
|
||||||
|
<div id="subscription-form">
|
||||||
|
<b-form-group class="mb-4 w-100 h-100">
|
||||||
|
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
|
||||||
|
<b-form-radio
|
||||||
|
v-for="block in subscriptionBlocksOrdered"
|
||||||
|
v-if="block.target !== 'group' && block.canSubscribe === true"
|
||||||
|
:value="block.key"
|
||||||
|
:key="block.key"
|
||||||
|
v-model="subscription.key"
|
||||||
|
class="subscribe-option pt-2 pl-5 pb-3 mb-0"
|
||||||
|
:class="{selected: subscription.key === block.key}"
|
||||||
|
@click.native="subscription.key = block.key"
|
||||||
|
>
|
||||||
|
<!-- eslint-enable vue/no-use-v-if-with-v-for -->
|
||||||
|
<div
|
||||||
|
v-html="$t('subscriptionRateText', {price: block.price, months: block.months})"
|
||||||
|
class="subscription-text ml-2 mb-1"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-html="subscriptionBubbles(block.key)"
|
||||||
|
class="ml-2"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</b-form-radio>
|
||||||
|
</b-form-group>
|
||||||
|
<div class="payments-column mx-auto mt-auto">
|
||||||
|
<button
|
||||||
|
class="purchase btn btn-primary payment-button payment-item"
|
||||||
|
:class="{disabled: !subscription.key}"
|
||||||
|
:disabled="!subscription.key"
|
||||||
|
@click="showStripe({subscription:subscription.key, coupon:subscription.coupon})"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-once
|
||||||
|
class="svg-icon credit-card-icon"
|
||||||
|
v-html="icons.creditCardIcon"
|
||||||
|
></div>
|
||||||
|
{{ $t('card') }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn payment-item paypal-checkout payment-button"
|
||||||
|
:class="{disabled: !subscription.key}"
|
||||||
|
:disabled="!subscription.key"
|
||||||
|
@click="openPaypal(paypalPurchaseLink, 'subscription')"
|
||||||
|
>
|
||||||
|
|
||||||
|
<img
|
||||||
|
src="~@/assets/images/paypal-checkout.png"
|
||||||
|
:alt="$t('paypal')"
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
<amazon-button
|
||||||
|
class="payment-item"
|
||||||
|
:class="{disabled: !subscription.key}"
|
||||||
|
:disabled="!subscription.key"
|
||||||
|
:amazon-data="{
|
||||||
|
type: 'subscription',
|
||||||
|
subscription: subscription.key,
|
||||||
|
coupon: subscription.coupon
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '~@/assets/scss/colors.scss';
|
||||||
|
#subscription-form {
|
||||||
|
.disabled .amazonpay-button-inner-image {
|
||||||
|
cursor: default !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-control .custom-control-label::before,
|
||||||
|
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
background-color: rgba(213, 200, 255, 0.32);
|
||||||
|
|
||||||
|
.subscription-bubble {
|
||||||
|
background-color: $purple-300;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
.subscription-text {
|
||||||
|
color: $purple-200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription-bubble, .discount-bubble {
|
||||||
|
border-radius: 100px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription-bubble {
|
||||||
|
background-color: $gray-600;
|
||||||
|
color: $gray-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discount-bubble {
|
||||||
|
background-color: $green-10;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '~@/assets/scss/colors.scss';
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
opacity: 0.64;
|
||||||
|
|
||||||
|
.btn, .btn:hover, .btn:active {
|
||||||
|
box-shadow: none;
|
||||||
|
cursor: default !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscribe-option {
|
||||||
|
border-bottom: 1px solid $gray-600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import filter from 'lodash/filter';
|
||||||
|
import sortBy from 'lodash/sortBy';
|
||||||
|
|
||||||
|
import amazonButton from '@/components/payments/amazonButton';
|
||||||
|
import creditCardIcon from '@/assets/svg/credit-card-icon.svg';
|
||||||
|
import paymentsMixin from '../../mixins/payments';
|
||||||
|
import subscriptionBlocks from '@/../../common/script/content/subscriptionBlocks';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
amazonButton,
|
||||||
|
},
|
||||||
|
mixins: [
|
||||||
|
paymentsMixin,
|
||||||
|
],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
subscription: {
|
||||||
|
key: null,
|
||||||
|
},
|
||||||
|
icons: Object.freeze({
|
||||||
|
creditCardIcon,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
subscriptionBlocks () {
|
||||||
|
return subscriptionBlocks;
|
||||||
|
},
|
||||||
|
subscriptionBlocksOrdered () {
|
||||||
|
const subscriptions = filter(subscriptionBlocks, o => o.discount !== true);
|
||||||
|
|
||||||
|
return sortBy(subscriptions, [o => o.months]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
subscriptionBubbles (subscription) {
|
||||||
|
switch (subscription) {
|
||||||
|
case 'basic_3mo':
|
||||||
|
return '<span class="subscription-bubble px-2 py-1 mr-1">Gem cap raised to 30</span><span class="subscription-bubble px-2 py-1">+1 Mystic Hourglass</span>';
|
||||||
|
case 'basic_6mo':
|
||||||
|
return '<span class="subscription-bubble px-2 py-1 mr-1">Gem cap raised to 35</span><span class="subscription-bubble px-2 py-1">+2 Mystic Hourglass</span>';
|
||||||
|
case 'basic_12mo':
|
||||||
|
return '<span class="discount-bubble px-2 py-1 mr-1">Save 20%</span><span class="subscription-bubble px-2 py-1 mr-1">Gem cap raised to 45</span><span class="subscription-bubble px-2 py-1">+4 Mystic Hourglass</span>';
|
||||||
|
default:
|
||||||
|
return '<span class="subscription-bubble px-2 py-1">Gem cap at 25</span>';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -284,6 +284,7 @@ export default {
|
|||||||
this.amazonPayments.group = null;
|
this.amazonPayments.group = null;
|
||||||
},
|
},
|
||||||
cancelSubscriptionConfirm (config) {
|
cancelSubscriptionConfirm (config) {
|
||||||
|
if (config.canCancel === false) return;
|
||||||
this.$root.$emit('habitica:cancel-subscription-confirm', config);
|
this.$root.$emit('habitica:cancel-subscription-confirm', config);
|
||||||
},
|
},
|
||||||
async cancelSubscription (config) {
|
async cancelSubscription (config) {
|
||||||
|
|||||||
@@ -31,6 +31,12 @@ export async function fetchMember (store, payload) {
|
|||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function fetchMemberByUsername (store, payload) {
|
||||||
|
const url = `${apiv4Prefix}/members/username/${payload.username}`;
|
||||||
|
const response = await axios.get(url);
|
||||||
|
return response;
|
||||||
|
}
|
||||||
|
|
||||||
export async function getGroupInvites (store, payload) {
|
export async function getGroupInvites (store, payload) {
|
||||||
let url = `${apiv4Prefix}/groups/${payload.groupId}/invites`;
|
let url = `${apiv4Prefix}/groups/${payload.groupId}/invites`;
|
||||||
if (payload.includeAllPublicFields) {
|
if (payload.includeAllPublicFields) {
|
||||||
|
|||||||
@@ -114,9 +114,6 @@ export default function () {
|
|||||||
profileOptions: {
|
profileOptions: {
|
||||||
startingPage: '',
|
startingPage: '',
|
||||||
},
|
},
|
||||||
gemModalOptions: {
|
|
||||||
startingPage: '',
|
|
||||||
},
|
|
||||||
rageModalOptions: {
|
rageModalOptions: {
|
||||||
npc: '',
|
npc: '',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -176,7 +176,9 @@
|
|||||||
"messageWroteIn": "<%= user %> wrote in <%= group %>",
|
"messageWroteIn": "<%= user %> wrote in <%= group %>",
|
||||||
"msgPreviewHeading": "Message Preview",
|
"msgPreviewHeading": "Message Preview",
|
||||||
"leaderOnlyChallenges": "Only group leader can create challenges",
|
"leaderOnlyChallenges": "Only group leader can create challenges",
|
||||||
"sendGift": "Send Gift",
|
"sendGift": "Send a Gift",
|
||||||
|
"selectGift": "Select Gift",
|
||||||
|
"sendGiftToWhom": "Who would you like to send a gift to?",
|
||||||
"inviteFriends": "Invite Friends",
|
"inviteFriends": "Invite Friends",
|
||||||
"partyMembersInfo": "Your Party currently has <%= memberCount %> members and <%= invitationCount %> pending invitations. The limit of members in a Party is <%= limitMembers %>. Invitations above this limit cannot be sent.",
|
"partyMembersInfo": "Your Party currently has <%= memberCount %> members and <%= invitationCount %> pending invitations. The limit of members in a Party is <%= limitMembers %>. Invitations above this limit cannot be sent.",
|
||||||
"inviteByEmail": "Invite by Email",
|
"inviteByEmail": "Invite by Email",
|
||||||
@@ -245,6 +247,8 @@
|
|||||||
"userAlreadyInAParty": "UserID: <%= userId %>, User \"<%= username %>\" already in a party. ",
|
"userAlreadyInAParty": "UserID: <%= userId %>, User \"<%= username %>\" already in a party. ",
|
||||||
"userWithIDNotFound": "User with id \"<%= userId %>\" not found.",
|
"userWithIDNotFound": "User with id \"<%= userId %>\" not found.",
|
||||||
"userWithUsernameNotFound": "User with username \"<%= username %>\" not found.",
|
"userWithUsernameNotFound": "User with username \"<%= username %>\" not found.",
|
||||||
|
"usernameOrUserId": "Username or User ID",
|
||||||
|
"userWithUsernameOrUserIdNotFound": "Username or User ID not found.",
|
||||||
"userHasNoLocalRegistration": "User does not have a local registration (username, email, password).",
|
"userHasNoLocalRegistration": "User does not have a local registration (username, email, password).",
|
||||||
"uuidsMustBeAnArray": "User ID invites must be an array.",
|
"uuidsMustBeAnArray": "User ID invites must be an array.",
|
||||||
"emailsMustBeAnArray": "Email address invites must be an array.",
|
"emailsMustBeAnArray": "Email address invites must be an array.",
|
||||||
@@ -346,7 +350,7 @@
|
|||||||
"aboutToJoinCancelledGroupPlan": "You are about to join a group with a canceled plan. You will NOT receive a free subscription.",
|
"aboutToJoinCancelledGroupPlan": "You are about to join a group with a canceled plan. You will NOT receive a free subscription.",
|
||||||
"cannotChangeLeaderWithActiveGroupPlan": "You can not change the leader while the group has an active plan.",
|
"cannotChangeLeaderWithActiveGroupPlan": "You can not change the leader while the group has an active plan.",
|
||||||
"leaderCannotLeaveGroupWithActiveGroup": "A leader can not leave a group while the group has an active plan",
|
"leaderCannotLeaveGroupWithActiveGroup": "A leader can not leave a group while the group has an active plan",
|
||||||
"youHaveGroupPlan": "You have a free subscription because you are a member of a group that has a Group Plan. This will end when you are no longer in the group that has a Group Plan. Any months of extra subscription credit you have will be applied at the end of the Group Plan.",
|
"youHaveGroupPlan": "You have a free subscription because you are a member of a Group Plan. Your subscription will end when you are no longer a member of the Group Plan.",
|
||||||
"cancelGroupSub": "Cancel Group Plan",
|
"cancelGroupSub": "Cancel Group Plan",
|
||||||
"confirmCancelGroupPlan": "Are you sure you want to cancel your Group Plan? All Group members will lose their subscription and benefits.",
|
"confirmCancelGroupPlan": "Are you sure you want to cancel your Group Plan? All Group members will lose their subscription and benefits.",
|
||||||
"canceledGroupPlan": "Group Plan Canceled",
|
"canceledGroupPlan": "Group Plan Canceled",
|
||||||
@@ -490,5 +494,5 @@
|
|||||||
"singleCompletion": "Single - Completes when any assigned user finishes",
|
"singleCompletion": "Single - Completes when any assigned user finishes",
|
||||||
"allAssignedCompletion": "All - Completes when all assigned users finish",
|
"allAssignedCompletion": "All - Completes when all assigned users finish",
|
||||||
"suggestedGroup": "Suggested because you’re new to Habitica.",
|
"suggestedGroup": "Suggested because you’re new to Habitica.",
|
||||||
"groupActivityNotificationTitle": "<%= user %> posted in <%= group %>"
|
"groupActivityNotificationTitle": "<%= user %> posted in <%= group %>"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -120,6 +120,7 @@
|
|||||||
"paymentYouSentGems": "You sent <strong><%= name %></strong>:",
|
"paymentYouSentGems": "You sent <strong><%= name %></strong>:",
|
||||||
"paymentYouSentSubscription": "You sent <strong><%= name %></strong> a <%= months %>-months Habitica subscription.",
|
"paymentYouSentSubscription": "You sent <strong><%= name %></strong> a <%= months %>-months Habitica subscription.",
|
||||||
"paymentSubBilling": "Your subscription will be billed <strong>$<%= amount %></strong> every <strong><%= months %> months</strong>.",
|
"paymentSubBilling": "Your subscription will be billed <strong>$<%= amount %></strong> every <strong><%= months %> months</strong>.",
|
||||||
|
"paymentSubBillingWithMethod": "Your subscription will be billed <strong>$<%= amount %></strong> every <strong><%= months %> months</strong> via <strong><%= paymentMethod %></strong>.",
|
||||||
"paymentAutoRenew": "This subscription will auto-renew until it is canceled. If you need to cancel this subscription, you can do so from your settings.",
|
"paymentAutoRenew": "This subscription will auto-renew until it is canceled. If you need to cancel this subscription, you can do so from your settings.",
|
||||||
"paymentCanceledDisputes": "We’ve sent a cancelation confirmation to your email. If you don’t see the email, please contact us to prevent future billing disputes.",
|
"paymentCanceledDisputes": "We’ve sent a cancelation confirmation to your email. If you don’t see the email, please contact us to prevent future billing disputes.",
|
||||||
"success": "Success!",
|
"success": "Success!",
|
||||||
|
|||||||
@@ -138,7 +138,7 @@
|
|||||||
"unsubscribeAllEmailsText": "By checking this box, I certify that I understand that by unsubscribing from all emails, Habitica will never be able to notify me via email about important changes to the site or my account.",
|
"unsubscribeAllEmailsText": "By checking this box, I certify that I understand that by unsubscribing from all emails, Habitica will never be able to notify me via email about important changes to the site or my account.",
|
||||||
"unsubscribeAllPush": "Check to Unsubscribe from all Push Notifications",
|
"unsubscribeAllPush": "Check to Unsubscribe from all Push Notifications",
|
||||||
"correctlyUnsubscribedEmailType": "Correctly unsubscribed from \"<%= emailType %>\" emails.",
|
"correctlyUnsubscribedEmailType": "Correctly unsubscribed from \"<%= emailType %>\" emails.",
|
||||||
"subscriptionRateText": "Recurring $<%= price %> USD every <%= months %> months",
|
"subscriptionRateText": "Recurring <strong>$<%= price %> USD</strong> every <strong><%= months %> months</strong>",
|
||||||
"recurringText": "recurring",
|
"recurringText": "recurring",
|
||||||
"benefits": "Benefits",
|
"benefits": "Benefits",
|
||||||
"coupon": "Coupon",
|
"coupon": "Coupon",
|
||||||
@@ -175,14 +175,15 @@
|
|||||||
"pushDeviceAlreadyAdded": "The user already has the push device",
|
"pushDeviceAlreadyAdded": "The user already has the push device",
|
||||||
"pushDeviceNotFound": "The user has no push device with this id.",
|
"pushDeviceNotFound": "The user has no push device with this id.",
|
||||||
"pushDeviceRemoved": "Push device removed successfully.",
|
"pushDeviceRemoved": "Push device removed successfully.",
|
||||||
"buyGemsGoldCap": "Cap raised to <%= amount %>",
|
"buyGemsGoldCapBase": "Gem cap at <%= amount %>",
|
||||||
|
"buyGemsGoldCap": "Gem cap raised to <%= amount %>",
|
||||||
"mysticHourglass": "<%= amount %> Mystic Hourglass",
|
"mysticHourglass": "<%= amount %> Mystic Hourglass",
|
||||||
"mysticHourglassText": "Mystic Hourglasses allow purchasing a previous month's Mystery Item set.",
|
"mysticHourglassText": "Mystic Hourglasses allow purchasing a previous month's Mystery Item set.",
|
||||||
"purchasedPlanId": "Recurring $<%= price %> USD each <%= months %> Month(s) (<%= plan %>)",
|
"purchasedPlanId": "Recurring $<%= price %> USD each <%= months %> Month(s) (<%= plan %>)",
|
||||||
"purchasedPlanExtraMonths": "You have <%= months %> months of extra subscription credit.",
|
"purchasedPlanExtraMonths": "You have <strong><%= months %> months</strong> of extra subscription credit.",
|
||||||
"consecutiveSubscription": "Consecutive Subscription",
|
"consecutiveSubscription": "Consecutive Subscription",
|
||||||
"consecutiveMonths": "Consecutive Months:",
|
"consecutiveMonths": "Consecutive Months:",
|
||||||
"gemCapExtra": "Gem Cap Extra:",
|
"gemCapExtra": "Gem Cap Bonus",
|
||||||
"mysticHourglasses": "Mystic Hourglasses:",
|
"mysticHourglasses": "Mystic Hourglasses:",
|
||||||
"mysticHourglassesTooltip": "Mystic Hourglasses",
|
"mysticHourglassesTooltip": "Mystic Hourglasses",
|
||||||
"paypal": "PayPal",
|
"paypal": "PayPal",
|
||||||
|
|||||||
@@ -19,7 +19,8 @@
|
|||||||
"supportDevsText": "Your subscription helps keep Habitica thriving and helps fund the development of new features. Thank you for your generosity!",
|
"supportDevsText": "Your subscription helps keep Habitica thriving and helps fund the development of new features. Thank you for your generosity!",
|
||||||
"exclusiveJackalopePet": "Exclusive pet",
|
"exclusiveJackalopePet": "Exclusive pet",
|
||||||
"exclusiveJackalopePetText": "Get the Royal Purple Jackalope pet, available only to subscribers!",
|
"exclusiveJackalopePetText": "Get the Royal Purple Jackalope pet, available only to subscribers!",
|
||||||
"giftSubscription": "Want to gift a subscription to someone?",
|
"giftSubscription": "Want to gift the benefits of a subscription to someone else?",
|
||||||
|
"giftASubscription": "Gift a Subscription",
|
||||||
"giftSubscriptionText1": "Open their profile! You can do this by clicking on their avatar in your party header or by clicking on their name in chat.",
|
"giftSubscriptionText1": "Open their profile! You can do this by clicking on their avatar in your party header or by clicking on their name in chat.",
|
||||||
"giftSubscriptionText2": "Click on the gift icon in the top right of their profile.",
|
"giftSubscriptionText2": "Click on the gift icon in the top right of their profile.",
|
||||||
"giftSubscriptionText3": "Select \"subscription\" and enter your payment information.",
|
"giftSubscriptionText3": "Select \"subscription\" and enter your payment information.",
|
||||||
@@ -42,8 +43,8 @@
|
|||||||
"manageSub": "Click to manage subscription",
|
"manageSub": "Click to manage subscription",
|
||||||
"cancelSub": "Cancel Subscription",
|
"cancelSub": "Cancel Subscription",
|
||||||
"cancelSubInfoGoogle": "Please go to the \"Account\" > \"Subscriptions\" section of the Google Play Store app to cancel your subscription or to see your subscription's termination date if you have already cancelled it. This screen is not able to show you whether your subscription has been cancelled.",
|
"cancelSubInfoGoogle": "Please go to the \"Account\" > \"Subscriptions\" section of the Google Play Store app to cancel your subscription or to see your subscription's termination date if you have already cancelled it. This screen is not able to show you whether your subscription has been cancelled.",
|
||||||
"cancelSubInfoApple": "Please follow <a href=\"https://support.apple.com/en-us/HT202039\">Apple's official instructions</a> to cancel your subscription or to see your subscription's termination date if you have already cancelled it. This screen is not able to show you whether your subscription has been cancelled.",
|
"cancelSubInfoApple": "Please follow <a href=\"https://support.apple.com/en-us/HT202039\" target=\"_blank\">Apple's official instructions</a> to cancel your subscription or to see your subscription's termination date if you have already cancelled it. This screen is not able to show you whether your subscription has been cancelled.",
|
||||||
"cancelSubInfoGroupPlan": "Because you have a free subscription from a Group Plan, you cannot cancel it. It will end when you are no longer in the Group. If you are the Group leader and want to cancel the entire Group Plan, you can do that from the group's \"Payment Details\" tab.",
|
"cancelSubInfoGroupPlan": "Because you have a free subscription from a Group Plan, you cannot cancel it. It will end when you are no longer a member of the Group Plan. If you are the Group leader and want to cancel the Group Plan, you can do that from the Group Plan’s “Group Billing” tab.",
|
||||||
"canceledSubscription": "Canceled Subscription",
|
"canceledSubscription": "Canceled Subscription",
|
||||||
"cancelingSubscription": "Canceling the subscription",
|
"cancelingSubscription": "Canceling the subscription",
|
||||||
"adminSub": "Administrator Subscriptions",
|
"adminSub": "Administrator Subscriptions",
|
||||||
@@ -177,7 +178,7 @@
|
|||||||
|
|
||||||
"mysterySetwondercon": "Wondercon",
|
"mysterySetwondercon": "Wondercon",
|
||||||
|
|
||||||
"subUpdateCard": "Update Card",
|
"subUpdateCard": "Update Credit Card",
|
||||||
"subUpdateTitle": "Update",
|
"subUpdateTitle": "Update",
|
||||||
"subUpdateDescription": "Update the card to be charged.",
|
"subUpdateDescription": "Update the card to be charged.",
|
||||||
"notEnoughHourglasses": "You don't have enough Mystic Hourglasses.",
|
"notEnoughHourglasses": "You don't have enough Mystic Hourglasses.",
|
||||||
@@ -222,17 +223,29 @@
|
|||||||
"gemBenefit3": "Exciting Quest chains that drop pet eggs.",
|
"gemBenefit3": "Exciting Quest chains that drop pet eggs.",
|
||||||
"gemBenefit4": "Reset your avatar's Stat Points and change its Class.",
|
"gemBenefit4": "Reset your avatar's Stat Points and change its Class.",
|
||||||
"subscriptionBenefitLeadin": "Support Habitica by becoming a subscriber and you'll receive these useful benefits!",
|
"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!",
|
"subscriptionBenefit1": "Alexander the Merchant will now sell you Gems from the Market for 20 Gold each!",
|
||||||
"subscriptionBenefit2": "Completed To-Dos and task history are available for longer.",
|
"subscriptionBenefit2": "Completed To-Dos and task history are available for longer.",
|
||||||
"subscriptionBenefit3": "Discover more items in Habitica with a doubled daily drop cap.",
|
"subscriptionBenefit3": "Discover even more items in Habitica with a 2x daily drop-cap.",
|
||||||
"subscriptionBenefit4": "Unique cosmetic items for your avatar each month.",
|
"subscriptionBenefit4": "Unique cosmetic item for you to decorate your avatar each month.",
|
||||||
"subscriptionBenefit5": "Receive the exclusive Royal Purple Jackalope pet!",
|
"subscriptionBenefit5": "Receive the Royal Purple Jackalope pet when you become a new subscriber.",
|
||||||
"subscriptionBenefit6": "Earn Mystic Hourglasses for use in the Time Travelers' Shop!",
|
"subscriptionBenefit6": "Earn Mystic Hourglasses to purchase items in the Time Traveler’s Shop!",
|
||||||
"haveCouponCode": "Do you have a coupon code?",
|
"haveCouponCode": "Do you have a coupon code?",
|
||||||
"subscriptionAlreadySubscribedLeadIn": "Thanks for subscribing!",
|
"subscriptionAlreadySubscribedLeadIn": "Thanks for subscribing!",
|
||||||
"subscriptionAlreadySubscribed1": "To see your subscription details and cancel, renew, or change your subscription, please go to <a href='/user/settings/subscription'>User icon > Settings > Subscription</a>.",
|
"subscriptionAlreadySubscribed1": "To see your subscription details and cancel, renew, or change your subscription, please go to <a href='/user/settings/subscription'>User icon > Settings > Subscription</a>.",
|
||||||
"purchaseAll": "Purchase Set",
|
"purchaseAll": "Purchase Set",
|
||||||
"gemsPurchaseNote": "Subscribers can buy gems for gold in the Market! For easy access, you can also pin the gem to your Rewards column.",
|
"gemsPurchaseNote": "Subscribers can buy Gems for Gold in the Market! For easy access, you can also pin the Gem to your Rewards column.",
|
||||||
"gemsRemaining": "gems remaining",
|
"gemsRemaining": "Gems remaining",
|
||||||
"notEnoughGemsToBuy": "You are unable to buy that amount of gems"
|
"notEnoughGemsToBuy": "You are unable to buy that amount of Gems",
|
||||||
|
"subscribersReceiveBenefits": "Subscribers receive these useful benefits!",
|
||||||
|
"monthlyMysteryItems": "Monthly Mystery Items",
|
||||||
|
"doubleDropCap": "Double the Drops",
|
||||||
|
"youAreSubscribed": "You are subscribed to Habitica",
|
||||||
|
"subscriptionCanceled": "Your subscription is canceled",
|
||||||
|
"subscriptionInactiveDate": "Your subscription benefits will become inactive on <strong><%= date %></strong>",
|
||||||
|
"subscriptionStats": "Subscription Stats",
|
||||||
|
"subMonths": "Sub Months",
|
||||||
|
"needToUpdateCard": "Need to update your card?",
|
||||||
|
"readyToResubscribe": "Are you ready to resubscribe?",
|
||||||
|
"cancelYourSubscription": "Cancel your subscription?",
|
||||||
|
"cancelSubAlternatives": "If you're having technical problems or Habitica doesn't seem to be working out for you, please consider <a href='mailto:admin@habitica.com'>contacting us</a>. We want to help you get the most from Habitica."
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ const NOTIFICATION_TYPES = [
|
|||||||
'GROUP_INVITE_ACCEPTED',
|
'GROUP_INVITE_ACCEPTED',
|
||||||
'SCORED_TASK',
|
'SCORED_TASK',
|
||||||
'BOSS_DAMAGE', // Not used currently but kept to avoid validation errors
|
'BOSS_DAMAGE', // Not used currently but kept to avoid validation errors
|
||||||
|
'GIFT_ONE_GET_ONE',
|
||||||
'GUILD_PROMPT',
|
'GUILD_PROMPT',
|
||||||
'GUILD_JOINED_ACHIEVEMENT',
|
'GUILD_JOINED_ACHIEVEMENT',
|
||||||
'CHALLENGE_JOINED_ACHIEVEMENT',
|
'CHALLENGE_JOINED_ACHIEVEMENT',
|
||||||
|
|||||||
Reference in New Issue
Block a user