From e73b648a9569b9477503b23f6d7e453ca62300e4 Mon Sep 17 00:00:00 2001 From: ujiro99 Date: Tue, 8 Jul 2025 22:26:10 +0900 Subject: [PATCH 1/2] Add: Want to use to uninstall the survey. --- pages/src/components/UninstallForm.tsx | 212 ++++++++++++++++++------ pages/src/const.ts | 55 +++---- pages/src/features/locale/de.ts | 10 +- pages/src/features/locale/en.ts | 202 ++++++++++++----------- pages/src/features/locale/es.ts | 10 +- pages/src/features/locale/fr.ts | 10 +- pages/src/features/locale/hi.ts | 10 +- pages/src/features/locale/id.ts | 10 +- pages/src/features/locale/it.ts | 10 +- pages/src/features/locale/ja.ts | 216 +++++++++++++------------ pages/src/features/locale/ko.ts | 10 +- pages/src/features/locale/ms.ts | 10 +- pages/src/features/locale/pt_BR.ts | 10 +- pages/src/features/locale/pt_PT.ts | 10 +- pages/src/features/locale/ru.ts | 10 +- pages/src/features/locale/zh_CN.ts | 10 +- pages/src/types.ts | 2 + 17 files changed, 520 insertions(+), 287 deletions(-) diff --git a/pages/src/components/UninstallForm.tsx b/pages/src/components/UninstallForm.tsx index 66ca5dd2..cea4462a 100644 --- a/pages/src/components/UninstallForm.tsx +++ b/pages/src/components/UninstallForm.tsx @@ -1,19 +1,19 @@ -'use client' +"use client" -import { Button } from '@/components/ui/button' -import { Checkbox } from '@/components/ui/checkbox' -import { Textarea } from '@/components/ui/textarea' -import { Input } from '@/components/ui/input' -import { Image } from '@/components/Image' -import { useLocale } from '@/hooks/useLocale' -import { Send, SquareArrowOutUpRight } from 'lucide-react' -import { useState, useEffect } from 'react' -import type { UninstallFormType } from '@/types' -import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible' -import { UNINSTALL_OTHER_OPTION } from '@/const' -import { cn, sleep } from '@/lib/utils' +import { Button } from "@/components/ui/button" +import { Checkbox } from "@/components/ui/checkbox" +import { Textarea } from "@/components/ui/textarea" +import { Input } from "@/components/ui/input" +import { Image } from "@/components/Image" +import { useLocale } from "@/hooks/useLocale" +import { Send, SquareArrowOutUpRight } from "lucide-react" +import { useState, useEffect } from "react" +import type { UninstallFormType } from "@/types" +import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible" +import { UNINSTALL_OTHER_OPTION, OTHER_OPTION } from "@/const" +import { cn, sleep } from "@/lib/utils" -import css from './CommandForm.module.css' +import css from "./CommandForm.module.css" type UninstallReason = { id: string @@ -21,9 +21,9 @@ type UninstallReason = { } const SubmitStatus = { - IDLE: 'idle', - SUCCESS: 'success', - ERROR: 'error', + IDLE: "idle", + SUCCESS: "success", + ERROR: "error", } as const type SubmitStatusType = (typeof SubmitStatus)[keyof typeof SubmitStatus] @@ -31,8 +31,10 @@ type SubmitStatusType = (typeof SubmitStatus)[keyof typeof SubmitStatus] export function UninstallForm() { const { dict, lang } = useLocale() const [selectedReasons, setSelectedReasons] = useState([]) - const [details, setDetails] = useState('') - const [otherReason, setOtherReason] = useState('') + const [selectedWantedToUse, setSelectedWantedToUse] = useState([]) + const [details, setDetails] = useState("") + const [otherReason, setOtherReason] = useState("") + const [otherWantedToUse, setOtherWantedToUse] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const [submitStatus, setSubmitStatus] = useState( SubmitStatus.IDLE, @@ -40,30 +42,65 @@ export function UninstallForm() { const [uninstallReasons, setUninstallReasons] = useState( [], ) + const [wantedToUseOptions, setWantedToUseOptions] = useState< + UninstallReason[] + >([]) const [isInitialized, setIsInitialized] = useState(false) // Randomize order only on the client side useEffect(() => { - const entries = Object.entries(dict.uninstallForm.reasons) - const otherEntry = entries.find(([id]) => id === UNINSTALL_OTHER_OPTION) - const otherEntries = entries.filter(([id]) => id !== UNINSTALL_OTHER_OPTION) + // Process uninstall reasons + const reasonEntries = Object.entries(dict.uninstallForm.reasons) + const otherReasonEntry = reasonEntries.find( + ([id]) => id === UNINSTALL_OTHER_OPTION, + ) + const otherReasonEntries = reasonEntries.filter( + ([id]) => id !== UNINSTALL_OTHER_OPTION, + ) // Shuffle entries except for "Other" option - const shuffledEntries = otherEntries.sort(() => Math.random() - 0.5) + const shuffledReasonEntries = otherReasonEntries.sort( + () => Math.random() - 0.5, + ) // Add "Other" option at the end if it exists - const finalEntries = otherEntry - ? [...shuffledEntries, otherEntry] - : shuffledEntries + const finalReasonEntries = otherReasonEntry + ? [...shuffledReasonEntries, otherReasonEntry] + : shuffledReasonEntries setUninstallReasons( - finalEntries.map(([id, label]) => ({ + finalReasonEntries.map(([id, label]) => ({ + id, + label: label as string, + })), + ) + + // Process wanted to use options + const wantedEntries = Object.entries(dict.uninstallForm.wantedToUse) + const otherWantedEntry = wantedEntries.find(([id]) => id === OTHER_OPTION) + const otherWantedEntries = wantedEntries.filter( + ([id]) => id !== OTHER_OPTION, + ) + + // Shuffle entries except for "Other" option + const shuffledWantedEntries = otherWantedEntries.sort( + () => Math.random() - 0.5, + ) + + // Add "Other" option at the end if it exists + const finalWantedEntries = otherWantedEntry + ? [...shuffledWantedEntries, otherWantedEntry] + : shuffledWantedEntries + + setWantedToUseOptions( + finalWantedEntries.map(([id, label]) => ({ id, label: label as string, })), ) + setIsInitialized(true) - }, [dict.uninstallForm.reasons]) + }, [dict.uninstallForm.reasons, dict.uninstallForm.wantedToUse]) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() @@ -73,24 +110,30 @@ export function UninstallForm() { try { const response = await submit({ uninstallReason: selectedReasons, + wantedToUse: selectedWantedToUse, details, otherReason: selectedReasons.includes(UNINSTALL_OTHER_OPTION) ? otherReason - : '', + : "", + otherWantedToUse: selectedWantedToUse.includes(OTHER_OPTION) + ? otherWantedToUse + : "", locale: lang, } as UninstallFormType) if (!response.success) { - throw new Error('Failed to submit form') + throw new Error("Failed to submit form") } await sleep(1000) setSubmitStatus(SubmitStatus.SUCCESS) setSelectedReasons([]) - setOtherReason('') - setDetails('') + setSelectedWantedToUse([]) + setOtherReason("") + setOtherWantedToUse("") + setDetails("") } catch (error) { - console.error('Error submitting form:', error) + console.error("Error submitting form:", error) setSubmitStatus(SubmitStatus.ERROR) } finally { setIsSubmitting(false) @@ -100,9 +143,9 @@ export function UninstallForm() { return (
{submitStatus === SubmitStatus.SUCCESS ? ( @@ -145,6 +188,56 @@ export function UninstallForm() {
+ {/* wanted to use */} +

+ {dict.uninstallForm.wantedToUseTitle} +

+
+ {wantedToUseOptions.map((option) => ( +
+ { + if (checked) { + setSelectedWantedToUse([ + ...selectedWantedToUse, + option.id, + ]) + } else { + setSelectedWantedToUse( + selectedWantedToUse.filter( + (id) => id !== option.id, + ), + ) + } + }} + /> + +
+ ))} +
+ + + +
+ setOtherWantedToUse(e.target.value)} + placeholder={dict.uninstallForm.wantedToUsePlaceholder} + /> +
+ + +
+ +
+ {/* uninstall reason */}

{dict.uninstallForm.reasonTitle}

@@ -211,7 +304,11 @@ export function UninstallForm() {