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
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>
|
||||
119
packages/ui/src/locales/en-US/index.json
Normal file
119
packages/ui/src/locales/en-US/index.json
Normal file
@@ -0,0 +1,119 @@
|
||||
{
|
||||
"omorphia.component.badge.label.accepted": {
|
||||
"defaultMessage": "Accepted"
|
||||
},
|
||||
"omorphia.component.badge.label.approved": {
|
||||
"defaultMessage": "Approved"
|
||||
},
|
||||
"omorphia.component.badge.label.archived": {
|
||||
"defaultMessage": "Archived"
|
||||
},
|
||||
"omorphia.component.badge.label.closed": {
|
||||
"defaultMessage": "Closed"
|
||||
},
|
||||
"omorphia.component.badge.label.creator": {
|
||||
"defaultMessage": "Creator"
|
||||
},
|
||||
"omorphia.component.badge.label.draft": {
|
||||
"defaultMessage": "Draft"
|
||||
},
|
||||
"omorphia.component.badge.label.failed": {
|
||||
"defaultMessage": "Failed"
|
||||
},
|
||||
"omorphia.component.badge.label.listed": {
|
||||
"defaultMessage": "Listed"
|
||||
},
|
||||
"omorphia.component.badge.label.moderator": {
|
||||
"defaultMessage": "Moderator"
|
||||
},
|
||||
"omorphia.component.badge.label.modrinth-team": {
|
||||
"defaultMessage": "Modrinth Team"
|
||||
},
|
||||
"omorphia.component.badge.label.pending": {
|
||||
"defaultMessage": "Pending"
|
||||
},
|
||||
"omorphia.component.badge.label.private": {
|
||||
"defaultMessage": "Private"
|
||||
},
|
||||
"omorphia.component.badge.label.processed": {
|
||||
"defaultMessage": "Processed"
|
||||
},
|
||||
"omorphia.component.badge.label.rejected": {
|
||||
"defaultMessage": "Rejected"
|
||||
},
|
||||
"omorphia.component.badge.label.returned": {
|
||||
"defaultMessage": "Returned"
|
||||
},
|
||||
"omorphia.component.badge.label.scheduled": {
|
||||
"defaultMessage": "Scheduled"
|
||||
},
|
||||
"omorphia.component.badge.label.under-review": {
|
||||
"defaultMessage": "Under review"
|
||||
},
|
||||
"omorphia.component.badge.label.unlisted": {
|
||||
"defaultMessage": "Unlisted"
|
||||
},
|
||||
"omorphia.component.badge.label.withheld": {
|
||||
"defaultMessage": "Withheld"
|
||||
},
|
||||
"omorphia.component.copy.action.copy": {
|
||||
"defaultMessage": "Copy code to clipboard"
|
||||
},
|
||||
"omorphia.component.environment-indicator.label.client": {
|
||||
"defaultMessage": "Client"
|
||||
},
|
||||
"omorphia.component.environment-indicator.label.client-and-server": {
|
||||
"defaultMessage": "Client and server"
|
||||
},
|
||||
"omorphia.component.environment-indicator.label.client-or-server": {
|
||||
"defaultMessage": "Client or server"
|
||||
},
|
||||
"omorphia.component.environment-indicator.label.server": {
|
||||
"defaultMessage": "Server"
|
||||
},
|
||||
"omorphia.component.environment-indicator.label.type": {
|
||||
"defaultMessage": "A {type}"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user