Merge pull request #69 from web3privacy/feat/add-nickname-to-create

feat: add nickname to create

components/Project/Create/Categories/BasicInfo.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import * as yup from 'yup'
+import ContactDialog from '../Components/ContactDialog.vue'
 import type { Project } from '~/types'
 
 const props = defineProps<{
@@ -14,6 +15,7 @@ const validationSchema = yup.object().shape({
   usecases: yup.array().of(yup.string()).required().min(1),
   ecosystems: yup.array().of(yup.string()).required().min(1),
   description: yup.string().required(),
+  nickname: yup.string().optional(),
 })
 
 const { validate, meta, resetForm } = useForm({
@@ -29,12 +31,17 @@ const month = ref(new Date(props.project?.product_launch_day || '').getMonth())
 const year = ref(new Date(props.project?.product_launch_day || '').getFullYear())
 const isDead = ref(props.project?.sunset || false)
 
+const addNickname = ref(false)
+const isOpen = ref(false)
+const nickname = ref('')
+
 resetForm({
   values: {
     categories: Array.isArray(props.project?.categories) ? props.project?.categories?.map(c => c.toLowerCase()) : [],
     usecases: Array.isArray(props.project?.usecases) ? props.project?.usecases?.map(u => u.toLowerCase()) : [],
     ecosystems: Array.isArray(props.project?.ecosystem) ? props.project?.ecosystem?.map(e => e.toLowerCase()) : [],
     description: props.project?.description || '',
+    nickname: props.project?.nickname || '',
   },
 })
 
@@ -56,6 +63,7 @@ function save() {
     ecosystem: ecosystems.value,
     description: description.value,
     product_launch_day: (year.value && month.value && day.value) ? new Date(year.value, month.value, day.value).toISOString() : undefined,
+    nickname: nickname.value || undefined,
     sunset: isDead.value,
   })
 }
@@ -121,6 +129,21 @@ and why should user use your project."
       lg="text-16px"
     >Other Information
     </span>
+    <div class="mt-4 flex items-center gap-2">
+      <input
+        v-model="addNickname"
+        type="checkbox"
+        class="w-6 h-6 border-2 border-app-bg-dark_grey accent-black cursor-pointer"
+        @change="isOpen = addNickname"
+      >
+      <label class="text-white text-sm">Add nickname (We collect this to track and reward our contributors in the future)</label>
+    </div>
+
+    <ContactDialog
+      v-model="isOpen"
+      @confirm="nickname = $event"
+    />
+
     <ProjectCreateComponentsToggle
       v-model="isDead"
       label="Sunset (project is dead)"

components/Project/Create/Components/ContactDialog.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import {
+  TransitionRoot,
+  TransitionChild,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/vue'
+
+const { modelValue } = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'confirm', nickname: string): void
+}>()
+
+const userInput = ref('')
+
+const closeDialog = () => {
+  emit('update:modelValue', false)
+}
+
+const handleConfirm = () => {
+  emit('confirm', userInput.value)
+  closeDialog()
+}
+</script>
+
+<template>
+  <TransitionRoot
+    appear
+    :show="modelValue"
+    as="template"
+  >
+    <Dialog
+      as="div"
+      class="relative z-10"
+      @close="closeDialog"
+    >
+      <TransitionChild
+        as="template"
+        enter="duration-300 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-200 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="fixed inset-0 bg-black/75" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-y-auto">
+        <div class="flex min-h-full items-center justify-center p-4">
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
+            <DialogPanel
+              class="w-full max-w-xl transform overflow-hidden border-app-white border-2px bg-black p-6 text-left align-middle shadow-xl transition-all flex flex-col gap-4"
+            >
+              <DialogTitle
+                as="h3"
+                class="text-lg font-medium leading-6 text-app-white"
+              >
+                Thanks for keeping Explorer up to date!
+              </DialogTitle>
+              <div class="mt-2 flex flex-col gap-4">
+                <p class=" text-sm text-app-text-white">
+                  Your changes will be published as a public PR on Web3Privacy Now GitHub repository and reviewed by our community.
+                </p>
+                <p class=" text-sm text-app-text-white">
+                  This could take up to 48 hours to process new informations and update project's profile.
+                </p>
+                <p class=" text-sm text-app-text-white">
+                  How can we contact you? (Optional)
+                </p>
+              </div>
+              <div class="mt-4">
+                <input
+                  v-model="userInput"
+                  type="text"
+                  placeholder="We collect this to track and reward our contributors in the future"
+                  class="w-full border border-2 border-app-bg-dark_grey p-2 text-app-white"
+                  bg-app-black
+                >
+              </div>
+              <div class="mt-4 flex flex-wrap gap-4">
+                <div class="w-full md:w-fit">
+                  <Button
+                    flex
+                    uppercase
+                    w-full
+                    border
+                    @click="closeDialog"
+                  >
+                    <span>cancel</span>
+                  </Button>
+                </div>
+                <div class="w-full md:w-fit">
+                  <Button
+                    flex
+                    uppercase
+                    w-full
+                    lg="flex-1 justify-center"
+                    inverted-color
+                    border
+                    @click="handleConfirm()"
+                  >
+                    <span>confirm changes</span>
+                  </Button>
+                </div>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>

types/project.ts

@@ -28,6 +28,7 @@ export interface Project {
   product_launch_day?: string
   project_phase?: string
   sunset: boolean
+  nickname?: string
   technology?: {
     type: string
     name?: string