promote-email-templates 0.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/.eslintrc.js +22 -0
  2. package/.prettierrc.json +7 -0
  3. package/dist/index.d.mts +467 -0
  4. package/dist/index.d.ts +467 -0
  5. package/dist/index.js +1123 -0
  6. package/dist/index.mjs +1068 -0
  7. package/emails/admin/abort-order-request.tsx +58 -0
  8. package/emails/admin/index.ts +2 -0
  9. package/emails/admin/revert-payment-request-admin.tsx +54 -0
  10. package/emails/all/index.ts +1 -0
  11. package/emails/all/welcome.tsx +104 -0
  12. package/emails/brand/evidences-accepted-brand.tsx +59 -0
  13. package/emails/brand/evidences-submitted-brand.tsx +65 -0
  14. package/emails/brand/index.ts +6 -0
  15. package/emails/brand/new-order-created-brand.tsx +74 -0
  16. package/emails/brand/order-accepted-brand.tsx +63 -0
  17. package/emails/brand/order-cancelled-brand.tsx +68 -0
  18. package/emails/brand/order-rejected-brand.tsx +79 -0
  19. package/emails/creator/evidences-approved-creator.tsx +62 -0
  20. package/emails/creator/evidences-rejected-creator.tsx +74 -0
  21. package/emails/creator/index.ts +5 -0
  22. package/emails/creator/new-order-created-creator.tsx +70 -0
  23. package/emails/creator/order-cancelled-creator.tsx +69 -0
  24. package/emails/creator/order-payment-creator.tsx +58 -0
  25. package/emails/index.ts +5 -0
  26. package/emails/shared/components/base-head.tsx +19 -0
  27. package/emails/shared/components/comment-component.tsx +32 -0
  28. package/emails/shared/components/footer.tsx +84 -0
  29. package/emails/shared/components/header.tsx +24 -0
  30. package/emails/shared/components/new-order-info.tsx +60 -0
  31. package/emails/shared/components/payment-amount.tsx +37 -0
  32. package/emails/shared/components/user-Info.tsx +55 -0
  33. package/emails/shared/index.ts +3 -0
  34. package/emails/shared/styles.ts +72 -0
  35. package/emails/shared/types.ts +179 -0
  36. package/emails/shared/values.ts +19 -0
  37. package/package.json +32 -0
  38. package/readme.md +27 -0
