You've already forked AstralRinth
forked from didirus/AstralRinth
Billing / plus frontend (#2130)
* [wip] initial * [wip] subscriptions/plus frontend * [wip] finish payment flow * Charges page * finish most subscriptions work * Finish * update eslint * Fix issues * fix intl extract * fix omorphia locale extract * fix responsiveness * fix lint
This commit is contained in:
Geometrically
11
packages/assets/branding/modrinth-plus.svg
Normal file
11
packages/assets/branding/modrinth-plus.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1187.17 207.25">
|
||||
<g>
|
||||
<path d="M146.06,109.85l-14.38,17.63-24.09,7.63-10.81-12.03-61.89,37.14c-2.94-3.78-6.36-9.13-8.54-14.27l61.69-37.02-5.63-14.91,17.62-18.1,22.27-4.8,6.45,7.94-10.27,10.4-8.95,2.82-6.4,6.57,3.14,8.72,6.36,6.75,8.96-2.39,6.39-7,13.93-4.42,4.15,9.34Z" style="fill: var(--color-purple); fill-rule: evenodd;"/>
|
||||
<path d="M208.59,86.56l-48.91,13.2c-.75-4.66-1.64-8.88-4.34-16.06l49-13.22c2.07,5.54,3.47,10.86,4.25,16.08Z" style="fill: var(--color-purple); fill-rule: evenodd;"/>
|
||||
<path d="M33.65,110.46c3.47,40.97,37.87,73.19,79.74,73.19,31.63,0,59.01-18.4,71.99-45.06l15.93,5.52c-15.33,33.22-48.95,56.3-87.92,56.3-51.12,0-93.04-39.72-96.55-89.95h16.81ZM17.1,93.78C22.04,44.98,63.3,6.84,113.4,6.84c53.42,0,96.79,43.37,96.79,96.79,0,8.57-1.11,16.88-3.21,24.79l-15.89-5.5c1.56-6.31,2.35-12.79,2.34-19.29,0-44.17-35.86-80.03-80.03-80.03-40.83,0-74.57,30.65-79.43,70.18h-16.87Z" style="fill: var(--color-purple); fill-rule: evenodd;"/>
|
||||
<path d="M113.14,57.04c-25.73.02-46.61,20.92-46.61,46.66s20.91,46.66,46.66,46.66c1.3,0,2.6-.05,3.88-.16l4.66,16.31c-2.83.38-5.68.57-8.54.57-34.98,0-63.38-28.4-63.38-63.38s28.4-63.38,63.38-63.38c.87,0,1.73.02,2.59.05l-2.64,16.67ZM132.22,43.23c25.69,8.09,44.35,32.12,44.35,60.47,0,26.25-15.99,48.78-38.74,58.4l-4.64-16.24c15.76-7.49,26.67-23.56,26.67-42.16,0-19.99-12.6-37.06-30.28-43.7l2.66-16.77Z" style="fill: var(--color-purple); fill-rule: evenodd;"/>
|
||||
</g>
|
||||
<path d="M1090.35,115.11v-17.35h79.97v17.35h-79.97ZM1121.05,145.47v-78.06h18.56v78.06h-18.56Z" style="fill: var(--color-purple);"/>
|
||||
<path style="fill: currentColor;" d="M362.01,74.2c11.67,0,21.07,3.31,27.85,10.1,6.79,6.97,10.27,17.06,10.27,30.64v53.27h-21.76v-50.49c0-8.18-1.74-14.27-5.4-18.45-3.65-4.01-8.7-6.1-15.49-6.1-7.31,0-13.23,2.44-17.59,7.14-4.35,4.87-6.61,11.84-6.61,20.72v47.18h-21.76v-50.49c0-8.18-1.74-14.27-5.4-18.45-3.65-4.01-8.71-6.1-15.49-6.1-7.49,0-13.23,2.44-17.59,7.14-4.35,4.7-6.61,11.66-6.61,20.72v47.18h-21.76v-92.97h20.72v11.84c3.48-4.18,7.83-7.31,13.06-9.57,5.22-2.26,10.97-3.31,17.41-3.31,6.97,0,13.23,1.22,18.63,3.83,5.4,2.79,9.57,6.61,12.71,11.67,3.83-4.88,8.71-8.71,14.8-11.49,6.09-2.61,12.71-4.01,20.02-4.01ZM470.12,169.43c-9.4,0-17.93-2.09-25.42-6.09-7.37-3.89-13.47-9.81-17.59-17.06-4.35-7.14-6.44-15.32-6.44-24.55s2.09-17.41,6.44-24.54c4.17-7.16,10.26-13.01,17.59-16.89,7.49-4,16.02-6.09,25.42-6.09s18.11,2.09,25.59,6.1c7.49,4,13.41,9.75,17.76,16.89,4.18,7.14,6.27,15.32,6.27,24.55s-2.09,17.41-6.27,24.55c-4.35,7.31-10.27,13.06-17.76,17.06-7.49,4.01-16.02,6.1-25.59,6.1h0ZM470.12,150.81c8.01,0,14.63-2.61,19.85-8.01,5.22-5.4,7.83-12.36,7.83-21.07s-2.61-15.67-7.83-21.07c-5.22-5.4-11.84-8.01-19.85-8.01s-14.62,2.61-19.67,8.01c-5.22,5.4-7.83,12.36-7.83,21.07s2.61,15.67,7.83,21.07c5.05,5.4,11.67,8.01,19.67,8.01ZM631.17,39.03v129.18h-20.89v-12.01c-3.57,4.31-8.1,7.71-13.23,9.93-5.4,2.26-11.14,3.31-17.59,3.31-8.88,0-16.89-1.92-24.03-5.92-7.14-4-12.88-9.57-16.89-16.89-4-7.14-6.09-15.49-6.09-24.9s2.09-17.76,6.1-24.9c4-7.14,9.75-12.71,16.89-16.71,7.14-4,15.14-5.92,24.03-5.92,6.09,0,11.84,1.05,16.89,3.13,5.02,2.07,9.5,5.29,13.06,9.4v-47.71h21.76ZM582.07,150.81c5.22,0,9.93-1.22,14.1-3.66,4.18-2.26,7.48-5.74,9.92-10.1,2.44-4.35,3.65-9.57,3.65-15.32s-1.22-10.97-3.65-15.32c-2.44-4.35-5.75-7.83-9.92-10.27-4.18-2.26-8.88-3.48-14.1-3.48s-9.92,1.22-14.1,3.48c-4.18,2.44-7.49,5.92-9.93,10.27-2.44,4.35-3.65,9.57-3.65,15.32s1.22,10.97,3.65,15.32c2.44,4.35,5.75,7.83,9.93,10.1,4.18,2.44,8.88,3.66,14.1,3.66ZM679.91,88.82c6.27-9.75,17.23-14.63,33.08-14.63v20.72c-1.66-.33-3.35-.5-5.05-.52-8.53,0-15.15,2.44-19.85,7.32-4.7,5.05-7.14,12.19-7.14,21.41v45.09h-21.76v-92.97h20.72v13.58h0ZM730.92,75.24h21.76v92.97h-21.76v-92.97ZM741.89,59.92c-4.01,0-7.31-1.22-9.93-3.83-2.59-2.36-4.05-5.72-4-9.23,0-3.65,1.39-6.79,4-9.4,2.61-2.44,5.92-3.65,9.93-3.65s7.31,1.22,9.92,3.48c2.61,2.44,4.01,5.4,4.01,9.05s-1.22,6.97-3.83,9.57c-2.61,2.61-6.09,4.01-10.1,4.01ZM833.47,74.2c11.67,0,21.07,3.48,28.21,10.27,7.14,6.79,10.62,17.06,10.62,30.47v53.27h-21.76v-50.49c0-8.18-1.91-14.27-5.74-18.45-3.83-4.01-9.23-6.1-16.37-6.1-8.01,0-14.27,2.44-18.98,7.14-4.7,4.87-6.96,11.84-6.96,20.89v47.01h-21.76v-92.97h20.72v12.01c3.66-4.35,8.18-7.49,13.58-9.75,5.4-2.26,11.67-3.31,18.45-3.31ZM955.34,163.17c-2.72,2.18-5.86,3.78-9.23,4.7-3.8,1.06-7.73,1.58-11.67,1.57-10.27,0-18.1-2.61-23.68-8.01-5.57-5.4-8.36-13.06-8.36-23.33v-44.75h-15.32v-17.41h15.32v-21.24h21.76v21.24h24.89v17.41h-24.9v44.22c0,4.53,1.05,8.01,3.31,10.27,2.26,2.44,5.4,3.65,9.57,3.65,4.88,0,8.88-1.22,12.19-3.83l6.09,15.49ZM1025.5,74.2c11.67,0,21.07,3.48,28.21,10.27,7.14,6.79,10.62,17.06,10.62,30.47v53.27h-21.76v-50.49c0-8.18-1.91-14.27-5.75-18.45-3.83-4.01-9.23-6.1-16.36-6.1-8.01,0-14.28,2.44-18.98,7.14-4.7,4.87-6.96,11.84-6.96,20.89v47.01h-21.76V39.03h21.76v47c3.65-3.83,8.01-6.79,13.41-8.88,5.22-1.91,11.14-2.96,17.58-2.96Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
1
packages/assets/icons/card.svg
Normal file
1
packages/assets/icons/card.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
|
||||
|
After Width: | Height: | Size: 275 B |
1
packages/assets/icons/receipt-text.svg
Normal file
1
packages/assets/icons/receipt-text.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/><path d="M14 8H8"/><path d="M16 12H8"/><path d="M13 16H8"/></svg>
|
||||
|
After Width: | Height: | Size: 330 B |
1
packages/assets/icons/sparkles.svg
Normal file
1
packages/assets/icons/sparkles.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>
|
||||
|
After Width: | Height: | Size: 559 B |
@@ -3,6 +3,7 @@
|
||||
// Branding
|
||||
import _ModrinthIcon from './branding/logo.svg?component'
|
||||
import _FourOhFourNotFound from './branding/404.svg?component'
|
||||
import _ModrinthPlusIcon from './branding/modrinth-plus.svg?component'
|
||||
|
||||
// External Icons
|
||||
import _SSODiscordIcon from './external/sso/discord.svg?component'
|
||||
@@ -35,6 +36,7 @@ import _BookIcon from './icons/book.svg?component'
|
||||
import _BookmarkIcon from './icons/bookmark.svg?component'
|
||||
import _BoxIcon from './icons/box.svg?component'
|
||||
import _CalendarIcon from './icons/calendar.svg?component'
|
||||
import _CardIcon from './icons/card.svg?component'
|
||||
import _ChartIcon from './icons/chart.svg?component'
|
||||
import _CheckIcon from './icons/check.svg?component'
|
||||
import _CheckCheckIcon from './icons/check-check.svg?component'
|
||||
@@ -100,6 +102,7 @@ import _PlayIcon from './icons/play.svg?component'
|
||||
import _PlusIcon from './icons/plus.svg?component'
|
||||
import _RadioButtonIcon from './icons/radio-button.svg?component'
|
||||
import _RadioButtonChecked from './icons/radio-button-checked.svg?component'
|
||||
import _ReceiptTextIcon from './icons/receipt-text.svg?component'
|
||||
import _ReplyIcon from './icons/reply.svg?component'
|
||||
import _ReportIcon from './icons/report.svg?component'
|
||||
import _RightArrowIcon from './icons/right-arrow.svg?component'
|
||||
@@ -115,6 +118,7 @@ import _ShieldIcon from './icons/shield.svg?component'
|
||||
import _SlashIcon from './icons/slash.svg?component'
|
||||
import _SortAscendingIcon from './icons/sort-asc.svg?component'
|
||||
import _SortDescendingIcon from './icons/sort-desc.svg?component'
|
||||
import _SparklesIcon from './icons/sparkles.svg?component'
|
||||
import _StarIcon from './icons/star.svg?component'
|
||||
import _StopCircleIcon from './icons/stop-circle.svg?component'
|
||||
import _SunIcon from './icons/sun.svg?component'
|
||||
@@ -157,6 +161,7 @@ import './omorphia.scss'
|
||||
|
||||
export const ModrinthIcon = _ModrinthIcon
|
||||
export const FourOhFourNotFound = _FourOhFourNotFound
|
||||
export const ModrinthPlusIcon = _ModrinthPlusIcon
|
||||
export const SSODiscordIcon = _SSODiscordIcon
|
||||
export const SSOGitHubIcon = _SSOGitHubIcon
|
||||
export const SSOGitLabIcon = _SSOGitLabIcon
|
||||
@@ -251,6 +256,7 @@ export const PlayIcon = _PlayIcon
|
||||
export const PlusIcon = _PlusIcon
|
||||
export const RadioButtonIcon = _RadioButtonIcon
|
||||
export const RadioButtonChecked = _RadioButtonChecked
|
||||
export const ReceiptTextIcon = _ReceiptTextIcon
|
||||
export const ReplyIcon = _ReplyIcon
|
||||
export const ReportIcon = _ReportIcon
|
||||
export const RightArrowIcon = _RightArrowIcon
|
||||
@@ -301,3 +307,5 @@ export const TextQuoteIcon = _TextQuoteIcon
|
||||
export const Heading1Icon = _Heading1Icon
|
||||
export const Heading2Icon = _Heading2Icon
|
||||
export const Heading3Icon = _Heading3Icon
|
||||
export const CardIcon = _CardIcon
|
||||
export const SparklesIcon = _SparklesIcon
|
||||
|
||||
@@ -426,11 +426,6 @@ a,
|
||||
--_accent-color: var(--color-gray);
|
||||
}
|
||||
|
||||
&.btn-large {
|
||||
font-weight: 700;
|
||||
min-height: 2.5rem;
|
||||
}
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
color: var(--_text-color);
|
||||
@@ -470,6 +465,17 @@ a,
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.btn-large {
|
||||
font-weight: 700;
|
||||
padding: 12px 16px;
|
||||
font-size: 16px;
|
||||
|
||||
svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-dropdown-animation {
|
||||
svg:last-child {
|
||||
transition: transform 0.125s ease-in-out;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
const { resolve } = require("node:path");
|
||||
const { resolve } = require('node:path')
|
||||
|
||||
const project = resolve(process.cwd(), "tsconfig.json");
|
||||
const project = resolve(process.cwd(), 'tsconfig.json')
|
||||
|
||||
module.exports = {
|
||||
extends: [
|
||||
@@ -15,20 +15,21 @@ module.exports = {
|
||||
'turbo',
|
||||
],
|
||||
parserOptions: {
|
||||
sourceType: "module",
|
||||
sourceType: 'module',
|
||||
},
|
||||
settings: {
|
||||
"import/resolver": {
|
||||
'import/resolver': {
|
||||
typescript: {
|
||||
project,
|
||||
},
|
||||
},
|
||||
},
|
||||
"ignorePatterns": [".nuxt/**", ".output/**", "node_modules", "dist/**"],
|
||||
ignorePatterns: ['.nuxt/**', '.output/**', 'node_modules', 'dist/**'],
|
||||
rules: {
|
||||
'no-console': 'off',
|
||||
'vue/no-v-html': 'off',
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'vue/no-multiple-template-root': 'off',
|
||||
'import/extensions': ['error', 'always', { ignorePackages: true }],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -28,6 +28,7 @@ module.exports = {
|
||||
rules: {
|
||||
'import/no-default-export': 'off',
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'vue/no-multiple-template-root': 'off',
|
||||
camelcase: 'off',
|
||||
'no-console': 'off',
|
||||
'no-bitwise': 'off',
|
||||
|
||||
@@ -6,24 +6,26 @@
|
||||
"types": "./index.ts",
|
||||
"scripts": {
|
||||
"lint": "eslint . && prettier --check .",
|
||||
"fix": "eslint . --fix && prettier --write ."
|
||||
"fix": "eslint . --fix && prettier --write .",
|
||||
"intl:extract": "formatjs extract \"src/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"src/**/*.d.ts\" --out-file src/locales/en-US/index.json --preserve-whitespace"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.57.0",
|
||||
"@formatjs/cli": "^6.2.12",
|
||||
"@vintl/unplugin": "^1.5.1",
|
||||
"@vintl/vintl": "^4.4.1",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"tsconfig": "workspace:*",
|
||||
"vue": "^3.4.31"
|
||||
},
|
||||
"dependencies": {
|
||||
"@modrinth/assets": "workspace:*",
|
||||
"@modrinth/utils": "workspace:*",
|
||||
"@codemirror/commands": "^6.3.2",
|
||||
"@codemirror/lang-markdown": "^6.2.3",
|
||||
"@codemirror/language": "^6.9.3",
|
||||
"@codemirror/state": "^6.3.2",
|
||||
"@codemirror/view": "^6.22.1",
|
||||
"@modrinth/assets": "workspace:*",
|
||||
"@modrinth/utils": "workspace:*",
|
||||
"@types/markdown-it": "^14.1.1",
|
||||
"apexcharts": "^3.44.0",
|
||||
"dayjs": "^1.11.10",
|
||||
@@ -31,6 +33,7 @@
|
||||
"highlight.js": "^11.9.0",
|
||||
"markdown-it": "^13.0.2",
|
||||
"qrcode.vue": "^3.4.1",
|
||||
"vue-multiselect": "3.0.0",
|
||||
"vue-select": "4.0.0-beta.6",
|
||||
"vue3-apexcharts": "^1.4.4",
|
||||
"xss": "^1.0.14"
|
||||
|
||||
197
packages/ui/src/components/base/ButtonStyled.vue
Normal file
197
packages/ui/src/components/base/ButtonStyled.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
|
||||
size?: 'standard' | 'large'
|
||||
circular?: boolean
|
||||
type?: 'standard' | 'outlined' | 'transparent'
|
||||
colorFill?: 'auto' | 'background' | 'text' | 'none'
|
||||
hoverColorFill?: 'auto' | 'background' | 'text' | 'none'
|
||||
}>(),
|
||||
{
|
||||
color: 'standard',
|
||||
size: 'standard',
|
||||
circular: false,
|
||||
type: 'standard',
|
||||
colorFill: 'auto',
|
||||
hoverColorFill: 'auto',
|
||||
},
|
||||
)
|
||||
|
||||
const colorVar = computed(() => {
|
||||
switch (props.color) {
|
||||
case 'brand':
|
||||
return 'var(--color-brand)'
|
||||
case 'red':
|
||||
return 'var(--color-red)'
|
||||
case 'orange':
|
||||
return 'var(--color-orange)'
|
||||
case 'green':
|
||||
return 'var(--color-green)'
|
||||
case 'blue':
|
||||
return 'var(--color-blue)'
|
||||
case 'purple':
|
||||
return 'var(--color-purple)'
|
||||
case 'standard':
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
const height = computed(() => {
|
||||
if (props.size === 'large') {
|
||||
return '3rem'
|
||||
}
|
||||
return '2.25rem'
|
||||
})
|
||||
|
||||
const width = computed(() => {
|
||||
if (props.size === 'large') {
|
||||
return props.circular ? '3rem' : 'auto'
|
||||
}
|
||||
return props.circular ? '2.25rem' : 'auto'
|
||||
})
|
||||
|
||||
const paddingX = computed(() => {
|
||||
let padding = props.circular ? '0.5rem' : '0.75rem'
|
||||
if (props.size === 'large') {
|
||||
padding = props.circular ? '0.75rem' : '1rem'
|
||||
}
|
||||
return `calc(${padding} - 0.125rem)`
|
||||
})
|
||||
|
||||
const paddingY = computed(() => {
|
||||
if (props.size === 'large') {
|
||||
return '0.75rem'
|
||||
}
|
||||
return '0.5rem'
|
||||
})
|
||||
|
||||
const gap = computed(() => {
|
||||
if (props.size === 'large') {
|
||||
return '0.5rem'
|
||||
}
|
||||
return '0.375rem'
|
||||
})
|
||||
|
||||
const fontWeight = computed(() => {
|
||||
if (props.size === 'large') {
|
||||
return '800'
|
||||
}
|
||||
return '600'
|
||||
})
|
||||
|
||||
const radius = computed(() => {
|
||||
if (props.circular) {
|
||||
return '99999px'
|
||||
}
|
||||
|
||||
if (props.size === 'large') {
|
||||
return '1rem'
|
||||
}
|
||||
return '0.75rem'
|
||||
})
|
||||
|
||||
const iconSize = computed(() => {
|
||||
if (props.size === 'large') {
|
||||
return '1.5rem'
|
||||
}
|
||||
return '1.25rem'
|
||||
})
|
||||
|
||||
function setColorFill(
|
||||
colors: { bg: string; text: string },
|
||||
fill: 'background' | 'text' | 'none',
|
||||
): { bg: string; text: string } {
|
||||
if (colorVar.value) {
|
||||
if (fill === 'background') {
|
||||
colors.bg = colorVar.value
|
||||
colors.text = 'var(--color-accent-contrast)'
|
||||
} else if (fill === 'text') {
|
||||
colors.text = colorVar.value
|
||||
}
|
||||
}
|
||||
return colors
|
||||
}
|
||||
|
||||
const colorVariables = computed(() => {
|
||||
let colors = {
|
||||
bg: 'var(--color-button-bg)',
|
||||
text: 'var(--color-base)',
|
||||
}
|
||||
let hoverColors = JSON.parse(JSON.stringify(colors))
|
||||
|
||||
if (props.type === 'outlined') {
|
||||
hoverColors.bg = 'transparent'
|
||||
}
|
||||
|
||||
if (props.type === 'outlined' || props.type === 'transparent') {
|
||||
colors.bg = 'transparent'
|
||||
colors = setColorFill(colors, props.colorFill === 'auto' ? 'text' : props.colorFill)
|
||||
hoverColors = setColorFill(
|
||||
hoverColors,
|
||||
props.hoverColorFill === 'auto' ? 'text' : props.hoverColorFill,
|
||||
)
|
||||
} else {
|
||||
colors = setColorFill(colors, props.colorFill === 'auto' ? 'background' : props.colorFill)
|
||||
hoverColors = setColorFill(
|
||||
hoverColors,
|
||||
props.hoverColorFill === 'auto' ? 'background' : props.hoverColorFill,
|
||||
)
|
||||
}
|
||||
|
||||
return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text};`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="btn-wrapper"
|
||||
:class="{ outline: type === 'outlined' }"
|
||||
:style="`${colorVariables}--_height:${height};--_width:${width};--_radius: ${radius};--_padding-x:${paddingX};--_padding-y:${paddingY};--_gap:${gap};--_font-weight:${fontWeight};--_icon-size:${iconSize};`"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.btn-wrapper {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
/* Searches up to 4 children deep for valid button */
|
||||
.btn-wrapper :slotted(:is(button, a):first-child),
|
||||
.btn-wrapper :slotted(*) > :is(button, a):first-child,
|
||||
.btn-wrapper :slotted(*) > *:first-child > :is(button, a):first-child,
|
||||
.btn-wrapper :slotted(*) > *:first-child > *:first-child > :is(button, a):first-child {
|
||||
@apply flex flex-row items-center justify-center border-solid border-2 border-transparent active:scale-95 hover:brightness-125 focus-visible:brightness-125 bg-[--_bg] text-[--_text] hover:bg-[--_hover-bg] hover:text-[--_hover-text] focus-visible:bg-[--_hover-bg] focus-visible:text-[--_hover-text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight];
|
||||
transition:
|
||||
scale 0.125s ease-in-out,
|
||||
background-color 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-wrapper.outline :slotted(:is(button, a):first-child),
|
||||
.btn-wrapper.outline :slotted(*) > :is(button, a):first-child,
|
||||
.btn-wrapper.outline :slotted(*) > *:first-child > :is(button, a):first-child,
|
||||
.btn-wrapper.outline :slotted(*) > *:first-child > *:first-child > :is(button, a):first-child {
|
||||
@apply border-current;
|
||||
}
|
||||
|
||||
/*noinspection CssUnresolvedCustomProperty*/
|
||||
.btn-wrapper :slotted(:is(button, a):first-child) > svg:first-child,
|
||||
.btn-wrapper :slotted(*) > :is(button, a):first-child > svg:first-child,
|
||||
.btn-wrapper :slotted(*) > *:first-child > :is(button, a):first-child > svg:first-child,
|
||||
.btn-wrapper
|
||||
:slotted(*)
|
||||
> *:first-child
|
||||
> *:first-child
|
||||
> :is(button, a):first-child
|
||||
> svg:first-child {
|
||||
min-width: var(--_icon-size, 1rem);
|
||||
min-height: var(--_icon-size, 1rem);
|
||||
}
|
||||
|
||||
/* guys, I know this is nuts, I know */
|
||||
</style>
|
||||
586
packages/ui/src/components/billing/PurchaseModal.vue
Normal file
586
packages/ui/src/components/billing/PurchaseModal.vue
Normal file
@@ -0,0 +1,586 @@
|
||||
<template>
|
||||
<NewModal ref="purchaseModal">
|
||||
<template #title>
|
||||
<span class="text-contrast text-xl font-extrabold">
|
||||
<template v-if="product.metadata.type === 'midas'">Subscribe to Modrinth Plus!</template>
|
||||
<template v-else>Purchase product</template>
|
||||
</span>
|
||||
</template>
|
||||
<div class="flex items-center gap-1 pb-4">
|
||||
<span
|
||||
:class="{
|
||||
'text-secondary': purchaseModalStep !== 0,
|
||||
'font-bold': purchaseModalStep === 0,
|
||||
}"
|
||||
>
|
||||
Select plan
|
||||
</span>
|
||||
<ChevronRightIcon class="h-5 w-5 text-secondary" />
|
||||
<span
|
||||
:class="{
|
||||
'text-secondary': purchaseModalStep !== 1,
|
||||
'font-bold': purchaseModalStep === 1,
|
||||
}"
|
||||
>
|
||||
Payment
|
||||
</span>
|
||||
<ChevronRightIcon class="h-5 w-5 text-secondary" />
|
||||
<span
|
||||
:class="{
|
||||
'text-secondary': purchaseModalStep !== 2,
|
||||
'font-bold': purchaseModalStep === 2,
|
||||
}"
|
||||
>
|
||||
Review
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="purchaseModalStep === 0" class="md:w-[600px]">
|
||||
<div>
|
||||
<p class="my-2 text-lg font-bold">Choose billing interval</p>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div
|
||||
v-for="([interval, rawPrice], index) in Object.entries(price.prices.intervals)"
|
||||
:key="index"
|
||||
class="flex cursor-pointer items-center gap-2"
|
||||
@click="selectedPlan = interval"
|
||||
>
|
||||
<RadioButtonChecked v-if="selectedPlan === interval" class="h-8 w-8 text-brand" />
|
||||
<RadioButtonIcon v-else class="h-8 w-8 text-secondary" />
|
||||
<span
|
||||
class="text-lg capitalize"
|
||||
:class="{ 'text-secondary': selectedPlan !== interval }"
|
||||
>
|
||||
{{ interval }}
|
||||
</span>
|
||||
<span
|
||||
v-if="interval === 'yearly'"
|
||||
class="rounded-full bg-brand px-2 py-1 font-bold text-brand-inverted"
|
||||
>
|
||||
SAVE {{ calculateSavings(price.prices.intervals.monthly, rawPrice) }}%
|
||||
</span>
|
||||
<span class="ml-auto text-lg" :class="{ 'text-secondary': selectedPlan !== interval }">
|
||||
{{ formatPrice(locale, rawPrice, price.currency_code) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-between border-0 border-t border-solid border-code-bg pt-4">
|
||||
<span class="text-xl text-secondary">Total</span>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="text-2xl font-extrabold text-primary">
|
||||
{{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }}
|
||||
</span>
|
||||
<span class="text-lg text-secondary">/ {{ selectedPlan }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 pt-4">
|
||||
<InfoIcon />
|
||||
<span class="text-sm text-secondary">
|
||||
Final price and currency will be based on your selected payment method.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="purchaseModalStep === 1">
|
||||
<div
|
||||
v-show="loadingPaymentMethodModal !== 2"
|
||||
class="flex min-h-[16rem] items-center justify-center md:w-[600px]"
|
||||
>
|
||||
<AnimatedLogo class="w-[80px]" />
|
||||
</div>
|
||||
<div v-show="loadingPaymentMethodModal === 2" class="min-h-[16rem] p-1 md:w-[600px]">
|
||||
<div id="address-element"></div>
|
||||
<div id="payment-element" class="mt-4"></div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="purchaseModalStep === 2" class="md:w-[650px]">
|
||||
<div>
|
||||
<div class="r-4 rounded-xl bg-bg p-4">
|
||||
<p class="my-2 text-lg font-bold text-primary">Purchase details</p>
|
||||
<div class="mb-2 flex justify-between">
|
||||
<span class="text-secondary">Modrinth+ {{ selectedPlan }}</span>
|
||||
<span class="text-secondary">
|
||||
{{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }} /
|
||||
{{ selectedPlan }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-secondary">Tax</span>
|
||||
<span class="text-secondary">{{ formatPrice(locale, tax, price.currency_code) }}</span>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-between border-0 border-t border-solid border-code-bg pt-4">
|
||||
<span class="text-lg font-bold">Today's total</span>
|
||||
<span class="text-lg font-extrabold text-primary">
|
||||
{{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="my-2 text-lg font-bold">Pay for it with</p>
|
||||
<multiselect
|
||||
v-model="selectedPaymentMethod"
|
||||
placeholder="Payment method"
|
||||
label="id"
|
||||
track-by="id"
|
||||
:options="selectablePaymentMethods"
|
||||
:option-height="104"
|
||||
:show-labels="false"
|
||||
:searchable="false"
|
||||
:close-on-select="true"
|
||||
:allow-empty="false"
|
||||
open-direction="top"
|
||||
class="max-w-[20rem]"
|
||||
@select="selectPaymentMethod"
|
||||
>
|
||||
<!-- TODO: Move this to component to remove duplicated code -->
|
||||
<template #singleLabel="props">
|
||||
<div class="flex items-center gap-2">
|
||||
<CardIcon v-if="props.option.type === 'card'" class="h-8 w-8" />
|
||||
<CurrencyIcon v-else-if="props.option.type === 'cashapp'" class="h-8 w-8" />
|
||||
<PayPalIcon v-else-if="props.option.type === 'paypal'" class="h-8 w-8" />
|
||||
|
||||
<span v-if="props.option.type === 'card'">
|
||||
{{
|
||||
formatMessage(messages.paymentMethodCardDisplay, {
|
||||
card_brand:
|
||||
formatMessage(paymentMethodTypes[props.option.card.brand]) ??
|
||||
formatMessage(paymentMethodTypes.unknown),
|
||||
last_four: props.option.card.last4,
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<template v-else>
|
||||
{{
|
||||
formatMessage(paymentMethodTypes[props.option.type]) ??
|
||||
formatMessage(paymentMethodTypes.unknown)
|
||||
}}
|
||||
</template>
|
||||
|
||||
<span v-if="props.option.type === 'cashapp' && props.option.cashapp.cashtag">
|
||||
({{ props.option.cashapp.cashtag }})
|
||||
</span>
|
||||
<span v-else-if="props.option.type === 'paypal' && props.option.paypal.payer_email">
|
||||
({{ props.option.paypal.payer_email }})
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #option="props">
|
||||
<div class="flex items-center gap-2">
|
||||
<template v-if="props.option.id === 'new'">
|
||||
<PlusIcon class="h-8 w-8" />
|
||||
<span class="text-secondary">Add payment method</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<CardIcon v-if="props.option.type === 'card'" class="h-8 w-8" />
|
||||
<CurrencyIcon v-else-if="props.option.type === 'cashapp'" class="h-8 w-8" />
|
||||
<PayPalIcon v-else-if="props.option.type === 'paypal'" class="h-8 w-8" />
|
||||
|
||||
<span v-if="props.option.type === 'card'">
|
||||
{{
|
||||
formatMessage(messages.paymentMethodCardDisplay, {
|
||||
card_brand:
|
||||
formatMessage(paymentMethodTypes[props.option.card.brand]) ??
|
||||
formatMessage(paymentMethodTypes.unknown),
|
||||
last_four: props.option.card.last4,
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<template v-else>
|
||||
{{
|
||||
formatMessage(paymentMethodTypes[props.option.type]) ??
|
||||
formatMessage(paymentMethodTypes.unknown)
|
||||
}}
|
||||
</template>
|
||||
|
||||
<span v-if="props.option.type === 'cashapp'">
|
||||
({{ props.option.cashapp.cashtag }})
|
||||
</span>
|
||||
<span v-else-if="props.option.type === 'paypal'">
|
||||
({{ props.option.paypal.payer_email }})
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</multiselect>
|
||||
</div>
|
||||
<p class="m-0 mt-9 text-sm text-secondary">
|
||||
<strong>By clicking "Subscribe", you are purchasing a recurring subscription.</strong>
|
||||
You'll be charged
|
||||
{{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }} /
|
||||
{{ selectedPlan }} plus applicable taxes starting today, until you cancel. Cancel anytime
|
||||
from your settings page.
|
||||
</p>
|
||||
</div>
|
||||
<div class="input-group push-right pt-4">
|
||||
<template v-if="purchaseModalStep === 0">
|
||||
<button class="btn" @click="$refs.purchaseModal.hide()">
|
||||
<XIcon />
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn btn-primary" :disabled="paymentLoading" @click="beginPurchaseFlow(true)">
|
||||
<RightArrowIcon />
|
||||
Select
|
||||
</button>
|
||||
</template>
|
||||
<template v-else-if="purchaseModalStep === 1">
|
||||
<button
|
||||
class="btn"
|
||||
@click="
|
||||
() => {
|
||||
purchaseModalStep = 0
|
||||
loadingPaymentMethodModal = 0
|
||||
paymentLoading = false
|
||||
}
|
||||
"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button class="btn btn-primary" :disabled="paymentLoading" @click="validatePayment">
|
||||
<RightArrowIcon />
|
||||
Continue
|
||||
</button>
|
||||
</template>
|
||||
<template v-else-if="purchaseModalStep === 2">
|
||||
<button class="btn" @click="$refs.purchaseModal.hide()">
|
||||
<XIcon />
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn btn-primary" :disabled="paymentLoading" @click="submitPayment">
|
||||
<CheckCircleIcon /> Subscribe
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</NewModal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, computed, nextTick } from 'vue'
|
||||
import NewModal from '../modal/NewModal.vue'
|
||||
import {
|
||||
CardIcon,
|
||||
CheckCircleIcon,
|
||||
ChevronRightIcon,
|
||||
CurrencyIcon,
|
||||
InfoIcon,
|
||||
PayPalIcon,
|
||||
PlusIcon,
|
||||
RadioButtonChecked,
|
||||
RadioButtonIcon,
|
||||
RightArrowIcon,
|
||||
XIcon,
|
||||
} from '@modrinth/assets'
|
||||
import AnimatedLogo from '../brand/AnimatedLogo.vue'
|
||||
import { getCurrency, calculateSavings, formatPrice, createStripeElements } from '@modrinth/utils'
|
||||
import { useVIntl, defineMessages } from '@vintl/vintl'
|
||||
import { Multiselect } from 'vue-multiselect'
|
||||
|
||||
const { locale, formatMessage } = useVIntl()
|
||||
|
||||
const props = defineProps({
|
||||
product: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
customer: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
paymentMethods: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
country: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
returnUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
publishableKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
fetchPaymentData: {
|
||||
type: Function,
|
||||
default: async () => {},
|
||||
},
|
||||
sendBillingRequest: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
onError: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const messages = defineMessages({
|
||||
paymentMethodCardDisplay: {
|
||||
id: 'omorphia.component.purchase_modal.payment_method_card_display',
|
||||
defaultMessage: '{card_brand} ending in {last_four}',
|
||||
},
|
||||
})
|
||||
|
||||
const paymentMethodTypes = defineMessages({
|
||||
visa: {
|
||||
id: 'omorphia.component.purchase_modal.payment_method_type.visa',
|
||||
defaultMessage: 'Visa',
|
||||
},
|
||||
amex: {
|
||||
id: 'omorphia.component.purchase_modal.payment_method_type.amex',
|
||||
defaultMessage: 'American Express',
|
||||
},
|
||||
diners: {
|
||||
id: 'omorphia.component.purchase_modal.payment_method_type.diners',
|
||||
defaultMessage: 'Diners Club',
|
||||
},
|
||||
discover: {
|
||||
id: 'omorphia.component.purchase_modal.payment_method_type.discover',
|
||||
defaultMessage: 'Discover',
|
||||
},
|
||||
eftpos: {
|
||||
id: 'omorphia.component.purchase_modal.payment_method_type.eftpos',
|
||||
defaultMessage: 'EFTPOS',
|
||||
},
|
||||
jcb: { id: 'omorphia.component.purchase_modal.payment_method_type.jcb', defaultMessage: 'JCB' },
|
||||
mastercard: {
|
||||
id: 'omorphia.component.purchase_modal.payment_method_type.mastercard',
|
||||
defaultMessage: 'MasterCard',
|
||||
},
|
||||
unionpay: {
|
||||
id: 'omorphia.component.purchase_modal.payment_method_type.unionpay',
|
||||
defaultMessage: 'UnionPay',
|
||||
},
|
||||
paypal: {
|
||||
id: 'omorphia.component.purchase_modal.payment_method_type.paypal',
|
||||
defaultMessage: 'PayPal',
|
||||
},
|
||||
cashapp: {
|
||||
id: 'omorphia.component.purchase_modal.payment_method_type.cashapp',
|
||||
defaultMessage: 'Cash App',
|
||||
},
|
||||
amazon_pay: {
|
||||
id: 'omorphia.component.purchase_modal.payment_method_type.amazon_pay',
|
||||
defaultMessage: 'Amazon Pay',
|
||||
},
|
||||
unknown: {
|
||||
id: 'omorphia.component.purchase_modal.payment_method_type.unknown',
|
||||
defaultMessage: 'Unknown payment method',
|
||||
},
|
||||
})
|
||||
|
||||
let stripe = null
|
||||
let elements = null
|
||||
|
||||
const purchaseModal = ref()
|
||||
|
||||
const primaryPaymentMethodId = computed(() => {
|
||||
if (
|
||||
props.customer &&
|
||||
props.customer.invoice_settings &&
|
||||
props.customer.invoice_settings.default_payment_method
|
||||
) {
|
||||
return props.customer.invoice_settings.default_payment_method
|
||||
} else if (props.paymentMethods && props.paymentMethods[0] && props.paymentMethods[0].id) {
|
||||
return props.paymentMethods[0].id
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
show: () => {
|
||||
// eslint-disable-next-line no-undef
|
||||
stripe = Stripe(props.publishableKey)
|
||||
|
||||
selectedPlan.value = 'yearly'
|
||||
|
||||
purchaseModalStep.value = 0
|
||||
loadingPaymentMethodModal.value = 0
|
||||
paymentLoading.value = false
|
||||
|
||||
purchaseModal.value.show()
|
||||
},
|
||||
})
|
||||
|
||||
const purchaseModalStep = ref(0)
|
||||
const loadingPaymentMethodModal = ref(0)
|
||||
|
||||
const selectedPlan = ref('yearly')
|
||||
const currency = computed(() => getCurrency(props.country))
|
||||
|
||||
const price = ref(props.product.prices.find((x) => x.currency_code === currency.value))
|
||||
|
||||
const clientSecret = ref()
|
||||
const paymentIntentId = ref()
|
||||
const confirmationToken = ref()
|
||||
const tax = ref()
|
||||
const total = ref()
|
||||
|
||||
const selectedPaymentMethod = ref()
|
||||
const inputtedPaymentMethod = ref()
|
||||
const selectablePaymentMethods = computed(() => {
|
||||
const values = [
|
||||
...(props.paymentMethods ?? []),
|
||||
{
|
||||
id: 'new',
|
||||
},
|
||||
]
|
||||
|
||||
if (inputtedPaymentMethod.value) {
|
||||
values.unshift(inputtedPaymentMethod.value)
|
||||
}
|
||||
|
||||
return values
|
||||
})
|
||||
|
||||
const paymentLoading = ref(false)
|
||||
|
||||
async function beginPurchaseFlow(skip = false) {
|
||||
if (!props.customer) {
|
||||
paymentLoading.value = true
|
||||
await props.fetchPaymentData()
|
||||
paymentLoading.value = false
|
||||
}
|
||||
|
||||
if (primaryPaymentMethodId.value && skip) {
|
||||
paymentLoading.value = true
|
||||
await refreshPayment(null, primaryPaymentMethodId.value)
|
||||
paymentLoading.value = false
|
||||
purchaseModalStep.value = 2
|
||||
} else {
|
||||
try {
|
||||
loadingPaymentMethodModal.value = 0
|
||||
purchaseModalStep.value = 1
|
||||
|
||||
await nextTick()
|
||||
|
||||
const {
|
||||
elements: elementsVal,
|
||||
addressElement,
|
||||
paymentElement,
|
||||
} = createStripeElements(stripe, props.paymentMethods, {
|
||||
mode: 'payment',
|
||||
amount: price.value.prices.intervals[selectedPlan.value],
|
||||
currency: price.value.currency_code.toLowerCase(),
|
||||
paymentMethodCreation: 'manual',
|
||||
setupFutureUsage: 'off_session',
|
||||
})
|
||||
|
||||
elements = elementsVal
|
||||
paymentElement.on('ready', () => {
|
||||
loadingPaymentMethodModal.value += 1
|
||||
})
|
||||
addressElement.on('ready', () => {
|
||||
loadingPaymentMethodModal.value += 1
|
||||
})
|
||||
} catch (err) {
|
||||
props.onError(err)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function createConfirmationToken() {
|
||||
const { error, confirmationToken: confirmation } = await stripe.createConfirmationToken({
|
||||
elements,
|
||||
})
|
||||
|
||||
if (error) {
|
||||
props.onError(error)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
return confirmation.id
|
||||
}
|
||||
|
||||
async function validatePayment() {
|
||||
paymentLoading.value = true
|
||||
const { error: submitError } = await elements.submit()
|
||||
|
||||
if (submitError) {
|
||||
paymentLoading.value = false
|
||||
props.onError(submitError)
|
||||
return
|
||||
}
|
||||
|
||||
await refreshPayment(await createConfirmationToken())
|
||||
|
||||
elements.update({ currency: price.value.currency_code.toLowerCase(), amount: total.value })
|
||||
|
||||
loadingPaymentMethodModal.value = 0
|
||||
confirmationToken.value = await createConfirmationToken()
|
||||
purchaseModalStep.value = 2
|
||||
paymentLoading.value = false
|
||||
}
|
||||
|
||||
async function selectPaymentMethod(paymentMethod) {
|
||||
if (paymentMethod.id === 'new') {
|
||||
await beginPurchaseFlow(false)
|
||||
} else if (inputtedPaymentMethod.value && inputtedPaymentMethod.value.id === paymentMethod.id) {
|
||||
paymentLoading.value = true
|
||||
await refreshPayment(confirmationToken.value)
|
||||
paymentLoading.value = false
|
||||
} else {
|
||||
paymentLoading.value = true
|
||||
await refreshPayment(null, paymentMethod.id)
|
||||
paymentLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshPayment(confirmationId, paymentMethodId) {
|
||||
try {
|
||||
const base = confirmationId
|
||||
? {
|
||||
type: 'confirmation_token',
|
||||
token: confirmationId,
|
||||
}
|
||||
: {
|
||||
type: 'payment_method',
|
||||
id: paymentMethodId,
|
||||
}
|
||||
|
||||
const result = await props.sendBillingRequest({
|
||||
product_id: props.product.id,
|
||||
interval: selectedPlan.value,
|
||||
existing_payment_intent: paymentIntentId.value,
|
||||
...base,
|
||||
})
|
||||
|
||||
if (!paymentIntentId.value) {
|
||||
paymentIntentId.value = result.payment_intent_id
|
||||
clientSecret.value = result.client_secret
|
||||
}
|
||||
|
||||
price.value = props.product.prices.find((x) => x.id === result.price_id)
|
||||
currency.value = price.value.currency_code
|
||||
tax.value = result.tax
|
||||
total.value = result.total
|
||||
|
||||
if (confirmationId) {
|
||||
confirmationToken.value = confirmationId
|
||||
inputtedPaymentMethod.value = result.payment_method
|
||||
}
|
||||
|
||||
selectedPaymentMethod.value = result.payment_method
|
||||
} catch (err) {
|
||||
props.onError(err)
|
||||
}
|
||||
}
|
||||
|
||||
async function submitPayment() {
|
||||
paymentLoading.value = true
|
||||
const { error } = await stripe.confirmPayment({
|
||||
clientSecret: clientSecret.value,
|
||||
confirmParams: {
|
||||
confirmation_token: confirmationToken.value,
|
||||
return_url: `${props.returnUrl}?priceId=${price.value.id}&plan=${selectedPlan.value}`,
|
||||
},
|
||||
})
|
||||
|
||||
if (error) {
|
||||
props.onError(error)
|
||||
}
|
||||
paymentLoading.value = false
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -2,6 +2,7 @@
|
||||
export { default as Avatar } from './base/Avatar.vue'
|
||||
export { default as Badge } from './base/Badge.vue'
|
||||
export { default as Button } from './base/Button.vue'
|
||||
export { default as ButtonStyled } from './base/ButtonStyled.vue'
|
||||
export { default as Card } from './base/Card.vue'
|
||||
export { default as Checkbox } from './base/Checkbox.vue'
|
||||
export { default as Chips } from './base/Chips.vue'
|
||||
@@ -32,9 +33,9 @@ export { default as Chart } from './chart/Chart.vue'
|
||||
export { default as CompactChart } from './chart/CompactChart.vue'
|
||||
|
||||
// Modals
|
||||
export { default as NewModal } from './modal/NewModal.vue'
|
||||
export { default as Modal } from './modal/Modal.vue'
|
||||
export { default as ConfirmModal } from './modal/ConfirmModal.vue'
|
||||
export { default as ReportModal } from './modal/ReportModal.vue'
|
||||
export { default as ShareModal } from './modal/ShareModal.vue'
|
||||
|
||||
// Navigation
|
||||
@@ -47,3 +48,6 @@ export { default as NavStack } from './nav/NavStack.vue'
|
||||
export { default as Categories } from './search/Categories.vue'
|
||||
export { default as SearchDropdown } from './search/SearchDropdown.vue'
|
||||
export { default as SearchFilter } from './search/SearchFilter.vue'
|
||||
|
||||
// Billing
|
||||
export { default as PurchaseModal } from './billing/PurchaseModal.vue'
|
||||
|
||||
170
packages/ui/src/components/modal/NewModal.vue
Normal file
170
packages/ui/src/components/modal/NewModal.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div v-if="open">
|
||||
<div
|
||||
:class="{ shown: visible }"
|
||||
class="tauri-overlay"
|
||||
data-tauri-drag-region
|
||||
@click="() => (closable ? hide() : {})"
|
||||
/>
|
||||
<div
|
||||
:class="{
|
||||
shown: visible,
|
||||
noblur: props.noblur,
|
||||
}"
|
||||
class="modal-overlay"
|
||||
@click="() => (closable ? hide() : {})"
|
||||
/>
|
||||
<div class="modal-container" :class="{ shown: visible }">
|
||||
<div class="modal-body flex flex-col bg-bg-raised rounded-2xl p-6">
|
||||
<div class="flex items-center pb-6 border-b-[1px] border-button-bg">
|
||||
<div class="flex flex-grow items-center gap-3">
|
||||
<slot name="title" />
|
||||
</div>
|
||||
<ButtonStyled v-if="closable" circular>
|
||||
<button @click="hide">
|
||||
<XIcon />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
<div class="overflow-y-auto">
|
||||
<slot> You just lost the game. </slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { XIcon } from '@modrinth/assets'
|
||||
import { ref } from 'vue'
|
||||
import ButtonStyled from '../base/ButtonStyled.vue'
|
||||
|
||||
const props = defineProps({
|
||||
noblur: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
|
||||
const open = ref(false)
|
||||
const visible = ref(false)
|
||||
|
||||
function show() {
|
||||
open.value = true
|
||||
setTimeout(() => {
|
||||
visible.value = true
|
||||
}, 50)
|
||||
}
|
||||
|
||||
function hide() {
|
||||
visible.value = false
|
||||
setTimeout(() => {
|
||||
open.value = false
|
||||
}, 300)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
hide,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tauri-overlay {
|
||||
position: fixed;
|
||||
visibility: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
z-index: 20;
|
||||
|
||||
&.shown {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
inset: -5rem;
|
||||
z-index: 19;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease-out;
|
||||
background: linear-gradient(to bottom, rgba(27, 48, 42, 0.52) 0%, rgba(13, 21, 26, 0.95) 100%);
|
||||
transform: translateY(2rem) scale(0.8);
|
||||
border-radius: 120px;
|
||||
filter: blur(5px);
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
&.shown {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
backdrop-filter: blur(5px);
|
||||
transform: translateY(0) scale(1);
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
&.noblur {
|
||||
backdrop-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 21;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
&.shown {
|
||||
visibility: visible;
|
||||
.modal-body {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: fixed;
|
||||
box-shadow: 4px 4px 26px 10px rgba(0, 0, 0, 0.08);
|
||||
max-height: calc(100% - 2 * var(--gap-lg));
|
||||
max-width: min(var(--_max-width, 60rem), calc(100% - 2 * var(--gap-lg)));
|
||||
overflow-y: auto;
|
||||
width: fit-content;
|
||||
pointer-events: auto;
|
||||
scale: 0.97;
|
||||
|
||||
transform: translateY(1rem);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
width: calc(100% - 2 * var(--gap-lg));
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,127 +0,0 @@
|
||||
<template>
|
||||
<Modal ref="modal" :header="`Report ${itemType}`" :noblur="noblur">
|
||||
<div class="modal-report universal-labels">
|
||||
<div class="markdown-body">
|
||||
<p>
|
||||
Modding should be safe for everyone, so we take abuse and malicious intent seriously at
|
||||
Modrinth. We want to hear about harmful content on the site that violates our
|
||||
<router-link to="/legal/terms">ToS</router-link> and
|
||||
<router-link to="/legal/rules">Rules</router-link>. Rest assured, we'll keep your
|
||||
identifying information private.
|
||||
</p>
|
||||
<p v-if="itemType === 'project' || itemType === 'version'">
|
||||
Please <strong>do not</strong> use this to report bugs with the project itself. This form
|
||||
is only for submitting a report to Modrinth staff. If the project has an Issues link or a
|
||||
Discord invite, consider reporting it there.
|
||||
</p>
|
||||
</div>
|
||||
<label for="report-type">
|
||||
<span class="label__title">Reason</span>
|
||||
</label>
|
||||
<DropdownSelect
|
||||
id="report-type"
|
||||
v-model="reportType"
|
||||
name="report-type"
|
||||
:options="reportTypes"
|
||||
:display-name="capitalizeString"
|
||||
default-value="Choose report type"
|
||||
class="multiselect"
|
||||
/>
|
||||
<label for="report-body">
|
||||
<span class="label__title">Additional information</span>
|
||||
<span class="label__description markdown-body">
|
||||
Please provide additional context about your report. Include links and images if possible.
|
||||
<strong>Empty reports will be closed.</strong> This editor supports
|
||||
<a href="https://docs.modrinth.com/markdown" target="_blank">Markdown formatting</a>.
|
||||
</span>
|
||||
</label>
|
||||
<Chips v-model="bodyViewType" class="separator" :items="['source', 'preview']" />
|
||||
<div class="text-input textarea-wrapper">
|
||||
<textarea v-if="bodyViewType === 'source'" id="body" v-model="body" spellcheck="true" />
|
||||
<div v-else class="preview" v-html="renderString(body)" />
|
||||
</div>
|
||||
<div class="input-group push-right">
|
||||
<Button @click="cancel">
|
||||
<XIcon />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button color="primary" @click="submitReport">
|
||||
<CheckIcon />
|
||||
Report
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { capitalizeString, renderString } from '@modrinth/utils'
|
||||
import { ref } from 'vue'
|
||||
import { CheckIcon, XIcon } from '@modrinth/assets'
|
||||
import Chips from '../base/Chips.vue'
|
||||
import DropdownSelect from '../base/DropdownSelect.vue'
|
||||
import Modal from './Modal.vue'
|
||||
|
||||
defineProps({
|
||||
itemType: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
itemId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
reportTypes: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
submitReport: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
noblur: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const reportType = ref('')
|
||||
const body = ref('')
|
||||
const bodyViewType = ref('source')
|
||||
|
||||
const modal = ref(null)
|
||||
|
||||
function cancel() {
|
||||
reportType.value = ''
|
||||
body.value = ''
|
||||
bodyViewType.value = 'source'
|
||||
|
||||
modal.value.hide()
|
||||
}
|
||||
|
||||
function show() {
|
||||
modal.value.show()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.modal-report {
|
||||
padding: var(--gap-lg);
|
||||
|
||||
.textarea-wrapper {
|
||||
height: 10rem;
|
||||
|
||||
:first-child {
|
||||
max-height: 8rem;
|
||||
transform: translateY(1rem);
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -76,5 +76,44 @@
|
||||
},
|
||||
"omorphia.component.environment-indicator.label.unsupported": {
|
||||
"defaultMessage": "Unsupported"
|
||||
},
|
||||
"omorphia.component.purchase_modal.payment_method_card_display": {
|
||||
"defaultMessage": "{card_brand} ending in {last_four}"
|
||||
},
|
||||
"omorphia.component.purchase_modal.payment_method_type.amazon_pay": {
|
||||
"defaultMessage": "Amazon Pay"
|
||||
},
|
||||
"omorphia.component.purchase_modal.payment_method_type.amex": {
|
||||
"defaultMessage": "American Express"
|
||||
},
|
||||
"omorphia.component.purchase_modal.payment_method_type.cashapp": {
|
||||
"defaultMessage": "Cash App"
|
||||
},
|
||||
"omorphia.component.purchase_modal.payment_method_type.diners": {
|
||||
"defaultMessage": "Diners Club"
|
||||
},
|
||||
"omorphia.component.purchase_modal.payment_method_type.discover": {
|
||||
"defaultMessage": "Discover"
|
||||
},
|
||||
"omorphia.component.purchase_modal.payment_method_type.eftpos": {
|
||||
"defaultMessage": "EFTPOS"
|
||||
},
|
||||
"omorphia.component.purchase_modal.payment_method_type.jcb": {
|
||||
"defaultMessage": "JCB"
|
||||
},
|
||||
"omorphia.component.purchase_modal.payment_method_type.mastercard": {
|
||||
"defaultMessage": "MasterCard"
|
||||
},
|
||||
"omorphia.component.purchase_modal.payment_method_type.paypal": {
|
||||
"defaultMessage": "PayPal"
|
||||
},
|
||||
"omorphia.component.purchase_modal.payment_method_type.unionpay": {
|
||||
"defaultMessage": "UnionPay"
|
||||
},
|
||||
"omorphia.component.purchase_modal.payment_method_type.unknown": {
|
||||
"defaultMessage": "Unknown payment method"
|
||||
},
|
||||
"omorphia.component.purchase_modal.payment_method_type.visa": {
|
||||
"defaultMessage": "Visa"
|
||||
}
|
||||
}
|
||||
129
packages/utils/billing.ts
Normal file
129
packages/utils/billing.ts
Normal file
@@ -0,0 +1,129 @@
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-nocheck
|
||||
|
||||
export const getCurrency = (userCountry) => {
|
||||
const countryCurrency = {
|
||||
US: 'USD',
|
||||
GB: 'GBP',
|
||||
EU: 'EUR',
|
||||
AT: 'EUR',
|
||||
BE: 'EUR',
|
||||
CY: 'EUR',
|
||||
EE: 'EUR',
|
||||
FI: 'EUR',
|
||||
FR: 'EUR',
|
||||
DE: 'EUR',
|
||||
GR: 'EUR',
|
||||
IE: 'EUR',
|
||||
IT: 'EUR',
|
||||
LV: 'EUR',
|
||||
LT: 'EUR',
|
||||
LU: 'EUR',
|
||||
MT: 'EUR',
|
||||
NL: 'EUR',
|
||||
PT: 'EUR',
|
||||
SK: 'EUR',
|
||||
SI: 'EUR',
|
||||
RU: 'RUB',
|
||||
BR: 'BRL',
|
||||
JP: 'JPY',
|
||||
ID: 'IDR',
|
||||
MY: 'MYR',
|
||||
PH: 'PHP',
|
||||
TH: 'THB',
|
||||
VN: 'VND',
|
||||
KR: 'KRW',
|
||||
TR: 'TRY',
|
||||
UA: 'UAH',
|
||||
MX: 'MXN',
|
||||
CA: 'CAD',
|
||||
NZ: 'NZD',
|
||||
NO: 'NOK',
|
||||
PL: 'PLN',
|
||||
CH: 'CHF',
|
||||
LI: 'CHF',
|
||||
IN: 'INR',
|
||||
CL: 'CLP',
|
||||
PE: 'PEN',
|
||||
CO: 'COP',
|
||||
ZA: 'ZAR',
|
||||
HK: 'HKD',
|
||||
AR: 'ARS',
|
||||
KZ: 'KZT',
|
||||
UY: 'UYU',
|
||||
CN: 'CNY',
|
||||
AU: 'AUD',
|
||||
TW: 'TWD',
|
||||
SA: 'SAR',
|
||||
QA: 'QAR',
|
||||
}
|
||||
|
||||
return countryCurrency[userCountry] ?? 'USD'
|
||||
}
|
||||
|
||||
export const formatPrice = (locale, price, currency) => {
|
||||
const formatter = new Intl.NumberFormat(locale, {
|
||||
style: 'currency',
|
||||
currency,
|
||||
})
|
||||
|
||||
const maxDigits = formatter.resolvedOptions().maximumFractionDigits
|
||||
|
||||
const convertedPrice = price / Math.pow(10, maxDigits)
|
||||
|
||||
return formatter.format(convertedPrice)
|
||||
}
|
||||
|
||||
export const calculateSavings = (monthlyPlan, annualPlan) => {
|
||||
const monthlyAnnualized = monthlyPlan * 12
|
||||
|
||||
return Math.floor(((monthlyAnnualized - annualPlan) / monthlyAnnualized) * 100)
|
||||
}
|
||||
|
||||
export const createStripeElements = (stripe, paymentMethods, options) => {
|
||||
const styles = getComputedStyle(document.body)
|
||||
|
||||
const elements = stripe.elements({
|
||||
appearance: {
|
||||
variables: {
|
||||
colorPrimary: styles.getPropertyValue('--color-brand'),
|
||||
colorBackground: styles.getPropertyValue('--color-bg'),
|
||||
colorText: styles.getPropertyValue('--color-base'),
|
||||
colorTextPlaceholder: styles.getPropertyValue('--color-secondary'),
|
||||
colorDanger: styles.getPropertyValue('--color-red'),
|
||||
fontFamily: styles.getPropertyValue('--font-standard'),
|
||||
spacingUnit: '0.25rem',
|
||||
borderRadius: '1rem',
|
||||
},
|
||||
},
|
||||
loader: 'never',
|
||||
...options,
|
||||
})
|
||||
|
||||
const paymentElement = elements.create('payment')
|
||||
paymentElement.mount('#payment-element')
|
||||
|
||||
const addressElement = elements.create('address', {
|
||||
mode: 'billing',
|
||||
contacts: paymentMethods
|
||||
? [
|
||||
...new Set(
|
||||
paymentMethods.map((x) => ({
|
||||
address: x.billing_details.address,
|
||||
email: x.billing_details.email,
|
||||
name: x.billing_details.name,
|
||||
})),
|
||||
),
|
||||
]
|
||||
: undefined,
|
||||
})
|
||||
addressElement.mount('#address-element')
|
||||
|
||||
addressElement.on('change', (e) => {
|
||||
if (e.value && e.value.address && e.value.address.country) {
|
||||
elements.update({ currency: getCurrency(e.value.address.country).toLowerCase() })
|
||||
}
|
||||
})
|
||||
|
||||
return { elements, paymentElement, addressElement }
|
||||
}
|
||||
@@ -3,3 +3,4 @@ export * from './parse'
|
||||
export * from './projects'
|
||||
export * from './users'
|
||||
export * from './utils'
|
||||
export * from './billing'
|
||||
|
||||
Reference in New Issue
Block a user