Added condition for onchain data and adjusted required fields for pro…

…file editing modals (#257)

* Added condition for onchain data and adjusted required fields

* Updated tests and added ids

ui/components/forms/FormInput.tsx

@@ -1,4 +1,5 @@
 type FormInputProps = {
+  id?: string
   value: string | number | undefined
   onChange: any
   placeholder?: string
@@ -8,6 +9,7 @@ type FormInputProps = {
 }
 
 export default function FormInput({
+  id,
   type = 'text',
   placeholder,
   value,
@@ -19,6 +21,7 @@ export default function FormInput({
     <>
       {label && <p className="text-sm font-GoodTimes">{label}</p>}
       <input
+        id={id}
         type={type}
         placeholder={placeholder}
         className={`w-full p-2 border-2 dark:border-0 dark:bg-[#0f152f] rounded-sm ${className}`}

ui/components/layout/ConditionCheckbox.tsx

@@ -0,0 +1,44 @@
+export default function ConditionCheckbox({
+  label,
+  agreedToCondition,
+  setAgreedToCondition,
+}: any) {
+  return (
+    <div className="flex gap-2 items-center">
+      <label
+        className="relative flex items-center p-3 rounded-full cursor-pointer"
+        htmlFor="link"
+      >
+        <input
+          checked={agreedToCondition}
+          onChange={(e) => setAgreedToCondition(e.target.checked)}
+          type="checkbox"
+          className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-[#D7594F] transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-[#D7594F] checked:bg-gray-900 checked:before:bg-gray-900 hover:before:opacity-10"
+          id="link"
+        />
+        <span className="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-3.5 w-3.5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            stroke="currentColor"
+            strokeWidth="1"
+          >
+            <path
+              fillRule="evenodd"
+              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+              clipRule="evenodd"
+            ></path>
+          </svg>
+        </span>
+      </label>
+      <label
+        className="font-light text-gray-700  select-none max-w-[550px]"
+        htmlFor="link"
+      >
+        <p className="dark:text-white">{label}</p>
+      </label>
+    </div>
+  )
+}

ui/components/subscription/CitizenMetadataModal.tsx

@@ -15,6 +15,7 @@ import waitForResponse from '@/lib/typeform/waitForResponse'
 import { renameFile } from '@/lib/utils/files'
 import { getAttribute } from '@/lib/utils/nft'
 import FormInput from '../forms/FormInput'
+import ConditionCheckbox from '../layout/ConditionCheckbox'
 import Modal from '../layout/Modal'
 import { ImageGenerator } from '../onboarding/CitizenImageGenerator'
 import { PrivyWeb3Button } from '../privy/PrivyWeb3Button'
@@ -24,14 +25,16 @@ function CitizenMetadataForm({ citizenData, setCitizenData }: any) {
   return (
     <div className="w-full flex flex-col gap-2">
       <FormInput
-        label="Name"
+        id="citizen-name-input"
+        label="Name *"
         value={citizenData?.name}
         onChange={({ target }: any) =>
           setCitizenData((prev: any) => ({ ...prev, name: target.value }))
         }
         placeholder="Enter your name"
       />
       <FormInput
+        id="citizen-bio-input"
         label="Bio"
         value={citizenData?.description}
         onChange={({ target }: any) =>
@@ -43,14 +46,16 @@ function CitizenMetadataForm({ citizenData, setCitizenData }: any) {
         placeholder="Enter your bio"
       />
       <FormInput
+        id="citizen-location-input"
         label="Location"
         value={citizenData?.location}
         onChange={({ target }: any) =>
           setCitizenData((prev: any) => ({ ...prev, location: target.value }))
         }
-        placeholder="Enter your location"
+        placeholder="Enter your city and/or country"
       />
       <FormInput
+        id="citizen-discord-input"
         label="Discord"
         value={citizenData?.discord}
         onChange={({ target }: any) =>
@@ -59,6 +64,7 @@ function CitizenMetadataForm({ citizenData, setCitizenData }: any) {
         placeholder="Enter your discord username"
       />
       <FormInput
+        id="citizen-twitter-input"
         label="Twitter"
         value={citizenData?.twitter}
         onChange={({ target }: any) =>
@@ -67,6 +73,7 @@ function CitizenMetadataForm({ citizenData, setCitizenData }: any) {
         placeholder="Enter your twitter link"
       />
       <FormInput
+        id="citizen-website-input"
         label="Website"
         value={citizenData?.website}
         onChange={({ target }: any) =>
@@ -93,6 +100,7 @@ export default function CitizenMetadataModal({
   const [formResponseId, setFormResponseId] = useState<string>(
     getAttribute(nft?.metadata?.attributes, 'formId').value
   )
+  const [agreedToOnChainData, setAgreedToOnChainData] = useState(false)
 
   const { getAccessToken } = usePrivy()
 
@@ -243,18 +251,19 @@ export default function CitizenMetadataModal({
               citizenData={citizenData}
               setCitizenData={setCitizenData}
             />
+            <ConditionCheckbox
+              label="I acknowledge that this info will be stored permanently onchain."
+              agreedToCondition={agreedToOnChainData}
+              setAgreedToCondition={setAgreedToOnChainData}
+            />
             <PrivyWeb3Button
               className="mt-4 w-full gradient-2 rounded-[5vmax]"
               requiredChain={DEFAULT_CHAIN}
               label="Submit"
+              isDisabled={!agreedToOnChainData}
               action={async () => {
-                if (
-                  !citizenData.name ||
-                  citizenData.name.trim() === '' ||
-                  !citizenData.description ||
-                  citizenData.description.trim() === ''
-                ) {
-                  return toast.error('Please enter a name and bio.')
+                if (!citizenData.name || citizenData.name.trim() === '') {
+                  return toast.error('Please enter a name.')
                 }
 
                 const accessToken = await getAccessToken()

ui/components/subscription/TeamMetadataModal.tsx

@@ -15,6 +15,7 @@ import waitForResponse from '@/lib/typeform/waitForResponse'
 import { renameFile } from '@/lib/utils/files'
 import { getAttribute } from '@/lib/utils/nft'
 import FormInput from '../forms/FormInput'
+import ConditionCheckbox from '../layout/ConditionCheckbox'
 import Modal from '../layout/Modal'
 import { ImageGenerator } from '../onboarding/TeamImageGenerator'
 import { PrivyWeb3Button } from '../privy/PrivyWeb3Button'
@@ -24,14 +25,16 @@ function TeamMetadataForm({ teamData, setTeamData }: any) {
   return (
     <div className="w-full flex flex-col gap-2">
       <FormInput
-        label="Name"
+        id="team-name-input"
+        label="Name *"
         value={teamData.name}
         onChange={({ target }: any) =>
           setTeamData((prev: any) => ({ ...prev, name: target.value }))
         }
         placeholder="Enter your name"
       />
       <FormInput
+        id="team-bio-input"
         label="Bio"
         value={teamData.description}
         onChange={({ target }: any) =>
@@ -40,6 +43,7 @@ function TeamMetadataForm({ teamData, setTeamData }: any) {
         placeholder="Enter your bio"
       />
       <FormInput
+        id="team-twitter-input"
         label="Twitter"
         value={teamData.twitter}
         onChange={({ target }: any) =>
@@ -48,6 +52,7 @@ function TeamMetadataForm({ teamData, setTeamData }: any) {
         placeholder="Enter your twitter link"
       />
       <FormInput
+        id="team-communications-input"
         label="Communications"
         value={teamData.communications}
         onChange={({ target }: any) =>
@@ -59,6 +64,7 @@ function TeamMetadataForm({ teamData, setTeamData }: any) {
         placeholder="Enter your communications link"
       />
       <FormInput
+        id="team-website-input"
         label="Website"
         value={teamData.website}
         onChange={({ target }: any) =>
@@ -85,6 +91,7 @@ export default function TeamMetadataModal({
   const [formResponseId, setFormResponseId] = useState<string>(
     getAttribute(nft?.metadata?.attributes, 'formId').value
   )
+  const [agreedToOnChainData, setAgreedToOnChainData] = useState(false)
 
   const { getAccessToken } = usePrivy()
 
@@ -215,18 +222,19 @@ export default function TeamMetadataModal({
         {stage === 3 && (
           <>
             <TeamMetadataForm teamData={teamData} setTeamData={setTeamData} />
+            <ConditionCheckbox
+              label="I acknowledge that this info will be stored permanently onchain."
+              agreedToCondition={agreedToOnChainData}
+              setAgreedToCondition={setAgreedToOnChainData}
+            />
             <PrivyWeb3Button
               className="mt-4 w-full gradient-2 rounded-[5vmax]"
               requiredChain={DEFAULT_CHAIN}
               label="Submit"
+              isDisabled={!agreedToOnChainData}
               action={async () => {
-                if (
-                  !teamData.name ||
-                  teamData.name.trim() === '' ||
-                  !teamData.description ||
-                  teamData.description.trim() === ''
-                ) {
-                  return toast.error('Please enter a name and bio.')
+                if (!teamData.name || teamData.name.trim() === '') {
+                  return toast.error('Please enter a name.')
                 }
 
                 const accessToken = await getAccessToken()

ui/cypress/integration/layout/condition-checkbox.cy.tsx

@@ -0,0 +1,27 @@
+import ConditionCheckbox from '@/components/layout/ConditionCheckbox'
+
+describe('<ConditionCheckbox />', () => {
+  let props: any
+
+  beforeEach(() => {
+    props = {
+      label: 'Test Condition',
+      agreedToCondition: false,
+      setAgreedToCondition: cy.spy().as('setAgreedToCondition'),
+    }
+
+    cy.mount(<ConditionCheckbox {...props} />)
+  })
+
+  it('Renders with label and responds to clicks', () => {
+    cy.contains('Test Condition').should('be.visible')
+    cy.get('input[type="checkbox"]').should('not.be.checked')
+    cy.get('input[type="checkbox"]').click()
+    cy.get('@setAgreedToCondition').should('have.been.calledWith', true)
+  })
+
+  it('Renders correctly when initially checked', () => {
+    cy.mount(<ConditionCheckbox {...props} agreedToCondition={true} />)
+    cy.get('input[type="checkbox"]').should('be.checked')
+  })
+})

ui/cypress/integration/subscription/citizen-metadata-modal.cy.tsx

@@ -41,27 +41,21 @@ describe('<CitizenMetadataModal /> ', () => {
   it('Renders form inputs with correct initial values', () => {
     cy.get('button').contains('Next').click()
     cy.get('button').contains('No').click()
-    cy.get('input[placeholder="Enter your name"]').should(
-      'have.value',
-      nft.metadata.name
-    )
-    cy.get('input[placeholder="Enter your bio"]').should(
-      'have.value',
-      nft.metadata.description
-    )
-    cy.get('input[placeholder="Enter your location"]').should(
+    cy.get('#citizen-name-input').should('have.value', nft.metadata.name)
+    cy.get('#citizen-bio-input').should('have.value', nft.metadata.description)
+    cy.get('#citizen-location-input').should(
       'have.value',
       getAttribute(nft.metadata.attributes, 'location').value
     )
-    cy.get('input[placeholder="Enter your discord username"]').should(
+    cy.get('#citizen-discord-input').should(
       'have.value',
       getAttribute(nft.metadata.attributes, 'discord').value
     )
-    cy.get('input[placeholder="Enter your twitter link"]').should(
+    cy.get('#citizen-twitter-input').should(
       'have.value',
       getAttribute(nft.metadata.attributes, 'twitter').value
     )
-    cy.get('input[placeholder="Enter your website link"]').should(
+    cy.get('#citizen-website-input').should(
       'have.value',
       getAttribute(nft.metadata.attributes, 'website').value
     )

ui/cypress/integration/subscription/team-metadata-modal.cy.tsx

@@ -41,23 +41,17 @@ describe('<TeamMetadataModal /> ', () => {
   it('Renders form inputs with correct initial values', () => {
     cy.get('button').contains('Next').click()
     cy.get('button').contains('No').click()
-    cy.get('input[placeholder="Enter your name"]').should(
-      'have.value',
-      nft.metadata.name
-    )
-    cy.get('input[placeholder="Enter your bio"]').should(
-      'have.value',
-      nft.metadata.description
-    )
-    cy.get('input[placeholder="Enter your twitter link"]').should(
+    cy.get('#team-name-input').should('have.value', nft.metadata.name)
+    cy.get('#team-bio-input').should('have.value', nft.metadata.description)
+    cy.get('#team-twitter-input').should(
       'have.value',
       getAttribute(nft.metadata.attributes, 'twitter').value
     )
-    cy.get('input[placeholder="Enter your communications link"]').should(
+    cy.get('#team-communications-input').should(
       'have.value',
       getAttribute(nft.metadata.attributes, 'communications').value
     )
-    cy.get('input[placeholder="Enter your website link"]').should(
+    cy.get('#team-website-input').should(
       'have.value',
       getAttribute(nft.metadata.attributes, 'website').value
     )