feat: claim by mail

components/layout/header.vue

@@ -1,6 +1,6 @@
 <template>
   <header
-    class="border-primary fixed left-0 top-0 z-50 flex h-[60px] w-full items-center justify-between p-6 backdrop-blur-sm"
+    class="border-primary sticky left-0 top-0 z-50 flex h-[60px] w-full items-center justify-between p-6 backdrop-blur-sm"
   >
     <nuxt-link to="/">
       <h1 class="text-2xl dark:text-white">.MEMO</h1>

components/modals/sign-modal.vue

@@ -69,6 +69,7 @@
         :price-error="priceError"
         :deposit-per-item="depositPerItem"
         :deposit-for-collection="depositForCollection"
+        :support-email="supportEmail"
       />
       <span class="flex w-full items-center justify-between gap-2 rounded-lg border border-black bg-yellow-300 p-4">
         <dot-checkbox v-model="codeWroteDown" black />
@@ -128,6 +129,7 @@ const props = defineProps<{
   quantity: number;
   secret: string;
   description?: string;
+  supportEmail?: boolean;
   chain: Prefix;
 }>();
 
@@ -201,6 +203,7 @@ watch(status, async (status) => {
           mint: toMint.value,
           name: props.name,
           image: imageCid.value,
+          supportEmail: props.supportEmail,
           expiresAt: DateTime.fromJSDate(props.endDate).toSQL(),
           createdAt: DateTime.fromJSDate(props.startDate).toSQL(),
         } as CreateMemoDTO,

components/redirect-message.vue

@@ -0,0 +1,36 @@
+<template>
+  <div v-if="message" class="relative flex h-24 items-center justify-center bg-k-primary md:h-32">
+    <h1 class="px-7 text-center text-lg !text-black md:text-2xl">{{ message }}</h1>
+
+    <button class="absolute right-0 top-0 p-5" @click="hideMessage">
+      <Icon name="mdi:close" size="32" class="!text-black" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+const { t } = useI18n();
+
+function hideMessage() {
+  useRouter().push({
+    query: {
+      ...Object.fromEntries(Object.entries(route.query).filter(([key]) => key !== "action")),
+    },
+  });
+}
+
+const message = computed(() => {
+  if (route.query.action) {
+    if (route.query.action === "verify_email") {
+      return t("redirectMessages.verifyEmail");
+    }
+
+    if (route.query.action === "verify_email_error") {
+      return t("redirectMessages.verifyEmailError");
+    }
+  }
+
+  return null;
+});
+</script>

components/signing/detail.vue

@@ -37,6 +37,13 @@
     </span>
     <p class="text-sm text-text-color">{{ $t("create.dialog.amount") }}</p>
     <p class="text-right text-sm font-bold text-text-color/70">{{ props.quantity }}</p>
+
+    <template v-if="props.supportEmail">
+      <p class="text-sm text-text-color">{{ t("create.dialog.supportEmail") }}</p>
+      <p class="text-right text-sm font-bold text-text-color/70">
+        {{ props.supportEmail ? t("common.yes") : t("common.no") }}
+      </p>
+    </template>
   </div>
 
   <hr class="-mx-6 my-3" />
@@ -78,6 +85,7 @@ const props = defineProps<{
   startDate: Date;
   endDate: Date;
   quantity: number;
+  supportEmail?: boolean;
   secret: string;
   description?: string;
   chain: Prefix;
@@ -89,6 +97,8 @@ const props = defineProps<{
   depositForCollection: number;
 }>();
 
+const { t } = useI18n();
+
 const showBreakdown = ref(false);
 const displaySecret = ref(false);
 

layouts/default.vue

@@ -1,5 +1,7 @@
 <template>
-  <div id="app-base" class="relative flex min-h-screen flex-col bg-background-color pt-10">
+  <div id="app-base" class="relative flex min-h-screen flex-col bg-background-color">
+    <redirect-message />
+
     <layout-header />
     <main class="h-full p-4 pb-20">
       <slot />

layouts/landing.vue

@@ -1,5 +1,7 @@
 <template>
   <div id="app-base" class="relative min-h-screen bg-bg-persistent">
+    <redirect-message />
+
     <main class="h-full pb-20">
       <slot />
     </main>

locales/en-US.json

@@ -16,7 +16,10 @@
     "back": "Back",
     "address": "Address",
     "account": "Account",
-    "error": "Error"
+    "error": "Error",
+    "yes": "Yes",
+    "no": "No",
+    "email": "E-mail"
   },
   "landing": {
     "quote1": "Your memories,",
@@ -44,11 +47,13 @@
     "enterCode": "Enter MEMO Code",
     "howThisWorks": "How this works?",
     "success": "MEMO claimed successfully",
+    "reservationSuccess": "MEMO claimed successfully. Check your inbox",
     "cantLoad": "Couldn't load MEMO",
     "tryDifferent": "Try a different MEMO?",
     "enterAddress": "Enter address",
     "connectWallet": "Connect Wallet",
     "enterDOTAddress": "Enter DOT address",
+    "enterEmailAddress": "Enter E-mail address",
     "alreadyClaimed": "You already claimed this MEMO",
     "claimFree": "Claim for free",
     "seeInGallery": "See {name} in gallery",
@@ -58,7 +63,8 @@
     "claiming": "Claiming MEMO...",
     "claim": "Claim MEMO",
     "loading": "Loading info...",
-    "remaining": "Remaining claims: {free} / {total}"
+    "remaining": "Remaining claims: {free} / {total}",
+    "email": "E-mail"
   },
   "create": {
     "title": ".create",
@@ -77,7 +83,8 @@
       "quantity": "Quantity",
       "quantityHint": "This is the total number of MEMO pieces that will be available for claiming.",
       "secret": "Secret code",
-      "secretHint": "This is a secret code that will be used to claim the MEMO. It should be shared with the attendees."
+      "secretHint": "This is a secret code that will be used to claim the MEMO. It should be shared with the attendees.",
+      "supportEmail": "Support mail"
     },
     "dialog": {
       "confirm": "Confirm creation",
@@ -96,7 +103,8 @@
       "canceled": "Transaction was canceled. Please try again.",
       "settingUp": "Setting up your MEMO",
       "txProgress": "Transaction in progress. (Status: {status})",
-      "rememberCode": "I have written down the MEMO secret code and understand that it is required to claim my MEMO."
+      "rememberCode": "I have written down the MEMO secret code and understand that it is required to claim my MEMO.",
+      "supportEmail": "Claim by mail"
     },
     "success": {
       "title": "Purchased",
@@ -298,5 +306,9 @@
       "chooseArtwork": "Drop your artwork",
       "chooseDifferent": "Choose a different artwork"
     }
+  },
+  "redirectMessages": {
+    "verifyEmail": "Your E-mail was successfuly verified",
+    "verifyEmailError": "E-mail verification was not successful"
   }
 }