💄 Add gifting for book (#1450)

* 💄 Add gift dialog in book * 💄 Add gift success page * 💄 Add gift message in claim page * 💄 Hide gift button for free book * 💄 Update GiftDialog UI * 💄 Display gift info on claim page (#6) * 💬 Update gift related text * 💬 Update book gift dialog placeholder Co-authored-by: Wei-Jun Hung <[email protected]> * 💩 Block LIKE book payment for gift --------- Co-authored-by: AuroraHuang22 <[email protected]> Co-authored-by: AuroraHuang22 <[email protected]> Co-authored-by: Wei-Jun Hung <[email protected]>
likecoin · Dec 13, 2023 · 8758c39 · 8758c39
1 parent dfe4c6b
commit 8758c39
Show file tree

Hide file tree

Showing 9 changed files with 553 additions and 143 deletions.
diff --git a/src/components/Icon/Gift.vue b/src/components/Icon/Gift.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10 1.7639C10.5308 1.28885 11.2316 1 12 1C13.6569 1 15 2.34315 15 4C15 4.35064 14.9398 4.68722 14.8293 5H16C17.6569 5 19 6.34315 19 8V9C19 10.3062 18.1652 11.4175 17 11.8293V16C17 17.6569 15.6569 19 14 19H6C4.34315 19 3 17.6569 3 16V11.8293C1.83481 11.4175 1 10.3062 1 9V8C1 6.34315 2.34315 5 4 5H5.17071C5.06015 4.68722 5 4.35064 5 4C5 2.34315 6.34315 1 8 1C8.76836 1 9.46924 1.28885 10 1.7639ZM11 4V5H12C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4ZM9 7H8H4C3.44772 7 3 7.44772 3 8V9C3 9.55228 3.44772 10 4 10H9V7ZM11 7H12H16C16.5523 7 17 7.44772 17 8V9C17 9.55228 16.5523 10 16 10H11V7ZM8 5H9V4C9 3.44772 8.55228 3 8 3C7.44772 3 7 3.44772 7 4C7 4.55228 7.44772 5 8 5ZM5 12V16C5 16.5523 5.44772 17 6 17H9V12H5ZM11 17H14C14.5523 17 15 16.5523 15 16V12H11V17Z"
+    />
+  </svg>
+</template>
diff --git a/src/components/NFTBook/GiftDialog.vue b/src/components/NFTBook/GiftDialog.vue
@@ -0,0 +1,127 @@
+<template>
+  <Dialog
+    :open="open"
+    panel-container-class="phone:max-w-[520px] laptop:w-[520px]"
+    panel-component="CardV2"
+    panel-class="overflow-y-scroll shadow-lg"
+    @close="$emit('close')"
+  >
+    <Label
+      preset="h2"
+      class="text-like-green"
+      :text="$t('nft_book_gift_dialog_title')"
+    >
+      <template #prepend>
+        <IconGift class="w-[32px] text-like-green" />
+      </template>
+    </Label>
+    <Label
+      class="text-dark-gray my-[12px]"
+      :text="$t('nft_book_gift_dialog_description')"
+    />
+    <hr class="w-full border-shade-gray" />
+    <form
+      class="flex flex-col w-full gap-[12px] my-[20px]"
+      @submit.prevent="submitGiftInfo"
+    >
+      <div class="flex flex-col">
+        <Label
+          preset="p6"
+          class="text-medium-gray"
+          :text="$t('nft_book_gift_dialog_label_to_email')"
+        />
+        <TextField
+          v-model="toEmail"
+          class="mt-[4px]"
+          :placeholder="$t('nft_book_gift_dialog_placeholder_to_email')"
+        />
+      </div>
+      <div class="flex flex-col">
+        <Label
+          preset="p6"
+          class="text-medium-gray"
+          :text="$t('nft_book_gift_dialog_label_to_name')"
+        />
+        <TextField
+          v-model="toName"
+          class="mt-[4px]"
+          :placeholder="$t('nft_book_gift_dialog_placeholder_to_name')"
+        />
+      </div>
+      <div class="flex flex-col justify-start">
+        <Label
+          preset="p6"
+          content-class="flex-grow-0"
+          class="text-medium-gray"
+          :text="$t('nft_book_gift_dialog_label_message')"
+        >
+          <template #append>
+            <IconMessage class="text-dark-gray" />
+          </template>
+        </Label>
+        <TextField
+          v-model="message"
+          class="mt-[4px]"
+          :is-textarea="true"
+          :placeholder="$t('nft_book_gift_dialog_placeholder_message')"
+        />
+      </div>
+      <div class="flex flex-col">
+        <Label
+          preset="p6"
+          class="text-medium-gray"
+          :text="$t('nft_book_gift_dialog_label_from_name')"
+        />
+        <TextField
+          v-model="fromName"
+          class="mt-[4px]"
+          :placeholder="$t('nft_book_gift_dialog_placeholder_from_name')"
+        />
+      </div>
+      <hr class="w-full border-shade-gray mt-[20px]" />
+      <ButtonV2
+        type="submit"
+        preset="outline"
+        class="mt-[12px]"
+        :text="$t('nft_book_gift_dialog_label_submit')"
+      />
+    </form>
+  </Dialog>
+</template>
+
+<script>
+export default {
+  name: 'NFTBookGiftDialog',
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    selectedValue: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      fromName: '',
+      toName: '',
+      toEmail: '',
+      message: '',
+    };
+  },
+  methods: {
+    submitGiftInfo() {
+      this.$emit('submit', {
+        selectedValue: this.selectedValue,
+        giftInfo: {
+          fromName: this.fromName,
+          toName: this.toName,
+          toEmail: this.toEmail,
+          message: this.message,
+        },
+      });
+    },
+  },
+};
+</script>
diff --git a/src/components/NFTEditionSelect.vue b/src/components/NFTEditionSelect.vue
@@ -45,6 +45,17 @@
         />
       </template>
 