package/emails/creator/evidences-approved-creator.tsx ADDED
@@ -0,0 +1,62 @@
1
+ import { Body, Container, Html, Link, Preview, Text } from '@react-email/components';
2
+ import { baseContainer, baseContentContainer, baseText, button, link, main, rootStyles } from '../shared/styles';
3
+ import Header from '../shared/components/header';
4
+ import Footer from '../shared/components/footer';
5
+ import BaseHead from '../shared/components/base-head';
6
+ import UserInfo from '../shared/components/user-Info';
7
+ import * as React from 'react';
8
+ import { appRoutes } from '../shared/values';
9
+ import { EvidenceApprovedCreatorProps, USER_ROLES } from '../shared/types';
10
+
11
+ export default function EvidenceApprovedCreator(props: EvidenceApprovedCreatorProps) {
12
+ return (
13
+ <Html style={rootStyles}>
14
+ <BaseHead />
15
+ <Preview>Evidência aprovada ✅</Preview>
16
+ <Body style={{ ...main, ...baseContainer }}>
17
+ <Header />
18
+
19
+ <UserInfo photo={props.brand.photo} name={props.brand.name} userType={USER_ROLES.BRAND} />
20
+
21
+ <Container style={{ ...baseContentContainer }}>
22
+ <Text style={baseText}>Olá, {props.creator.name} 🎊,</Text>
23
+ <Text style={baseText}>
24
+ Actualizações, a{' '}
25
+ <Link href={appRoutes.creatorOrderDetails(props.evidenceLink)} target={'_blank'} style={link}>
26
+ evidência
27
+ </Link>{' '}
28
+ que submeteste foi aprovada pela marca 🎉.
29
+ </Text>
30
+
31
+ <Text style={baseText}>
32
+ Aguarde pela aprovação total por parte da marca para receberes o pagamento. Se tiveres alguma dúvida, não hesites em contactar
33
+ </Text>
34
+ </Container>
35
+
36
+ <Container style={{ ...baseContentContainer, marginTop: '25px' }}>
37
+ <Link href={appRoutes.creatorOrderDetails(props.order.id)} style={{ ...button, width: '150px' }}>
38
+ VER PEDIDO
39
+ </Link>
40
+ </Container>
41
+
42
+ <Footer />
43
+ </Body>
44
+ </Html>
45
+ );
46
+ }
47
+
48
+ EvidenceApprovedCreator.PreviewProps = {
49
+ order: {
50
+ id: '123',
51
+ },
52
+ brand: {
53
+ name: 'Vodacom Mz',
54
+ photo: 'https://companieslogo.com/img/orig/VOD.JO-b42c4c1b.png?t=1603932474',
55
+ },
56
+ creator: {
57
+ name: 'John Doe',
58
+ },
59
+ evidenceLink: 'https://www.youtube.com/test_video',
60
+ } satisfies EvidenceApprovedCreatorProps;
61
+
62
+ export { EvidenceApprovedCreator };
package/emails/creator/evidences-rejected-creator.tsx ADDED
@@ -0,0 +1,74 @@
1
+ import { Body, Container, Html, Link, Preview, Text } from '@react-email/components';
2
+ import { baseContainer, baseContentContainer, baseText, button, link, main, rootStyles } from '../shared/styles';
3
+ import Header from '../shared/components/header';
4
+ import Footer from '../shared/components/footer';
5
+ import BaseHead from '../shared/components/base-head';
6
+ import UserInfo from '../shared/components/user-Info';
7
+ import * as React from 'react';
8
+ import { appRoutes } from '../shared/values';
9
+ import { EvidencesRejectedProps, USER_ROLES } from '../shared/types';
10
+ import CommentComponent from '../shared/components/comment-component';
11
+
12
+ export default function EvidencesRejectedCreator(props: EvidencesRejectedProps) {
13
+ return (
14
+ <Html style={rootStyles}>
15
+ <BaseHead />
16
+ <Preview>Eviência rejeitada ❌</Preview>
17
+ <Body style={{ ...main, ...baseContainer }}>
18
+ <Header />
19
+
20
+ <UserInfo photo={props.brand.photo} name={props.brand.name} userType={USER_ROLES.BRAND} />
21
+
22
+ <Container style={{ ...baseContentContainer }}>
23
+ <Text style={baseText}>Olá, {props.creator.name},</Text>
24
+ <Text style={baseText}>
25
+ A{' '}
26
+ <Link href={props.evidenceLink} target={'_blank'} style={link}>
27
+ evidência
28
+ </Link>{' '}
29
+ foi rejeitada ❌ pela marca.
30
+ <br />
31
+ Por favor, reveja o motivo da rejeição e submeta novamente.
32
+ </Text>
33
+ </Container>
34
+
35
+ {props.reason && (
36
+ <div style={reasonContainer}>
37
+ <CommentComponent title={'Motivo da rejeição:'} comment={props.reason} danger />
38
+ </div>
39
+ )}
40
+
41
+ <Container style={{ ...baseContentContainer }}>
42
+ <Link href={appRoutes.creatorOrderDetails(props.order.id)} style={{ ...button, width: '200px' }}>
43
+ VER PEDIDO
44
+ </Link>
45
+ </Container>
46
+
47
+ <Footer />
48
+ </Body>
49
+ </Html>
50
+ );
51
+ }
52
+
53
+ EvidencesRejectedCreator.PreviewProps = {
54
+ order: {
55
+ id: '123',
56
+ },
57
+ creator: {
58
+ name: 'John Doe',
59
+ },
60
+ brand: {
61
+ name: 'Vodacom Mz',
62
+ photo: 'https://companieslogo.com/img/orig/VOD.JO-b42c4c1b.png?t=1603932474',
63
+ },
64
+ evidenceLink: 'https://www.youtube.com/watch?v=123',
65
+ reason: 'Conteúdo não cumpre com as diretrizes da marca.',
66
+ } satisfies EvidencesRejectedProps;
67
+
68
+ const reasonContainer = {
69
+ width: '100%',
70
+ padding: '0',
71
+ margin: '30px 0',
72
+ };
73
+
74
+ export { EvidencesRejectedCreator };
package/emails/creator/index.ts ADDED
@@ -0,0 +1,5 @@
1
+ export * from './evidences-approved-creator';
2
+ export * from './evidences-rejected-creator';
3
+ export * from './order-cancelled-creator';
4
+ export * from './order-payment-creator';
5
+ export * from './new-order-created-creator';
package/emails/creator/new-order-created-creator.tsx ADDED
@@ -0,0 +1,70 @@
1
+ import { Body, Container, Html, Link, Preview, Text } from '@react-email/components';
2
+ import { baseContainer, baseContentContainer, baseText, button, colors, main, rootStyles } from '../shared/styles';
3
+ import Header from '../shared/components/header';
4
+ import Footer from '../shared/components/footer';
5
+ import BaseHead from '../shared/components/base-head';
6
+ import UserInfo from '../shared/components/user-Info';
7
+ import NewOrderInfo from '../shared/components/new-order-info';
8
+ import * as React from 'react';
9
+ import { appRoutes } from '../shared/values';
10
+ import { NewOrderCreatedCreatorProps, USER_ROLES } from '../shared/types';
11
+
12
+ export default function NewOrderCreatedCreator(props: NewOrderCreatedCreatorProps) {
13
+ return (
14
+ <Html style={rootStyles}>
15
+ <BaseHead />
16
+ <Preview>Novo Pedido Recebido</Preview>
17
+ <Body style={{ ...main, ...baseContainer }}>
18
+ <Header />
19
+
20
+ <UserInfo photo={props.brand.photo} name={props.brand.name} userType={USER_ROLES.BRAND} />
21
+
22
+ <Container style={{ ...baseContentContainer }}>
23
+ <Text style={baseText}>Olá, {props.creator.name},</Text>
24
+ <Text style={baseText}>
25
+ Parabéns 🎉, você recebeu um novo pedido da empresa <span style={{ color: colors.primary }}>{props.brand.name}</span>.
26
+ <br /> Por favor, revise os detalhes abaixo 🚀:
27
+ </Text>
28
+ </Container>
29
+
30
+ <Container style={orderDetails}>
31
+ <NewOrderInfo orderCreatedAt={props.order.createdAt} packageName={props.package.name} packagePrice={props.package.price} />
32
+ </Container>
33
+
34
+ <Container style={{ ...baseContentContainer }}>
35
+ <Link href={appRoutes.creatorOrderDetails(props.order.id)} style={{ ...button, width: '120px' }}>
36
+ VER PEDIDO
37
+ </Link>
38
+ </Container>
39
+
40
+ <Footer />
41
+ </Body>
42
+ </Html>
43
+ );
44
+ }
45
+
46
+ NewOrderCreatedCreator.PreviewProps = {
47
+ package: {
48
+ name: '1 Instagram Post',
49
+ price: '1000.00',
50
+ },
51
+ order: {
52
+ id: '123',
53
+ createdAt: '20 de Agosto, 2021',
54
+ },
55
+ brand: {
56
+ name: 'Vodacom Mz',
57
+ photo: 'https://companieslogo.com/img/orig/VOD.JO-b42c4c1b.png?t=1603932474',
58
+ },
59
+ creator: {
60
+ name: 'Neymar Jr.',
61
+ },
62
+ } satisfies NewOrderCreatedCreatorProps;
63
+
64
+ const orderDetails = {
65
+ ...baseContentContainer,
66
+ marginTop: '30px',
67
+ marginBottom: '40px',
68
+ };
69
+
70
+ export { NewOrderCreatedCreator };
package/emails/creator/order-cancelled-creator.tsx ADDED
@@ -0,0 +1,69 @@
1
+ import { Body, Container, Html, Link, Preview, Text } from '@react-email/components';
2
+ import { baseContainer, baseContentContainer, baseText, button, link, main, rootStyles } from '../shared/styles';
3
+ import Header from '../shared/components/header';
4
+ import Footer from '../shared/components/footer';
5
+ import BaseHead from '../shared/components/base-head';
6
+ import UserInfo from '../shared/components/user-Info';
7
+ import * as React from 'react';
8
+ import { appRoutes, assetsBasePath } from '../shared/values';
9
+ import { OrderCancelledCreatorProps, USER_ROLES } from '../shared/types';
10
+ import CommentComponent from '../shared/components/comment-component';
11
+
12
+ export default function OrderCancelledCreator(props: OrderCancelledCreatorProps) {
13
+ return (
14
+ <Html style={rootStyles}>
15
+ <BaseHead />
16
+ <Preview>Pedido cancelado ❌</Preview>
17
+ <Body style={{ ...main, ...baseContainer }}>
18
+ <Header />
19
+
20
+ <UserInfo photo={`${assetsBasePath}/icons/logo-icon-colored.png`} name={'Promote Team'} userType={USER_ROLES.BRAND} />
21
+
22
+ <Container style={{ ...baseContentContainer }}>
23
+ <Text style={baseText}>Olá, {props.creator.name},</Text>
24
+ <Text style={baseText}>
25
+ Infelizmente o{' '}
26
+ <Link href={appRoutes.creatorOrderDetails(props.order.id)} target={'_blank'} style={link}>
27
+ pedido #{props.order.id}
28
+ </Link>{' '}
29
+ foi cancelado ❌ antes da sua conclusão.
30
+ <br />
31
+ Agradecemos a sua disponibilidade e esperamos que a próxima oportunidade seja um sucesso 👌🏽👌🏽!
32
+ </Text>
33
+ </Container>
34
+
35
+ {props.reason && (
36
+ <div style={reasonContainer}>
37
+ <CommentComponent title={'Motivo do cancelamento:'} comment={props.reason} danger />
38
+ </div>
39
+ )}
40
+
41
+ <Container style={{ ...baseContentContainer }}>
42
+ <Link href={appRoutes.creatorOrderDetails(props.order.id)} style={{ ...button, width: '150px' }}>
43
+ VER PEDIDO
44
+ </Link>
45
+ </Container>
46
+
47
+ <Footer />
48
+ </Body>
49
+ </Html>
50
+ );
51
+ }
52
+
53
+ OrderCancelledCreator.PreviewProps = {
54
+ order: {
55
+ id: '123',
56
+ },
57
+ creator: {
58
+ name: 'Vanessa Martins',
59
+ },
60
+ reason: 'A marca desistiu do pedido.',
61
+ } satisfies OrderCancelledCreatorProps;
62
+
63
+ const reasonContainer = {
64
+ width: '100%',
65
+ padding: '0',
66
+ margin: '30px 0',
67
+ };
68
+
69
+ export { OrderCancelledCreator };
package/emails/creator/order-payment-creator.tsx ADDED
@@ -0,0 +1,58 @@
1
+ import { Body, Container, Html, Link, Preview, Text } from '@react-email/components';
2
+ import { baseContainer, baseContentContainer, baseText, button, link, main, rootStyles } from '../shared/styles';
3
+ import Header from '../shared/components/header';
4
+ import Footer from '../shared/components/footer';
5
+ import BaseHead from '../shared/components/base-head';
6
+ import UserInfo from '../shared/components/user-Info';
7
+ import * as React from 'react';
8
+ import { appRoutes, assetsBasePath } from '../shared/values';
9
+ import { OrderOrderPaymentCreatorProps, USER_ROLES } from '../shared/types';
10
+ import PaymentAmount from '../shared/components/payment-amount';
11
+
12
+ export default function OrderPaymentCreator(props: OrderOrderPaymentCreatorProps) {
13
+ return (
14
+ <Html style={rootStyles}>
15
+ <BaseHead />
16
+ <Preview>Pagamento Liberado ✅</Preview>
17
+ <Body style={{ ...main, ...baseContainer }}>
18
+ <Header />
19
+
20
+ <UserInfo photo={`${assetsBasePath}/icons/logo-icon-colored.png`} name={'Promote Team'} userType={USER_ROLES.BRAND} />
21
+
22
+ <Container style={{ ...baseContentContainer }}>
23
+ <Text style={baseText}>Olá, {props.creator.name} 🎊,</Text>
24
+ <Text style={baseText}>
25
+ Boas Notícias 🎉, está em processamento o pagamento da{' '}
26
+ <Link href={appRoutes.creatorOrderDetails(props.order.id)} target={'_blank'} style={link}>
27
+ ordem #{props.order.id}
28
+ </Link>{' '}
29
+ </Text>
30
+
31
+ <Text style={baseText}>Espera-se que dentro de 24h o pagamento seja concluído, agradecemos por confiar na Promote.</Text>
32
+ </Container>
33
+
34
+ <PaymentAmount totalAmount={props.totalAmount} />
35
+
36
+ <Container style={{ ...baseContentContainer, marginTop: '25px' }}>
37
+ <Link href={appRoutes.creatorOrderDetails(props.order.id)} style={{ ...button, width: '150px' }}>
38
+ VER PEDIDO
39
+ </Link>
40
+ </Container>
41
+
42
+ <Footer />
43
+ </Body>
44
+ </Html>
45
+ );
46
+ }
47
+
48
+ OrderPaymentCreator.PreviewProps = {
49
+ order: {
50
+ id: '123',
51
+ },
52
+ creator: {
53
+ name: 'John Doe',
54
+ },
55
+ totalAmount: '1000,00',
56
+ } satisfies OrderOrderPaymentCreatorProps;
57
+
58
+ export { OrderPaymentCreator };
package/emails/index.ts ADDED
@@ -0,0 +1,5 @@
1
+ export * from './admin';
2
+ export * from './brand';
3
+ export * from './creator';
4
+ export * from './shared';
5
+ export * from './all';
package/emails/shared/components/base-head.tsx ADDED
@@ -0,0 +1,19 @@
1
+ import { Head } from '@react-email/components';
2
+ import * as React from 'react';
3
+
4
+ export default function BaseHead() {
5
+ return (
6
+ <Head>
7
+ <style>
8
+ {`
9
+ @media screen and (max-width: 700px) {
10
+ body {
11
+ border: none !important;
12
+ padding: 0 20px;
13
+ }
14
+ }
15
+ `}
16
+ </style>
17
+ </Head>
18
+ );
19
+ }
package/emails/shared/components/comment-component.tsx ADDED
@@ -0,0 +1,32 @@
1
+ import { Container, Heading, Text } from '@react-email/components';
2
+ import { baseContentContainer, baseText } from '../styles';
3
+
4
+ interface CommentComponentProps {
5
+ title: string;
6
+ comment: string;
7
+ danger?: boolean;
8
+ }
9
+ export default function CommentComponent(props: CommentComponentProps) {
10
+ return (
11
+ <Container style={{ ...container(props.danger) }}>
12
+ <Heading style={title}>{props.title}</Heading>
13
+ <Text style={content}>{props.comment}</Text>
14
+ </Container>
15
+ );
16
+ }
17
+
18
+ const container = (isDanger: boolean) => ({
19
+ ...baseContentContainer,
20
+ backgroundColor: isDanger ? 'rgba(250,0,0,0.26)' : '#f5f5f5',
21
+ borderRadius: '8px',
22
+ padding: '16px',
23
+ });
24
+ const title = {
25
+ ...baseText,
26
+ fontWeight: 'bold',
27
+ margin: '0',
28
+ };
29
+
30
+ const content = {
31
+ ...baseText,
32
+ };
package/emails/shared/components/footer.tsx ADDED
@@ -0,0 +1,84 @@
1
+ import { Column, Container, Hr, Img, Link, Row, Section, Text } from '@react-email/components';
2
+ import { appRoutes, assetsBasePath, socialNetworkLinks } from '../values';
3
+ import { baseContentContainer, colors } from '../styles';
4
+ import * as React from 'react';
5
+
6
+ export default function Footer() {
7
+ const currentYear = new Date().getFullYear();
8
+
9
+ return (
10
+ <Container style={container}>
11
+ <Hr style={line} />
12
+ <Section>
13
+ <Row>
14
+ <Column>
15
+ <Img src={`${assetsBasePath}/icons/logo-icon-colored.png`} alt={'Promote Logo'} style={logo} />
16
+ </Column>
17
+
18
+ <Column align={'right'}>
19
+ <Container>
20
+ <Link href={socialNetworkLinks.linkedin} target={'_blank'}>
21
+ <Img src={`${assetsBasePath}/icons/linkedin.png`} alt={'Linkedin Logo'} style={socialItem} />
22
+ </Link>
23
+
24
+ <Link href={socialNetworkLinks.instagram} target={'_blank'}>
25
+ <Img src={`${assetsBasePath}/icons/instagram.png`} alt={'Instagram Logo'} style={socialItem} />
26
+ </Link>
27
+
28
+ <Link href={socialNetworkLinks.facebook} target={'_blank'}>
29
+ <Img src={`${assetsBasePath}/icons/facebook.png`} alt={'Facebook Logo'} style={socialItem} />
30
+ </Link>
31
+ </Container>
32
+ </Column>
33
+ </Row>
34
+
35
+ <Row>
36
+ <Column>
37
+ <Text style={summaryText}>©{currentYear} Promote. Todos direitos reservados</Text>
38
+ <Link href={appRoutes.termsAndConditions} style={termsConditions}>
39
+ Termos e Condições.
40
+ </Link>
41
+ </Column>
42
+ </Row>
43
+ </Section>
44
+ </Container>
45
+ );
46
+ }
47
+
48
+ const container = {
49
+ ...baseContentContainer,
50
+ width: '100%',
51
+ padding: '20px 0',
52
+ };
53
+
54
+ const line = {
55
+ margin: '20px 0',
56
+ backgroundColor: colors.grey,
57
+ };
58
+
59
+ const logo = {
60
+ width: '30px',
61
+ height: '30px',
62
+ };
63
+
64
+ const summaryText = {
65
+ color: colors.black,
66
+ fontSize: '12px',
67
+ margin: '0',
68
+ marginTop: '5px',
69
+ };
70
+
71
+ const termsConditions = {
72
+ color: colors.grey01,
73
+ fontSize: '12px',
74
+ margin: '0',
75
+ };
76
+
77
+ const socialItem = {
78
+ display: 'inline-block',
79
+ marginLeft: '10px',
80
+ width: '20px',
81
+ height: '20px',
82
+ borderRadius: '50%',
83
+ float: 'right' as const,
84
+ };
package/emails/shared/components/header.tsx ADDED
@@ -0,0 +1,24 @@
1
+ import { Container, Img, Link } from '@react-email/components';
2
+ import { appRoutes, assetsBasePath } from '../values';
3
+ import * as React from 'react';
4
+ import { baseContentContainer } from '../styles';
5
+
6
+ export default function Header() {
7
+ return (
8
+ <Container style={container}>
9
+ <Link href={appRoutes.homePageRoute} target={'_blank'}>
10
+ <Img src={`${assetsBasePath}/icons/full-logo-colored.png`} alt={'Promote Logo'} style={logo} />
11
+ </Link>
12
+ </Container>
13
+ );
14
+ }
15
+
16
+ const container = {
17
+ ...baseContentContainer,
18
+ padding: '20px 0',
19
+ };
20
+
21
+ const logo = {
22
+ width: 'auto',
23
+ height: '20px',
24
+ };
package/emails/shared/components/new-order-info.tsx ADDED
@@ -0,0 +1,60 @@
1
+ import { Column, Row, Section, Text } from '@react-email/components';
2
+ import * as React from 'react';
3
+ import { baseText, colors } from '../styles';
4
+
5
+ interface PackageInfoProps {
6
+ packageName: string;
7
+ packagePrice: string;
8
+ orderCreatedAt: string;
9
+ }
10
+ export default function NewOrderInfo(props: PackageInfoProps) {
11
+ return (
12
+ <Section>
13
+ <Row style={rowItem}>
14
+ <Column>
15
+ <Text style={leftText}>Paconte:</Text>
16
+ </Column>
17
+ <Column align="right">
18
+ <Text style={rightText}>{props.packageName}</Text>
19
+ </Column>
20
+ </Row>
21
+
22
+ <Row style={rowItem}>
23
+ <Column>
24
+ <Text style={leftText}>Preço: </Text>
25
+ </Column>
26
+ <Column align="right">
27
+ <Text style={rightText}>{props.packagePrice} MZN</Text>
28
+ </Column>
29
+ </Row>
30
+
31
+ <Row style={rowItem}>
32
+ <Column>
33
+ <Text style={leftText}>Data: </Text>
34
+ </Column>
35
+ <Column align="right">
36
+ <Text style={rightText}>{props.orderCreatedAt}</Text>
37
+ </Column>
38
+ </Row>
39
+ </Section>
40
+ );
41
+ }
42
+
43
+ const leftText = {
44
+ ...baseText,
45
+ textAlign: 'left' as const,
46
+ margin: 0,
47
+ color: colors.black,
48
+ fontWeight: 'bold',
49
+ };
50
+
51
+ const rightText = {
52
+ ...baseText,
53
+ textAlign: 'right' as const,
54
+ margin: 0,
55
+ color: colors.primary,
56
+ };
57
+
58
+ const rowItem = {
59
+ marginBottom: '5px',
60
+ };
package/emails/shared/components/payment-amount.tsx ADDED
@@ -0,0 +1,37 @@
1
+ import { Container, Heading, Text } from '@react-email/components';
2
+ import { baseContentContainer, baseText, colors } from '../styles';
3
+
4
+ interface CommentComponentProps {
5
+ totalAmount: string;
6
+ }
7
+ export default function PaymentAmount(props: CommentComponentProps) {
8
+ return (
9
+ <Container style={container}>
10
+ <Heading style={title}>Valor Total</Heading>
11
+ <Text style={amount}>{props.totalAmount} MZN</Text>
12
+ </Container>
13
+ );
14
+ }
15
+
16
+ const container = {
17
+ ...baseContentContainer,
18
+ backgroundColor: 'rgba(59,140,235,0.79)',
19
+ borderRadius: '8px',
20
+ padding: '16px',
21
+ };
22
+
23
+ const title = {
24
+ ...baseText,
25
+ fontWeight: 'bold',
26
+ margin: '0',
27
+ color: colors.white,
28
+ };
29
+
30
+ const amount = {
31
+ ...baseText,
32
+ color: colors.white,
33
+ fontWeight: 'bold',
34
+ fontSize: '25px',
35
+ margin: '10px 0',
36
+ textAlign: 'center' as const,
37
+ };
package/emails/shared/components/user-Info.tsx ADDED
@@ -0,0 +1,55 @@
1
+ import { Container, Img, Link, Text } from '@react-email/components';
2
+ import { baseText, centerBlock, centerText, colors } from '../styles';
3
+ import * as React from 'react';
4
+ import { USER_ROLES } from '../types';
5
+ import { appRoutes } from '../values';
6
+
7
+ type UserInfoProps =
8
+ | {
9
+ photo: string;
10
+ name: string;
11
+ username: string;
12
+ userType: USER_ROLES.CREATOR;
13
+ }
14
+ | {
15
+ photo: string;
16
+ name: string;
17
+ userType: USER_ROLES.BRAND;
18
+ };
19
+ export default function UserInfo(props: UserInfoProps) {
20
+ return (
21
+ <Container>
22
+ <Img src={props.photo} alt={props.name} style={userPhoto} defaultValue={'https://via.placeholder.com/150'} />
23
+ {props.userType === USER_ROLES.CREATOR ? (
24
+ <Link href={appRoutes.creatorPublicProfile(props.username)}>
25
+ <Text style={userName}>{props.name}</Text>
26
+ </Link>
27
+ ) : (
28
+ <Text style={userName}>{props.name}</Text>
29
+ )}
30
+ </Container>
31
+ );
32
+ }
33
+
34
+ UserInfo.PreviewProps = {
35
+ photo: 'https://via.placeholder.com/150',
36
+ name: 'User Name',
37
+ };
38
+
39
+ const userName = {
40
+ ...baseText,
41
+ ...centerText,
42
+ marginTop: '10px',
43
+ textAlign: 'center' as const,
44
+ fontWeight: 'bold',
45
+ color: colors.primary,
46
+ };
47
+
48
+ const userPhoto = {
49
+ width: '60px',
50
+ height: '60px',
51
+ borderRadius: '100%',
52
+ objectFit: 'cover' as const,
53
+ marginBottom: '10px',
54
+ ...centerBlock,
55
+ };
package/emails/shared/index.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from './styles';
2
+ export * from './types';
3
+ export * from './values';