+
+ {currentQuestion.group && currentQuestion.fields ? (
+ currentQuestion.fields.map((field) => {
+ let fieldInput;
+ if (field.name === "country") {
+ fieldInput = (
+ <>
+
countryOptions.includes(value) || "Please select a valid country." // Skip until all countries are listed
+ })}
+ defaultValue={getValues(field.name) || ""}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ nextStep();
+ }
+ }}
+ className="text-center text-lg py-3 px-5 h-14 rounded-full border w-72"
+ />
+
+
+ );
+ } else if (field.name === "zipCode") {
+ fieldInput = (
+
{
+ if (e.key === "Enter") {
+ e.preventDefault();
+ nextStep();
+ }
+ }}
+ className="text-center text-lg py-3 px-5 h-14 rounded-full border w-48"
+ />
+ );
+ } else {
+ fieldInput = (
+
{
+ if (e.key === "Enter") {
+ e.preventDefault();
+ nextStep();
+ }
+ }}
+ className="text-center text-lg py-3 px-5 h-14 rounded-full border"
+ />
+ );
+ }
+ return (
+
+
+ {fieldInput}
+ {errors[field.name] && (
+
{(errors[field.name] as any)?.message || "This field is required"}
+ )}
+
+ );
+ })
+ ) : currentQuestion.name === "birthday" ? (
+
+
+
+
+ {(() => {
+ const month = getValues("birthMonth");
+ const day = getValues("birthDay");
+ const year = getValues("birthYear");
+ const age = getAge(month, day, year);
+ if (age && age > 0 && age < 120) {
+ return You are {age}!;
+ }
+ return null;
+ })()}
+
+ ) : (currentQuestion.type === "select" && currentQuestion.options && currentQuestion.options.length <= 6) ? (
+
+ {currentQuestion.options.map((opt) => (
+
+ ))}
+
+ ) : (currentQuestion.type === "multiselect" && currentQuestion.options && currentQuestion.options.length <= 6) ? (
+
+ {currentQuestion.options.map((opt) => {
+ const selected = (formValues[currentQuestion.name] || []).includes(opt);
+ return (
+
+ );
+ })}
+
+ ) : currentQuestion.type === "slider" ? (
+
+ {currentQuestion.range && (
+
+ {currentQuestion.range[0]}
+
)}
-
- );
- })
- ) : currentQuestion.name === "birthday" ? (
-
-
-
-
- {(() => {
- const month = getValues("birthday_month");
- const day = getValues("birthday_day");
- const year = getValues("birthday_year");
- const age = getAge(month, day, year);
- if (age && age > 0 && age < 120) {
- return You are {age}!;
- }
- return null;
- })()}
-
- ) : (currentQuestion.type === "select" && currentQuestion.options && currentQuestion.options.length <= 6) ? (
-
- {currentQuestion.options.map((opt) => (
-
- ))}
-
- ) : (currentQuestion.type === "multiselect" && currentQuestion.options && currentQuestion.options.length <= 6) ? (
-
- {currentQuestion.options.map((opt) => {
- const selected = (formValues[currentQuestion.name] || []).includes(opt);
- return (
-
- );
- })}
-
- ) : currentQuestion.type === "select" ? (
-
- ) : currentQuestion.type === "multiselect" ? (
-
- // For a more advanced UI, consider using react-select's MultiSelect component
- ) : currentQuestion.type === "textarea" ? (
-
- ) : currentQuestion.type === "file" ? (
-
- ) : (currentQuestion.name === "genderOther") ? (
-
-
-
- {showGenderDefs && (
-
-
- - Agender: Individuals with no gender identity or a neutral gender identity.
- - Androgynous: Individuals with both male & female presentation or nature.
- - Bigender: Individuals who identify as multiple genders/identities, either simultaneously or at different times.
- - Cis Man: Individuals whose gender identity matches the male sex they were assigned at birth.
- - Cis Woman: Individuals whose gender identity matches the female sex they were assigned at birth.
- - Genderfluid: Individuals who don’t have a fixed gender identity.
- - Genderqueer: Individuals who don’t identify with binary gender identity norms.
- - Gender Nonconforming: Individuals whose gender expressions don’t match masculine & feminine gender norms.
- - Hijra: A third gender identity, largely used in the Indian subcontinent, which typically reflects people who were assigned male at birth, with feminine gender expression, who identify as neither male nor female.
- - Intersex: Individuals born with a reproductive or sexual anatomy that doesn’t fit the typical definitions of female or male.
- - Non-binary: A term covering any gender identity or expression that doesn’t fit within the gender binary.
- - Other gender: Individuals who identify with any other gender expressions.
- - Pangender: Individuals who identify with a wide multiplicity of gender identities.
- - Transfeminine: Transgender individuals whose gender expression is more feminine presenting.
- - Transgender: Individuals whose gender identity differs from the sex they were assigned at birth.
- - Trans Man: Individuals who were assigned female at birth (AFAB) but have a male gender identity.
- - Transmasculine: Transgender individuals whose gender expression is more masculine presenting.
- - Transsexual: This term is sometimes used to describe trans individuals (who do not identify with the sex they were assigned at birth) who wish to align their gender identity & sex through medical intervention.
- - Trans Woman: Individuals who were assigned male at birth (AMAB) but have a female gender identity.
- - Two Spirit: Term largely used in Indigenous, Native American, and First Nation cultures, reflecting individuals who identify with multiple genders/gender identities that are neither male nor female.
-
-
- )}
-
- ) : (
-
{
- if (e.key === "Enter") {
- e.preventDefault();
- nextStep();
- }
- }}
- className="text-center text-lg py-3 px-5 h-14 rounded-full border"
- />
- )}
- {errors[currentQuestion.name] &&
This field is required}
-