feat: Link card to profile #361
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <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> | ||
| <!-- v-html allow passing html entity like ’ --> | ||
| </div> | ||
| </section> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| props: { | ||
| title: { | ||
| type: String, | ||
| default: '', | ||
| }, | ||
| icon: { | ||
| type: String, | ||
| default: 'check-green', | ||
| }, | ||
| benefits: { | ||
| type: Array, | ||
| default() { | ||
| return [] | ||
| }, | ||
| }, | ||
| }, | ||
| } | ||
| </script> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| <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?" | ||
| icon="check-green" | ||
|
There was a problem hiding this comment. if it is already set by default, no need to overwrite it There was a problem hiding this comment. You are right, I had changed code |
||
| :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:[email protected]" | ||
| 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:[email protected]" | ||
| class="underline text-center text-sm font-bold py-2" | ||
| >Are you an Organizer?</a | ||
| > | ||
| <a | ||
| href="mailto:[email protected]" | ||
| class="underline text-center text-sm font-bold py-2" | ||
| >Are you an Artist?</a | ||
| > | ||
| </div> | ||
| </div> | ||
| </template> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,190 @@ | ||||||
| <template> | ||||||
| <div | ||||||
| v-if="!this.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"> | ||||||
| <img src="/img/brand.png" class="max-w-md m-auto" /> | ||||||
| <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/' + this.pageId" | ||||||
| :allow-guests="true" | ||||||
| label="Link your Profile" | ||||||
| class="w-64" | ||||||
| /> | ||||||
| </div> | ||||||
| </header> | ||||||
|
|
||||||
| <TBenefits | ||||||
| title="Power of VIP Cards" | ||||||
| icon="check-green" | ||||||
| :benefits="[ | ||||||
| 'Instant contact exchange', | ||||||
| 'Environmentally friendly', | ||||||
| 'Convenient and easy to use', | ||||||
| 'Affordable', | ||||||
| 'Don’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’s mobiles and start networking faster | ||||||
| </p> | ||||||
| </div> | ||||||
| </div> | ||||||
| </div> | ||||||
| </section> | ||||||
|
|
||||||
| <TBenefits | ||||||
| title="Premium Membership" | ||||||
| icon="check-green" | ||||||
| :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" | ||||||
| style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);" | ||||||
|
There was a problem hiding this comment. I changed it to use "shadow" tailwind class |
||||||
| /> | ||||||
| </a> | ||||||
| <a href="https://t.me/WeDanceTravel" target="_blank"> | ||||||
| <TIcon | ||||||
| name="telegram" | ||||||
| size="10" | ||||||
| class="rounded-full p-2" | ||||||
| style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);" | ||||||
| /> | ||||||
| </a> | ||||||
| <a href="https://twitter.com/WeDancePlatform" target="_blank"> | ||||||
| <TIcon | ||||||
| name="twitter" | ||||||
| size="10" | ||||||
| class="rounded-full p-2" | ||||||
| style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);" | ||||||
| /> | ||||||
| </a> | ||||||
| <a | ||||||
| href="https://www.facebook.com/people/WeDance/100079633097491/" | ||||||
| target="_blank" | ||||||
| > | ||||||
| <TIcon | ||||||
| name="facebook" | ||||||
| size="10" | ||||||
| class="rounded-full p-2" | ||||||
| style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);" | ||||||
| /> | ||||||
| </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 }) { | ||||||
| const { softUpdate } = useDoc('nfc-card') | ||||||
| let username = '' | ||||||
|
|
||||||
| let pageId = $nuxt.$route.params.landing | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
| // when page is loaded after signIn | ||||||
| if (pageId === undefined) { | ||||||
|
There was a problem hiding this comment. shorter:
Suggested change
There was a problem hiding this comment. To fix error "nuxt is not defined" I changed my implementation, so this code is outdated |
||||||
| // get pageId | ||||||
| let path = $nuxt.$route.query.target | ||||||
| path = path.split('/') | ||||||
| pageId = path[1] | ||||||
|
|
||||||
| // get user username | ||||||
| username = useAuth().username.value | ||||||
|
|
||||||
| // handle update database | ||||||
| softUpdate(pageId, { username }) | ||||||
|
|
||||||
| // redirect to user profile | ||||||
| redirect(302, `/${username}?tryPremium=true`) | ||||||
| } | ||||||
| const collection = await db | ||||||
| .collection('nfc-card') | ||||||
| .doc(pageId) | ||||||
| .get() | ||||||
| console.log(collection.data()) | ||||||
|
|
||||||
| let haveUsername = false | ||||||
| haveUsername = collection.data().username !== '' | ||||||
| // haveUsername = collection.data().username !== '' ? true : false | ||||||
|
|
||||||
| return { | ||||||
| haveUsername, | ||||||
| pageId, | ||||||
| } | ||||||
| }, | ||||||
| } | ||||||
| </script> | ||||||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <template> | ||
| <div> | ||
| nfc | ||
| </div> | ||
| </template> |
|
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
shorter:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I changed code, so it is shorter now