+      <ButtonV2
+        v-if="!isAllSoldOut && selectedItem.price > 0"
+        :is-disabled="!selectedItem"
+        preset="secondary"
+        :text="$t('nft_edition_select_confirm_button_text_gift')"
+        @click="handleClickGiftButton"
+      >
+        <template #prepend>
+          <IconGift class="w-[16px]" />
+        </template>
+      </ButtonV2>
       <ButtonV2
         v-if="!isAllSoldOut"
         :is-disabled="!selectedItem"
@@ -173,6 +184,9 @@ export default {
       this.$emit('change', value);
       this.$emit('update:value', value);
     },
+    handleClickGiftButton() {
+      this.$emit('click-gift', this.selectedValue);
+    },
     handleClickCollectButton() {
       this.$emit('click-collect', this.selectedValue);
     },

diff --git a/src/components/NFTViewOptionList.vue b/src/components/NFTViewOptionList.vue
@@ -42,7 +42,7 @@
         <Dropdown>
           <template #trigger="{ toggle }">
             <ButtonV2
-              class="mt-[12px] w-full"
+              class="w-full"
               preset="outline"
               :is-disabled="!isContentViewable"
               @click="toggle"

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -337,12 +337,30 @@
     "LikeCoin staking"
   ],
   "month": "month",
+  "nft_book_gift_dialog_title": "Gift an eBook",
+  "nft_book_gift_dialog_description": "Send an eBook gift to your friend via email, share the joy of reading!",
+  "nft_book_gift_dialog_label_from_name": "Your Name",
+  "nft_book_gift_dialog_label_message": "Your message to the receiver",
+  "nft_book_gift_dialog_label_submit": "Checkout",
+  "nft_book_gift_dialog_label_to_email": "Email of receiver",
+  "nft_book_gift_dialog_label_to_name": "Name of receiver",
+  "nft_book_gift_dialog_placeholder_from_name": "Love",
+  "nft_book_gift_dialog_placeholder_message": "Here is a gift for you!",
+  "nft_book_gift_dialog_placeholder_to_email": "[email protected]",
+  "nft_book_gift_dialog_placeholder_to_name": "John Smith",
+  "nft_book_gift_page_description_0": "Your eBook gift has been sent via email. You will be notified when the receiver has claimed the gift.",
+  "nft_book_gift_page_description_1": "Thank you for sharing the joy of reading!",
+  "nft_book_gift_page_view_class_button": "Return to Book",
   "nft_book_hero_replay_animation_button": "Replay Animation",
   "nft_book_hero_skip_animation_button": "Skip Animation",
   "nft_book_shelf_multiple_nft_class_dialog_title": "Please select a version",
   "nft_claim_access_nft_book": "Proceed",
   "nft_claim_claim": "Proceed",
   "nft_claim_claimed": "NFT is claimed",
+  "nft_claim_claimed_gift_title": "This book was selected by {name} as a special gift for you, hope you like it!",
+  "nft_claim_claimed_gift_toName": "To {name}:",
+  "nft_claim_claimed_gift_fromName": "—— {name}",
+  "nft_claim_claimed_download": "Or just download the eBook?",
   "nft_claim_claimed_nft_book": "You have successfully completed the required verification to claim your eBook. Please await the addition of the creator's digital signature or personalized message, after which the eBook will be delivered to you. Thank you for your valued support!",
   "nft_claim_claimed_retry_button": "Try Again",
   "nft_claim_claimed_view_button": "View Collected",
