feat: Link card to profile

components/TBenefits.vue

@@ -0,0 +1,28 @@
+<template>
+  <section class="px-3 m-auto pb-2">
+    <h2 class="text-3xl text-center font-extrabold mb-4">{{ title }}</h2>
+    <div v-for="(benefit, index) in benefits" :key="index" class="flex gap-2">
+      <TIcon :name="icon" class="grid content-center" />
+      <p class="text-lg my-1" v-html="benefit"></p>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: 'check-green',
+    },
+    benefits: {
+      type: Array,
+      default: () => [],
+    },
+  },
+}
+</script>

components/TPremium.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="relative top-10 max-w-sm pt-3 pb-4 font-sans tracking-tight mx-auto"
+  >
+    <section class="bg-gray-200 p-4 rounded-lg mb-3">
+      <div class="m-auto w-fit"><img src="img/gift.png" /></div>
+      <h1 class="text-3xl text-center font-extrabold">Try Premium</h1>
+      <p class="text-lg text-center py-3">
+        Invite 5 friends to get a card from your profile and get premium for
+        free for 1 month. Limited offer, 200 left!
+      </p>
+    </section>
+
+    <TBenefits
+      title="Why get Premium?"
+      :benefits="[
+        'Get special offers from organisers',
+        'Exclusive discounts',
+        'Access to online classes',
+      ]"
+      class="max-w-fit"
+    />
+
+    <section class="max-w-sm m-auto w-fit">
+      <TButton
+        href="mailto:support@wedance.vip"
+        type="primary"
+        label="Get Premium"
+        class="w-64"
+      />
+    </section>
+
+    <div class="w-fit m-auto my-4 flex flex-col gap-2">
+      <a
+        href="mailto:support@wedance.vip"
+        class="underline text-center text-sm font-bold py-2"
+        >Are you an Organizer?</a
+      >
+      <a
+        href="mailto:support@wedance.vip"
+        class="underline text-center text-sm font-bold py-2"
+        >Are you an Artist?</a
+      >
+    </div>
+  </div>
+</template>

components/TProfile.vue

@@ -1,5 +1,9 @@
 <template>
   <div>
+    <TPopup v-if="showPopup" title="Try Premium" @close="showPopup = false">
+      <TPremium />
+    </TPopup>
+
     <THeader>
       <TButton
         v-if="profile.type === 'City'"
@@ -308,6 +312,17 @@ export default {
       default: () => ({}),
     },
   },
+  data() {
+    return {
+      showPopup: false,
+    }
+  },
+  mounted() {
+    const query = this.$route.query
+    if (Object.prototype.hasOwnProperty.call(query, 'tryPremium')) {
+      this.showPopup = query.tryPremium
+    }
+  },
   head() {
     return getMeta('profiles', this.profile)
   },

pages/nfc/_id.vue

