Email components

<script setup lang="ts">
import { EmailButton, EmailDivider, EmailHeading, EmailLayout, EmailLinkFallback, EmailText } from '@frigear-nu/email-templates/components'

defineProps<{ name: string, url: string }>()
</script>

<template>
  <EmailLayout :preview="`Welcome, ${name}!`">
    <ESubject>Welcome, {{ name }}</ESubject>
    <EmailHeading>Welcome, {{ name }}!</EmailHeading>
    <EmailDivider />
    <EmailText>Thanks for signing up. Click the button below to get started.</EmailText>
    <EmailButton :href="url">Get started</EmailButton>
    <EmailLinkFallback :href="url" />
  </EmailLayout>
</template>

<script setup lang="ts">
import { EmailButton, EmailDivider, EmailHeading, EmailLayout, EmailLinkFallback, EmailText } from '@frigear-nu/email-templates/components'

defineProps<{
  name: string
  device: string
  location: string
  signedInAt: string
  secureUrl: string
}>()
</script>

<template>
  <EmailLayout preview="New sign-in to your account">
    <ESubject>New sign-in to your account</ESubject>
    <EmailHeading tone="danger">
      New sign-in detected
    </EmailHeading>
    <EmailDivider />
    <EmailText>Hi {{ name }}, your account was just signed in to from a new device.</EmailText>

    <!-- Renderer components mix in freely: a two-column details table. -->
    <ERow
      v-for="[label, value] in [['Device', device], ['Location', location], ['Time', signedInAt]]"
      :key="label"
    >
      <EColumn style="width: 35%; padding: 4px 0">
        <EmailText
          variant="muted"
          style="margin: 0"
        >
          {{ label }}
        </EmailText>
      </EColumn>
      <EColumn style="padding: 4px 0">
        <EmailText style="margin: 0">
          {{ value }}
        </EmailText>
      </EColumn>
    </ERow>

    <EmailDivider />
    <EmailText>If this was you, no action is needed. If not, secure your account now.</EmailText>
    <EmailButton
      :href="secureUrl"
      color="danger"
    >
      Secure my account
    </EmailButton>
    <EmailLinkFallback :href="secureUrl" />
  </EmailLayout>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { EmailButton, EmailDivider, EmailFooter, EmailHeading, EmailLayout, EmailText } from '@frigear-nu/email-templates/components'

const props = defineProps<{
  name: string
  orderNumber: string
  items: { label: string, quantity: number, amount: number }[]
  currency: string
  orderUrl: string
}>()

// Templates render outside the Nuxt app, so format with Intl rather than app composables.
const money = (amount: number) => new Intl.NumberFormat('en', { style: 'currency', currency: props.currency }).format(amount)
const total = computed(() => props.items.reduce((sum, item) => sum + item.amount * item.quantity, 0))
</script>

<template>
  <EmailLayout :preview="`Receipt for order ${orderNumber}`">
    <ESubject>Your receipt for order {{ orderNumber }}</ESubject>
    <EmailHeading>Thanks for your order, {{ name }}!</EmailHeading>
    <EmailText variant="muted">
      Order {{ orderNumber }}
    </EmailText>
    <EmailDivider />

    <ERow
      v-for="item in items"
      :key="item.label"
    >
      <EColumn>
        <EmailText style="margin: 0 0 8px">
          {{ item.quantity }} × {{ item.label }}
        </EmailText>
      </EColumn>
      <EColumn align="right">
        <EmailText style="margin: 0 0 8px">
          {{ money(item.amount * item.quantity) }}
        </EmailText>
      </EColumn>
    </ERow>

    <EmailDivider />
    <ERow>
      <EColumn>
        <EmailText style="font-weight: 700; margin: 0 0 16px">
          Total
        </EmailText>
      </EColumn>
      <EColumn align="right">
        <EmailText style="font-weight: 700; margin: 0 0 16px">
          {{ money(total) }}
        </EmailText>
      </EColumn>
    </ERow>

    <EmailButton :href="orderUrl">
      View order
    </EmailButton>

    <template #footer>
      <EmailFooter>Questions about your order? Just reply to this email.</EmailFooter>
    </template>
  </EmailLayout>
</template>

<script setup lang="ts">
import { EmailDivider, EmailFooter, EmailHeading, EmailLayout, EmailText } from '@frigear-nu/email-templates/components'

defineProps<{
  name: string
  events: { title: string, date: string, url: string }[]
  unsubscribeUrl: string
}>()
</script>

<template>
  <EmailLayout preview="Upcoming events this week">
    <ESubject>This week at Frigear</ESubject>
    <EmailHeading>Hi {{ name }}, here’s what’s coming up</EmailHeading>
    <EmailDivider />

    <template
      v-for="event in events"
      :key="event.url"
    >
      <EmailText style="margin: 0 0 4px; font-weight: 600">
        <ELink
          :href="event.url"
          style="color: inherit"
        >
          {{ event.title }}
        </ELink>
      </EmailText>
      <EmailText variant="muted">
        {{ event.date }}
      </EmailText>
    </template>

    <EmailText v-if="!events.length">
      Nothing scheduled this week. We’ll let you know when something comes up.
    </EmailText>

    <!-- Replace the default footer, e.g. with an unsubscribe link. -->
    <template #footer>
      <EmailFooter>
        You get this digest because you follow Frigear events.
        <a
          :href="unsubscribeUrl"
          style="color: inherit"
        >Unsubscribe</a>.
      </EmailFooter>
    </template>
  </EmailLayout>
</template>