You've already forked AstralRinth
forked from didirus/AstralRinth
feat: doc templating & cleanup of routes (#4411)
* feat: clean up route structure * feat: install html-pdf-node-ts * fea * feat: use @ceereals/vue-pdf (react-pdf) * feat: remove pdf * feat: hide cc * feat: shared template * feat: payment statement document & redirect for emails * feat: layout tweaks * fix: lint issues * fix: robots.txt * feat: remove letterhead * Delete .claude/settings.local.json Signed-off-by: Calum H. <contact@cal.engineer> --------- Signed-off-by: Calum H. <contact@cal.engineer>
This commit is contained in:
Calum H.
107
apps/frontend/src/templates/docs/finance/PaymentStatement.vue
Normal file
107
apps/frontend/src/templates/docs/finance/PaymentStatement.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<script setup lang="ts">
|
||||
import { Link as VLink, Section, Text } from '@vue-email/components'
|
||||
|
||||
import StyledDoc from '../shared/StyledDoc.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledDoc title="Payment Statement">
|
||||
<Section class="mb-8">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<Text class="m-0 mb-2 text-2xl text-base font-bold">Payment Statement</Text>
|
||||
<Text class="m-0 text-sm text-secondary">Payment ID: { statement.payment_id }</Text>
|
||||
<Text class="m-0 text-sm text-secondary">Date: { statement.payment_date }</Text>
|
||||
</div>
|
||||
<div class="flex-1 text-right">
|
||||
<Text class="m-0 text-3xl font-bold text-brand">{ statement.net_amount } </Text>
|
||||
<Text class="m-0 mt-1 text-sm text-secondary">Net Amount Paid</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section class="mb-8">
|
||||
<div class="flex items-start gap-8">
|
||||
<div class="flex-1">
|
||||
<Text class="m-0 mb-3 border-b border-divider pb-2 text-base text-sm font-semibold">
|
||||
From
|
||||
</Text>
|
||||
<Text class="m-0 mb-1 text-base text-sm font-semibold">Rinth, Inc.</Text>
|
||||
<Text class="m-0 text-sm leading-tight text-secondary">800 N King St</Text>
|
||||
<Text class="m-0 text-sm leading-tight text-secondary">Suite 304 #3133</Text>
|
||||
<Text class="m-0 text-sm leading-tight text-secondary">Wilmington, DE 19801</Text>
|
||||
<Text class="m-0 mt-2 text-sm text-secondary">
|
||||
<VLink href="mailto:support@modrinth.com" class="text-blue no-underline">
|
||||
support@modrinth.com
|
||||
</VLink>
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<Text class="m-0 mb-3 border-b border-divider pb-2 text-base text-sm font-semibold">
|
||||
To
|
||||
</Text>
|
||||
<Text class="m-0 mb-1 text-base text-sm font-semibold">
|
||||
{ statement.recipient_name }
|
||||
</Text>
|
||||
<Text class="m-0 text-sm leading-tight text-secondary">
|
||||
{ statement.recipient_address_line_1 }
|
||||
</Text>
|
||||
<Text class="m-0 text-sm leading-tight text-secondary">
|
||||
{ statement.recipient_address_line_2 }
|
||||
</Text>
|
||||
<Text class="m-0 text-sm leading-tight text-secondary">
|
||||
{ statement.recipient_address_line_3 }
|
||||
</Text>
|
||||
<Text class="m-0 mt-2 text-sm text-secondary">
|
||||
<VLink href="mailto:{ statement.recipient_email }" class="text-blue no-underline">
|
||||
{ statement.recipient_email }
|
||||
</VLink>
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section class="mb-8">
|
||||
<Text class="m-0 mb-4 border-b border-divider pb-2 text-base text-lg font-semibold">
|
||||
Payment Details
|
||||
</Text>
|
||||
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<Text class="m-0 text-sm text-secondary">Gross Amount</Text>
|
||||
<Text class="m-0 text-base text-sm">{ statement.gross_amount }</Text>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<Text class="m-0 text-sm text-secondary">Processing Fees</Text>
|
||||
<Text class="m-0 text-base text-sm">{ statement.fees }</Text>
|
||||
</div>
|
||||
|
||||
<hr class="my-4 border-divider" />
|
||||
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<Text class="m-0 text-base font-semibold">Net Amount</Text>
|
||||
<Text class="m-0 text-base font-semibold">{ statement.net_amount }</Text>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section class="mb-8">
|
||||
<Text class="m-0 mb-4 border-b border-divider pb-2 text-base text-lg font-semibold">
|
||||
Purpose of Payment
|
||||
</Text>
|
||||
<Text class="m-0 text-sm leading-relaxed text-secondary">
|
||||
This payout reflects revenue earned by the creator through their activity on the Modrinth
|
||||
platform. Earnings are based on advertising revenue, subscriptions, and/or affiliate
|
||||
commissions tied to the creator's published projects, in accordance with the Rewards Program
|
||||
Terms.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Section class="mt-12 border-t border-divider pt-6">
|
||||
<Text class="text-muted m-0 text-center text-xs">
|
||||
This statement records a payout issued by Rinth, Inc. to the creator and may be retained as
|
||||
proof of payment.
|
||||
</Text>
|
||||
</Section>
|
||||
</StyledDoc>
|
||||
</template>
|
||||
6
apps/frontend/src/templates/docs/index.ts
Normal file
6
apps/frontend/src/templates/docs/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import type { Component } from 'vue'
|
||||
|
||||
export default {
|
||||
// Finance
|
||||
'payment-statement': () => import('./finance/PaymentStatement.vue'),
|
||||
} as Record<string, () => Promise<{ default: Component }>>
|
||||
54
apps/frontend/src/templates/docs/shared/StyledDoc.vue
Normal file
54
apps/frontend/src/templates/docs/shared/StyledDoc.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import { Column, Container, Img, Link as VLink, Row, Section, Text } from '@vue-email/components'
|
||||
|
||||
import StyledTemplate from '../../shared/StyledTemplate.vue'
|
||||
|
||||
defineProps<{
|
||||
title?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledTemplate :title="title">
|
||||
<Section class="bg-white pb-8 pl-8 pr-8 pt-8">
|
||||
<Container class="max-w-[700px]">
|
||||
<Row class="mb-8">
|
||||
<Column>
|
||||
<Row class="mb-4">
|
||||
<Column class="w-1/3">
|
||||
<Img
|
||||
src="https://cdn.modrinth.com/email/bd3357dfae4b1d266250372db3a0988f.png"
|
||||
width="120"
|
||||
alt="Modrinth Logo"
|
||||
class="block h-auto"
|
||||
/>
|
||||
</Column>
|
||||
<Column class="w-2/3 text-right align-top">
|
||||
<Text class="m-0 mb-2 text-2xl text-base font-bold"> Rinth, Inc. </Text>
|
||||
</Column>
|
||||
</Row>
|
||||
|
||||
<Section class="border-t-2 border-brand pt-6">
|
||||
<slot />
|
||||
</Section>
|
||||
</Column>
|
||||
</Row>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Section class="border-t border-divider bg-bg pb-4 pl-8 pr-8 pt-4">
|
||||
<Container class="max-w-[700px]">
|
||||
<Row>
|
||||
<Column class="text-center">
|
||||
<Text class="text-muted m-0 text-xs">
|
||||
This document was generated by Modrinth. For questions, contact
|
||||
<VLink href="mailto:support@modrinth.com" class="text-blue"
|
||||
>support@modrinth.com</VLink
|
||||
>
|
||||
</Text>
|
||||
</Column>
|
||||
</Row>
|
||||
</Container>
|
||||
</Section>
|
||||
</StyledTemplate>
|
||||
</template>
|
||||
Reference in New Issue
Block a user