@@ -0,0 +1,158 @@
+<template>
+  <div
+    v-if="!haveUsername"
+    class="font-sans bg-white leading-normal tracking-tight antialiased min-h-screen flex flex-col mx-auto max-w-xl border-r border-l"
+  >
+    <header class="max-w-sm m-auto pt-8 pb-7 px-3">
+      <TIcon name="brand" class="flex justify-center" />
+      <h1 class="text-3xl text-center font-extrabold px-3 pt-4">
+        Share your social media instantly
+      </h1>
+      <img src="/img/screenshot.png" />
+      <p class="max-w-sm m-auto text-center px-3 pb-6 text-lg font-medium">
+        Turn a simple handshake into a lasting connection
+      </p>
+
+      <div class="max-w-max m-auto w-fit">
+        <TButton
+          type="primary"
+          :to="'/signin?target=nfc/' + pageId + '?updateUsername=true'"
+          :allow-guests="true"
+          label="Link your Profile"
+          class="w-64"
+        />
+      </div>
+    </header>
+
+    <TBenefits
+      title="Power of VIP Cards"
+      :benefits="[
+        'Instant contact exchange',
+        'Environmentally friendly',
+        'Convenient and easy to use',
+        'Affordable',
+        'Don&rsquo;t have space constraints',
+        'More secure',
+      ]"
+    />
+
+    <section class="bg-gray-200 p-4 mb-6">
+      <h2 class="text-3xl text-center font-extrabold p-3">How it works</h2>
+
+      <div class="max-w-md m-auto">
+        <div class="flex items-center">
+          <TIcon name="tap-card" />
+          <div class="ml-2">
+            <h3 class="text-slate-700 text-bold text-lg">Tap the card</h3>
+            <p class="text-gray-500 text-sm">
+              Tap your VIP Card on your own phone device
+            </p>
+          </div>
+        </div>
+
+        <img src="/img/divider.png" class="my-1" />
+
+        <div class="flex items-center">
+          <TIcon name="phone" />
+          <div class="ml-2">
+            <h3 class="text-slate-700 text-bold text-lg">
+              Create and link your profile
+            </h3>
+            <p class="text-gray-500 text-sm">
+              Sign-in and create your WeDance profile so it can be linked to
+              your VIP Card
+            </p>
+          </div>
+        </div>
+
+        <img src="/img/divider.png" class="my-1" />
+
+        <div class="flex items-center">
+          <TIcon name="card-network" />
+          <div class="ml-2">
+            <h3 class="text-slate-700 text-bold text-lg">Start networking</h3>
+            <p class="text-gray-500 text-sm">
+              Share your profile by tapping your VIP Card on other
+              people&rsquo;s mobiles and start networking faster
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <TBenefits
+      title="Premium Membership"
+      :benefits="[
+        'Get special offers from organisers',
+        'Exclusive discounts',
+        'Access to online classes',
+      ]"
+    />
+
+    <section class="max-w-md m-auto h-64 p-3 mt-8">
+      <h2 class="text-3xl text-center font-extrabold mb-2">Follow us</h2>
+      <p class="font-normal text-lg text-center">
+        We regularly post event announcements and introduce new members on our
+        social media.
+      </p>
+      <div class="max-w-md m-auto pb-16">
+        <div class="flex justify-center gap-3 pt-8">
+          <a href="https://www.instagram.com/WeDancePlatform/" target="_blank">
+            <TIcon name="instagram" size="10" class="rounded-full p-2 shadow" />
+          </a>
+          <a href="https://t.me/WeDanceTravel" target="_blank">
+            <TIcon name="telegram" size="10" class="rounded-full p-2 shadow" />
+          </a>
+          <a href="https://twitter.com/WeDancePlatform" target="_blank">
+            <TIcon name="twitter" size="10" class="rounded-full p-2 shadow" />
+          </a>
+          <a
+            href="https://www.facebook.com/people/WeDance/100079633097491/"
+            target="_blank"
+          >
+            <TIcon name="facebook" size="10" class="rounded-full p-2 shadow" />
+          </a>
+        </div>
+      </div>
+    </section>
+  </div>
+  <div v-else>
+    Page have username
+  </div>
+</template>
+
+<script>
+import { db } from '~/plugins/firebase'
+import { useDoc } from '~/use/doc'
+import { useAuth } from '~/use/auth'
+
+export default {
+  layout: 'empty',
+  async asyncData({ redirect, route }) {
+    const { softUpdate } = useDoc('nfc-card')
+    let username = ''
+
+    const pageId = route.params.id
+    if (Object.prototype.hasOwnProperty.call(route.query, 'updateUsername')) {
+      if (route.query.updateUsername) {
+        username = useAuth().username.value
+
+        softUpdate(pageId, { username })
+
+        redirect(302, `/${username}?tryPremium=true`)
+      }
+    }
+    const collection = await db
+      .collection('nfc-card')
+      .doc(pageId)
+      .get()
+
+    const haveUsername = collection.data().username !== ''
+
+    return {
+      haveUsername,
+      pageId,
+    }
+  },
+}
+</script>