@@ -461,6 +479,7 @@
   "nft_edition_label": "Edition",
   "nft_edition_select_compare_button_text": "Compare editions",
   "nft_edition_select_confirm_button_text_collect": "Collect",
+  "nft_edition_select_confirm_button_text_gift": "Gift",
   "nft_edition_select_confirm_button_text_purchase": "Purchase",
   "nft_edition_select_notify_button_text": "Notify when available",
   "nft_featured_likenft126qja5m48w4gtz0e84w4fpsew3z0dfpqkncxc6we5x7qk2jgcuxsrz2mtk_description": "The GPT language model will fundamentally change the writing habits of the future, which will undoubtedly impact literature, which is based on language. Writers and lovers of literature are thus forced to rethink \"what is literature\" and attempt to define its uniqueness by focusing on what AI cannot do, but...",

diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
@@ -337,19 +337,37 @@
     "委託 LikeCoin"
   ],
   "month": "月",
+  "nft_book_gift_dialog_title": "贈送電子書",
+  "nft_book_gift_dialog_description": "贈送電子書給親朋好友，分享閲讀的喜悦。",
+  "nft_book_gift_dialog_label_from_name": "署名",
+  "nft_book_gift_dialog_label_message": "給收禮者的信息",
+  "nft_book_gift_dialog_label_submit": "發送",
+  "nft_book_gift_dialog_label_to_email": "收禮者的電郵地址",
+  "nft_book_gift_dialog_label_to_name": "收禮者的名字",
+  "nft_book_gift_dialog_placeholder_from_name": "祝英台",
+  "nft_book_gift_dialog_placeholder_message": "推薦這本書給你！",
+  "nft_book_gift_dialog_placeholder_to_email": "[email protected]",
+  "nft_book_gift_dialog_placeholder_to_name": "梁山伯",
+  "nft_book_gift_page_description_0": "你的電子書禮物已經經電郵發送。收件人領取電子書後將會有電郵通知你。",
+  "nft_book_gift_page_description_1": "感謝你分享閲讀的喜悦。",
+  "nft_book_gift_page_view_class_button": "返回書頁",
   "nft_book_hero_replay_animation_button": "重播動畫",
   "nft_book_hero_skip_animation_button": "略過動畫",
   "nft_book_shelf_multiple_nft_class_dialog_title": "請選擇版本",
   "nft_claim_access_nft_book": "下一步",
   "nft_claim_claim": "下一步",
   "nft_claim_claimed": "已領取 NFT",
+  "nft_claim_claimed_gift_title": "這本書籍是由 {name} 精心挑選，特別贈送給你的，希望你會喜歡！",
+  "nft_claim_claimed_gift_toName": "給 {name} :",
+  "nft_claim_claimed_gift_fromName": "—— {name}",
+  "nft_claim_claimed_download": "想先睹為快？",
   "nft_claim_claimed_nft_book": "已完成驗證。請候作者簽署及發送電子書，大約需 1-3 天時間。感謝支持！",
   "nft_claim_claimed_retry_button": "再試一次",
   "nft_claim_claimed_view_button": "檢視收藏",
   "nft_claim_claimed_view_class_button": "檢視詳情",
   "nft_claim_claiming": "正在驗證",
   "nft_claim_class_not_found": "找不到 NFT Class",
-  "nft_claim_enter_address_label": "輸入錢包地址以加進書架",
+  "nft_claim_enter_address_label": "輸入錢包地址以將這本書加進書架",
   "nft_claim_enter_address_placeholder": "like1.... 或登入以獲取地址",
   "nft_claim_error_message": "加進書架時出現錯誤：{error}",
   "nft_claim_error_message_unknown": "加進書架時出現不明錯誤",
@@ -462,6 +480,7 @@
   "nft_edition_select_compare_button_text": "比較不同版本",
   "nft_edition_select_confirm_button_text_collect": "收集",
   "nft_edition_select_confirm_button_text_purchase": "購買",
+  "nft_edition_select_confirm_button_text_gift": "送書",
   "nft_edition_select_notify_button_text": "有貨時通知我",
   "nft_featured_likenft126qja5m48w4gtz0e84w4fpsew3z0dfpqkncxc6we5x7qk2jgcuxsrz2mtk_description": "GPT語言模型將會徹底改變未來的書寫習慣，這對以語言為本體的文學肯定會造成衝擊。 文學創作者和愛好者也因此被迫重新思考「文學是甚麼」，嘗試以AI做不到的事情來定義文學的獨特之處，但是……",
   "nft_featured_likenft126qja5m48w4gtz0e84w4fpsew3z0dfpqkncxc6we5x7qk2jgcuxsrz2mtk_title": "AI與文學究竟是對立，還是共生？🤖",