diff --git a/messages/en-US.json b/messages/en-US.json index 09b8734d..585feea8 100644 --- a/messages/en-US.json +++ b/messages/en-US.json @@ -1839,7 +1839,7 @@ "companyPhoneNumber": "Company phone number", "country": "Country", "phoneNumberOptional": "Phone number (optional)", - "complianceConfirmation": "I confirm that I am in compliance with the Fossorial Commercial License and that reporting inaccurate information or misidentifying use of the product is a violation of the license." + "complianceConfirmation": "I confirm that the information I provided is accurate and that I am in compliance with the Fossorial Commercial License. Reporting inaccurate information or misidentifying use of the product is a violation of the license and may result in your key getting revoked." }, "buttons": { "close": "Close", diff --git a/src/components/GenerateLicenseKeyForm.tsx b/src/components/GenerateLicenseKeyForm.tsx index 17d593c0..6cc17fe6 100644 --- a/src/components/GenerateLicenseKeyForm.tsx +++ b/src/components/GenerateLicenseKeyForm.tsx @@ -36,7 +36,7 @@ import { useTranslations } from "next-intl"; import React from "react"; import { StrategySelect, StrategyOption } from "./StrategySelect"; import { Alert, AlertDescription, AlertTitle } from "./ui/alert"; -import { InfoIcon, Check } from "lucide-react"; +import { InfoIcon, Check, Loader2 } from "lucide-react"; import { useUserContext } from "@app/hooks/useUserContext"; type FormProps = { @@ -58,342 +58,72 @@ export default function GenerateLicenseKeyForm({ const { user } = useUserContext(); - const [currentStep, setCurrentStep] = useState(1); const [loading, setLoading] = useState(false); const [generatedKey, setGeneratedKey] = useState(null); - const [formKey, setFormKey] = useState(0); - // Step 1: Email & License Type - const step1Schema = z.object({ - email: z - .string() - .email(t("generateLicenseKeyForm.validation.emailRequired")), - useCaseType: z.enum(["personal", "business"], { - required_error: t( - "generateLicenseKeyForm.validation.useCaseTypeRequired" - ) - }) + // Personal form schema + const personalFormSchema = z.object({ + email: z.string().email(), + firstName: z.string().min(1), + lastName: z.string().min(1), + primaryUse: z.string().min(1), + stateProvinceRegion: z.string().min(1), + postalZipCode: z.string().min(1), + country: z.string().min(1), + phoneNumber: z.string().optional(), + agreedToTerms: z.boolean().refine((val) => val === true), + complianceConfirmed: z.boolean().refine((val) => val === true) }); - // Step 2: Personal Information - const createStep2Schema = (useCaseType: string | undefined) => - z - .object({ - firstName: z - .string() - .min( - 1, - t("generateLicenseKeyForm.validation.firstNameRequired") - ), - lastName: z - .string() - .min( - 1, - t("generateLicenseKeyForm.validation.lastNameRequired") - ), - jobTitle: z.string().optional(), - primaryUse: z - .string() - .min( - 1, - t( - "generateLicenseKeyForm.validation.primaryUseRequired" - ) - ), - industry: z.string().optional(), - prospectiveUsers: z.coerce.number().optional(), - prospectiveSites: z.coerce.number().optional() - }) - .refine( - (data) => { - // If business use case, job title is required - if (useCaseType === "business") { - return data.jobTitle; - } - return true; - }, - { - message: t( - "generateLicenseKeyForm.validation.jobTitleRequiredBusiness" - ), - path: ["jobTitle"] - } - ) - .refine( - (data) => { - // If business use case, industry is required - if (useCaseType === "business") { - return data.industry; - } - return true; - }, - { - message: t( - "generateLicenseKeyForm.validation.industryRequiredBusiness" - ), - path: ["industry"] - } - ); - - // Step 3: Contact Information - const createStep3Schema = (useCaseType: string | undefined) => - z - .object({ - stateProvinceRegion: z - .string() - .min( - 1, - t( - "generateLicenseKeyForm.validation.stateProvinceRegionRequired" - ) - ), - postalZipCode: z - .string() - .min( - 1, - t( - "generateLicenseKeyForm.validation.postalZipCodeRequired" - ) - ), - country: z.string().optional(), - phoneNumber: z.string().optional(), - companyName: z.string().optional(), - countryOfResidence: z.string().optional(), - companyWebsite: z.string().optional(), - companyPhoneNumber: z.string().optional() - }) - .refine( - (data) => { - // If business use case, company name is required - if (useCaseType === "business") { - return data.companyName; - } - return true; - }, - { - message: t( - "generateLicenseKeyForm.validation.companyNameRequiredBusiness" - ), - path: ["companyName"] - } - ) - .refine( - (data) => { - // If business use case, country of residence is required - if (useCaseType === "business") { - return data.countryOfResidence; - } - return true; - }, - { - message: t( - "generateLicenseKeyForm.validation.countryOfResidenceRequiredBusiness" - ), - path: ["countryOfResidence"] - } - ) - .refine( - (data) => { - // If personal use case, country is required - if (useCaseType === "personal" && !data.country) { - return false; - } - return true; - }, - { - message: t( - "generateLicenseKeyForm.validation.countryRequiredPersonal" - ), - path: ["country"] - } - ); - - // Step 4: Terms & Generate - const step4Schema = z.object({ - agreedToTerms: z - .boolean() - .refine( - (val) => val === true, - t("generateLicenseKeyForm.validation.agreeToTermsRequired") - ), - complianceConfirmed: z - .boolean() - .refine( - (val) => val === true, - t("generateLicenseKeyForm.validation.complianceConfirmationRequired") - ) - }); - - // Complete form schema for final submission with conditional validation - const createFormSchema = (useCaseType: string | undefined) => - z - .object({ - email: z.string().email("Please enter a valid email address"), - useCaseType: z.enum(["personal", "business"]), - firstName: z.string().min(1, "First name is required"), - lastName: z.string().min(1, "Last name is required"), - jobTitle: z.string().optional(), - primaryUse: z - .string() - .min(1, "Please describe your primary use"), - industry: z.string().optional(), - prospectiveUsers: z.coerce.number().optional(), - prospectiveSites: z.coerce.number().optional(), - stateProvinceRegion: z - .string() - .min( - 1, - t( - "generateLicenseKeyForm.validation.stateProvinceRegionRequired" - ) - ), - postalZipCode: z - .string() - .min( - 1, - t( - "generateLicenseKeyForm.validation.postalZipCodeRequired" - ) - ), - country: z.string().optional(), - phoneNumber: z.string().optional(), - companyName: z.string().optional(), - countryOfResidence: z.string().optional(), - companyWebsite: z.string().optional(), - companyPhoneNumber: z.string().optional(), - agreedToTerms: z - .boolean() - .refine( - (val) => val === true, - t( - "generateLicenseKeyForm.validation.agreeToTermsRequired" - ) - ), - complianceConfirmed: z - .boolean() - .refine( - (val) => val === true, - t("generateLicenseKeyForm.validation.complianceConfirmationRequired") - ) - }) - .refine( - (data) => { - // If business use case, job title is required - if (useCaseType === "business") { - return data.jobTitle; - } - return true; - }, - { - message: t( - "generateLicenseKeyForm.validation.jobTitleRequiredBusiness" - ), - path: ["jobTitle"] - } - ) - .refine( - (data) => { - // If business use case, industry is required - if (useCaseType === "business") { - return data.industry; - } - return true; - }, - { - message: t( - "generateLicenseKeyForm.validation.industryRequiredBusiness" - ), - path: ["industry"] - } - ) - .refine( - (data) => { - // If business use case, company name is required - if (useCaseType === "business") { - return data.companyName; - } - return true; - }, - { - message: t( - "generateLicenseKeyForm.validation.companyNameRequiredBusiness" - ), - path: ["companyName"] - } - ) - .refine( - (data) => { - // If business use case, country of residence is required - if (useCaseType === "business") { - return data.countryOfResidence; - } - return true; - }, - { - message: t( - "generateLicenseKeyForm.validation.countryOfResidenceRequiredBusiness" - ), - path: ["countryOfResidence"] - } - ) - .refine( - (data) => { - // If personal use case, country is required - if (useCaseType === "personal") { - return data.country; - } - return true; - }, - { - message: t( - "generateLicenseKeyForm.validation.countryRequiredPersonal" - ), - path: ["country"] - } - ); - - type FormData = z.infer>; - - // Base schema for form initialization (without conditional validation) - const baseFormSchema = z.object({ - email: z.string().email("Please enter a valid email address"), - useCaseType: z.enum(["personal", "business"]), - firstName: z.string().min(1, "First name is required"), - lastName: z.string().min(1, "Last name is required"), - jobTitle: z.string().optional(), - primaryUse: z.string().min(1, "Please describe your primary use"), - industry: z.string().optional(), + // Business form schema + const businessFormSchema = z.object({ + email: z.string().email(), + firstName: z.string().min(1), + lastName: z.string().min(1), + jobTitle: z.string().min(1), + primaryUse: z.string().min(1), + industry: z.string().min(1), prospectiveUsers: z.coerce.number().optional(), prospectiveSites: z.coerce.number().optional(), - stateProvinceRegion: z - .string() - .min(1, "State/Province/Region is required"), - postalZipCode: z.string().min(1, "Postal/ZIP Code is required"), - country: z.string().optional(), - phoneNumber: z.string().optional(), - companyName: z.string().optional(), - countryOfResidence: z.string().optional(), + companyName: z.string().min(1), + countryOfResidence: z.string().min(1), + stateProvinceRegion: z.string().min(1), + postalZipCode: z.string().min(1), companyWebsite: z.string().optional(), companyPhoneNumber: z.string().optional(), - agreedToTerms: z - .boolean() - .refine( - (val) => val === true, - t("generateLicenseKeyForm.validation.agreeToTermsRequired") - ), - complianceConfirmed: z - .boolean() - .refine( - (val) => val === true, - t("generateLicenseKeyForm.validation.complianceConfirmationRequired") - ) + agreedToTerms: z.boolean().refine((val) => val === true), + complianceConfirmed: z.boolean().refine((val) => val === true) }); - const form = useForm({ - resolver: zodResolver(baseFormSchema), + type PersonalFormData = z.infer; + type BusinessFormData = z.infer; + + const [useCaseType, setUseCaseType] = useState( + undefined + ); + + // Personal form + const personalForm = useForm({ + resolver: zodResolver(personalFormSchema), + defaultValues: { + email: user?.email || "", + firstName: "", + lastName: "", + primaryUse: "", + stateProvinceRegion: "", + postalZipCode: "", + country: "", + phoneNumber: "", + agreedToTerms: false, + complianceConfirmed: false + } + }); + + // Business form + const businessForm = useForm({ + resolver: zodResolver(businessFormSchema), defaultValues: { email: user?.email || "", - useCaseType: undefined, firstName: "", lastName: "", jobTitle: "", @@ -401,12 +131,10 @@ export default function GenerateLicenseKeyForm({ industry: "", prospectiveUsers: undefined, prospectiveSites: undefined, - stateProvinceRegion: "", - postalZipCode: "", - country: "", - phoneNumber: "", companyName: "", countryOfResidence: "", + stateProvinceRegion: "", + postalZipCode: "", companyWebsite: "", companyPhoneNumber: "", agreedToTerms: false, @@ -414,62 +142,47 @@ export default function GenerateLicenseKeyForm({ } }); - const useCaseType = form.watch("useCaseType"); - const [previousUseCaseType, setPreviousUseCaseType] = useState< - string | undefined - >(undefined); - - // Reset form when use case type changes - React.useEffect(() => { - if ( - useCaseType !== previousUseCaseType && - useCaseType && - previousUseCaseType - ) { - // Reset fields that are specific to use case type - form.setValue("jobTitle", ""); - form.setValue("prospectiveUsers", undefined); - form.setValue("prospectiveSites", undefined); - form.setValue("companyName", ""); - form.setValue("countryOfResidence", ""); - form.setValue("companyWebsite", ""); - form.setValue("companyPhoneNumber", ""); - form.setValue("phoneNumber", ""); - form.setValue("country", ""); - - setPreviousUseCaseType(useCaseType); - } - }, [useCaseType, previousUseCaseType, form]); - // Reset form when dialog opens React.useEffect(() => { if (open) { - form.reset({ - email: user?.email || "", - useCaseType: undefined, - firstName: "", - lastName: "", - jobTitle: "", - primaryUse: "", - industry: "", - prospectiveUsers: undefined, - prospectiveSites: undefined, - stateProvinceRegion: "", - postalZipCode: "", - country: "", - phoneNumber: "", - companyName: "", - countryOfResidence: "", - companyWebsite: "", - companyPhoneNumber: "", - agreedToTerms: false, - complianceConfirmed: false - }); - setCurrentStep(1); + resetForm(); setGeneratedKey(null); - setPreviousUseCaseType(undefined); } - }, [open, form, user?.email]); + }, [open]); + + function resetForm() { + personalForm.reset({ + email: user?.email || "", + firstName: "", + lastName: "", + primaryUse: "", + stateProvinceRegion: "", + postalZipCode: "", + country: "", + phoneNumber: "", + agreedToTerms: false, + complianceConfirmed: false + }); + + businessForm.reset({ + email: user?.email || "", + firstName: "", + lastName: "", + jobTitle: "", + primaryUse: "", + industry: "", + prospectiveUsers: undefined, + prospectiveSites: undefined, + companyName: "", + countryOfResidence: "", + stateProvinceRegion: "", + postalZipCode: "", + companyWebsite: "", + companyPhoneNumber: "", + agreedToTerms: false, + complianceConfirmed: false + }); + } const useCaseOptions: StrategyOption<"personal" | "business">[] = [ { @@ -540,161 +253,9 @@ export default function GenerateLicenseKeyForm({ } ]; - const steps = [ - { - title: t("generateLicenseKeyForm.steps.emailLicenseType.title"), - description: t( - "generateLicenseKeyForm.steps.emailLicenseType.description" - ) - }, - { - title: t("generateLicenseKeyForm.steps.personalInformation.title"), - description: t( - "generateLicenseKeyForm.steps.personalInformation.description" - ) - }, - { - title: t("generateLicenseKeyForm.steps.contactInformation.title"), - description: t( - "generateLicenseKeyForm.steps.contactInformation.description" - ) - }, - { - title: t("generateLicenseKeyForm.steps.termsGenerate.title"), - description: t( - "generateLicenseKeyForm.steps.termsGenerate.description" - ) - } - ]; - - const nextStep = async () => { - let isValid = false; - - try { - // Validate current step based on step number - switch (currentStep) { - case 1: - await step1Schema.parseAsync(form.getValues()); - isValid = true; - break; - case 2: - await createStep2Schema( - form.getValues("useCaseType") - ).parseAsync(form.getValues()); - isValid = true; - break; - case 3: - await createStep3Schema( - form.getValues("useCaseType") - ).parseAsync(form.getValues()); - isValid = true; - break; - case 4: - await step4Schema.parseAsync(form.getValues()); - isValid = true; - break; - default: - isValid = false; - } - } catch (error) { - if (error instanceof z.ZodError) { - // Set form errors for the current step fields - error.errors.forEach((err) => { - const fieldName = err.path[0] as keyof FormData; - form.setError(fieldName, { - type: "manual", - message: err.message - }); - }); - } - return; - } - - if (isValid && currentStep < steps.length) { - setCurrentStep(currentStep + 1); - } - }; - - const prevStep = () => { - if (currentStep > 1) { - setCurrentStep(currentStep - 1); - } - }; - - const onSubmit = async (values: FormData) => { - // Validate with the dynamic schema before submission - try { - await createFormSchema(values.useCaseType).parseAsync(values); - } catch (error) { - if (error instanceof z.ZodError) { - // Set form errors for any validation failures - error.errors.forEach((err) => { - const fieldName = err.path[0] as keyof FormData; - form.setError(fieldName, { - type: "manual", - message: err.message - }); - }); - return; - } - } - + const submitLicenseRequest = async (payload: any) => { setLoading(true); try { - const payload = { - email: values.email, - useCaseType: values.useCaseType, - personal: - values.useCaseType === "personal" - ? { - firstName: values.firstName, - lastName: values.lastName, - aboutYou: { - primaryUse: values.primaryUse - }, - personalInfo: { - stateProvinceRegion: - values.stateProvinceRegion, - postalZipCode: values.postalZipCode, - country: values.country, - phoneNumber: values.phoneNumber || "" - } - } - : undefined, - business: - values.useCaseType === "business" - ? { - firstName: values.firstName, - lastName: values.lastName, - jobTitle: values.jobTitle || "", - aboutYou: { - primaryUse: values.primaryUse, - industry: values.industry, - prospectiveUsers: - values.prospectiveUsers || undefined, - prospectiveSites: - values.prospectiveSites || undefined - }, - companyInfo: { - companyName: values.companyName || "", - countryOfResidence: - values.countryOfResidence || "", - stateProvinceRegion: - values.stateProvinceRegion, - postalZipCode: values.postalZipCode, - companyWebsite: values.companyWebsite || "", - companyPhoneNumber: - values.companyPhoneNumber || "" - } - } - : undefined, - consent: { - agreedToTerms: values.agreedToTerms, - acknowledgedPrivacyPolicy: values.agreedToTerms, - complianceConfirmed: values.complianceConfirmed - } - }; - const response = await api.put< AxiosResponse >(`/org/${orgId}/license`, payload); @@ -724,546 +285,72 @@ export default function GenerateLicenseKeyForm({ setLoading(false); }; - const handleClose = () => { - setOpen(false); - setCurrentStep(1); - setGeneratedKey(null); - setFormKey((prev) => prev + 1); // Force form reset by changing key - form.reset({ - email: user?.email || "", - useCaseType: undefined, - firstName: "", - lastName: "", - jobTitle: "", - primaryUse: "", - industry: "", - prospectiveUsers: undefined, - prospectiveSites: undefined, - stateProvinceRegion: "", - postalZipCode: "", - country: "", - phoneNumber: "", - companyName: "", - countryOfResidence: "", - companyWebsite: "", - companyPhoneNumber: "", - agreedToTerms: false, - complianceConfirmed: false - }); + const onSubmitPersonal = async (values: PersonalFormData) => { + const payload = { + email: values.email, + useCaseType: "personal", + personal: { + firstName: values.firstName, + lastName: values.lastName, + aboutYou: { + primaryUse: values.primaryUse + }, + personalInfo: { + stateProvinceRegion: values.stateProvinceRegion, + postalZipCode: values.postalZipCode, + country: values.country, + phoneNumber: values.phoneNumber || "" + } + }, + business: undefined, + consent: { + agreedToTerms: values.agreedToTerms, + acknowledgedPrivacyPolicy: values.agreedToTerms, + complianceConfirmed: values.complianceConfirmed + } + }; + + await submitLicenseRequest(payload); }; - const renderStepContent = () => { - switch (currentStep) { - case 1: - return ( -
- - - - {t( - "generateLicenseKeyForm.alerts.commercialUseDisclosure.title" - )} - - - {t( - "generateLicenseKeyForm.alerts.commercialUseDisclosure.description" - ).split("Fossorial Commercial License Terms").map((part, index) => ( - - {part} - {index === 0 && ( - - Fossorial Commercial License Terms - - )} - - ))} - - + const onSubmitBusiness = async (values: BusinessFormData) => { + const payload = { + email: values.email, + useCaseType: "business", + personal: undefined, + business: { + firstName: values.firstName, + lastName: values.lastName, + jobTitle: values.jobTitle, + aboutYou: { + primaryUse: values.primaryUse, + industry: values.industry, + prospectiveUsers: values.prospectiveUsers || undefined, + prospectiveSites: values.prospectiveSites || undefined + }, + companyInfo: { + companyName: values.companyName, + countryOfResidence: values.countryOfResidence, + stateProvinceRegion: values.stateProvinceRegion, + postalZipCode: values.postalZipCode, + companyWebsite: values.companyWebsite || "", + companyPhoneNumber: values.companyPhoneNumber || "" + } + }, + consent: { + agreedToTerms: values.agreedToTerms, + acknowledgedPrivacyPolicy: values.agreedToTerms, + complianceConfirmed: values.complianceConfirmed + } + }; - ( - - - {t( - "generateLicenseKeyForm.form.useCaseQuestion" - )} - - { - field.onChange(value); - // Reset form when use case type changes - form.reset({ - email: user?.email || "", - useCaseType: value, - firstName: "", - lastName: "", - jobTitle: "", - primaryUse: "", - industry: "", - prospectiveUsers: undefined, - prospectiveSites: undefined, - stateProvinceRegion: "", - postalZipCode: "", - country: "", - phoneNumber: "", - companyName: "", - countryOfResidence: "", - companyWebsite: "", - companyPhoneNumber: "", - agreedToTerms: false, - complianceConfirmed: false - }); - }} - cols={2} - /> - - - )} - /> -
- ); + await submitLicenseRequest(payload); + }; - case 2: - return ( -
-
- ( - - - {t( - "generateLicenseKeyForm.form.firstName" - )} - - - - - - - )} - /> - - ( - - - {t( - "generateLicenseKeyForm.form.lastName" - )} - - - - - - - )} - /> -
- - {useCaseType === "business" && ( - ( - - - {t( - "generateLicenseKeyForm.form.jobTitle" - )} - - - - - - - )} - /> - )} - -
- ( - - - {t( - "generateLicenseKeyForm.form.primaryUseQuestion" - )} - - - - - - - )} - /> - - {useCaseType === "business" && ( - <> - ( - - - {t( - "generateLicenseKeyForm.form.industryQuestion" - )} - - - - - - - )} - /> - - ( - - - {t( - "generateLicenseKeyForm.form.prospectiveUsersQuestion" - )} - - - - - - - )} - /> - - ( - - - {t( - "generateLicenseKeyForm.form.prospectiveSitesQuestion" - )} - - - - - - - )} - /> - - )} -
-
- ); - - case 3: - return ( -
- {useCaseType === "business" && ( -
- ( - - - {t( - "generateLicenseKeyForm.form.companyName" - )} - - - - - - - )} - /> - - ( - - - {t( - "generateLicenseKeyForm.form.countryOfResidence" - )} - - - - - - - )} - /> - -
- ( - - - {t( - "generateLicenseKeyForm.form.stateProvinceRegion" - )} - - - - - - - )} - /> - - ( - - - {t( - "generateLicenseKeyForm.form.postalZipCode" - )} - - - - - - - )} - /> -
- -
- ( - - - {t( - "generateLicenseKeyForm.form.companyWebsite" - )} - - - - - - - )} - /> - - ( - - - {t( - "generateLicenseKeyForm.form.companyPhoneNumber" - )} - - - - - - - )} - /> -
-
- )} - - {useCaseType === "personal" && ( -
-
- ( - - - {t( - "generateLicenseKeyForm.form.stateProvinceRegion" - )} - - - - - - - )} - /> - - ( - - - {t( - "generateLicenseKeyForm.form.postalZipCode" - )} - - - - - - - )} - /> -
- -
- ( - - - {t( - "generateLicenseKeyForm.form.country" - )} - - - - - - - )} - /> - - ( - - - {t( - "generateLicenseKeyForm.form.phoneNumberOptional" - )} - - - - - - - )} - /> -
-
- )} -
- ); - - case 4: - return ( -
- ( - - - - -
- -
- {t("signUpTerms.IAgreeToThe")}{" "} - - {t( - "signUpTerms.termsOfService" - )}{" "} - - {t("signUpTerms.and")}{" "} - - {t( - "signUpTerms.privacyPolicy" - )} - -
-
- -
-
- )} - /> - - ( - - - - -
- -
- I confirm that I am in compliance with the{" "} - - Fossorial Commercial License - {" "} - and that reporting inaccurate information or misidentifying use of the product is a violation of the license. -
-
- -
-
- )} - /> -
- ); - - default: - return null; - } + const handleClose = () => { + setOpen(false); + setGeneratedKey(null); + resetForm(); }; return ( @@ -1272,40 +359,13 @@ export default function GenerateLicenseKeyForm({ {t("generateLicenseKey")} - {steps[currentStep - 1]?.description} + {t( + "generateLicenseKeyForm.steps.emailLicenseType.description" + )}
- {/* Progress indicator */} -
- {steps.map((step, index) => ( -
-
- {index + 1} -
- - {step.title} - -
- ))} -
- {generatedKey ? (
{useCaseType === "business" && ( @@ -1329,14 +389,713 @@ export default function GenerateLicenseKeyForm({ />
) : ( -
- - {renderStepContent()} -
- + <> + + + + {t( + "generateLicenseKeyForm.alerts.commercialUseDisclosure.title" + )} + + + {t( + "generateLicenseKeyForm.alerts.commercialUseDisclosure.description" + ) + .split( + "Fossorial Commercial License Terms" + ) + .map((part, index) => ( + + {part} + {index === 0 && ( + + Fossorial Commercial + License Terms + + )} + + ))} + + + +
+ +
+ { + setUseCaseType(value); + resetForm(); + }} + cols={2} + /> +
+
+ + {useCaseType === "personal" && ( +
+ +
+ ( + + + {t( + "generateLicenseKeyForm.form.firstName" + )} + + + + + + + )} + /> + + ( + + + {t( + "generateLicenseKeyForm.form.lastName" + )} + + + + + + + )} + /> +
+ + ( + + + {t( + "generateLicenseKeyForm.form.primaryUseQuestion" + )} + + + + + + + )} + /> + +
+
+ ( + + + {t( + "generateLicenseKeyForm.form.stateProvinceRegion" + )} + + + + + + + )} + /> + + ( + + + {t( + "generateLicenseKeyForm.form.postalZipCode" + )} + + + + + + + )} + /> +
+ +
+ ( + + + {t( + "generateLicenseKeyForm.form.country" + )} + + + + + + + )} + /> + + ( + + + {t( + "generateLicenseKeyForm.form.phoneNumberOptional" + )} + + + + + + + )} + /> +
+
+ +
+ ( + + + + +
+ +
+ {t( + "signUpTerms.IAgreeToThe" + )}{" "} + + {t( + "signUpTerms.termsOfService" + )}{" "} + + {t( + "signUpTerms.and" + )}{" "} + + {t( + "signUpTerms.privacyPolicy" + )} + +
+
+ +
+
+ )} + /> + + ( + + + + +
+ +
+ {t( + "generateLicenseKeyForm.form.complianceConfirmation" + )}{" "} + See + license + details:{" "} + + https://digpangolin.com/fcl.html + +
+
+ +
+
+ )} + /> +
+ + + )} + + {useCaseType === "business" && ( +
+ +
+ ( + + + {t( + "generateLicenseKeyForm.form.firstName" + )} + + + + + + + )} + /> + + ( + + + {t( + "generateLicenseKeyForm.form.lastName" + )} + + + + + + + )} + /> +
+ + ( + + + {t( + "generateLicenseKeyForm.form.jobTitle" + )} + + + + + + + )} + /> + + ( + + + {t( + "generateLicenseKeyForm.form.primaryUseQuestion" + )} + + + + + + + )} + /> + + ( + + + {t( + "generateLicenseKeyForm.form.industryQuestion" + )} + + + + + + + )} + /> + +
+ ( + + + {t( + "generateLicenseKeyForm.form.prospectiveUsersQuestion" + )} + + + + + + + )} + /> + + ( + + + {t( + "generateLicenseKeyForm.form.prospectiveSitesQuestion" + )} + + + + + + + )} + /> +
+ + ( + + + {t( + "generateLicenseKeyForm.form.companyName" + )} + + + + + + + )} + /> + + ( + + + {t( + "generateLicenseKeyForm.form.countryOfResidence" + )} + + + + + + + )} + /> + +
+ ( + + + {t( + "generateLicenseKeyForm.form.stateProvinceRegion" + )} + + + + + + + )} + /> + + ( + + + {t( + "generateLicenseKeyForm.form.postalZipCode" + )} + + + + + + + )} + /> +
+ +
+ ( + + + {t( + "generateLicenseKeyForm.form.companyWebsite" + )} + + + + + + + )} + /> + + ( + + + {t( + "generateLicenseKeyForm.form.companyPhoneNumber" + )} + + + + + + + )} + /> +
+ +
+ ( + + + + +
+ +
+ {t( + "signUpTerms.IAgreeToThe" + )}{" "} + + {t( + "signUpTerms.termsOfService" + )}{" "} + + {t( + "signUpTerms.and" + )}{" "} + + {t( + "signUpTerms.privacyPolicy" + )} + +
+
+ +
+
+ )} + /> + + ( + + + + +
+ +
+ {t( + "generateLicenseKeyForm.form.complianceConfirmation" + )}{" "} + See + license + details:{" "} + + https://digpangolin.com/fcl.html + +
+
+ +
+
+ )} + /> +
+ + + )} + )}
@@ -1347,42 +1106,30 @@ export default function GenerateLicenseKeyForm({ - {!generatedKey && ( - <> - {currentStep > 1 && ( - + {!generatedKey && useCaseType === "personal" && ( + + )} - {currentStep < steps.length ? ( - - ) : ( - + {!generatedKey && useCaseType === "business" && ( + )}