diff --git a/package-lock.json b/package-lock.json index adf5ae6..ed796f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.49.2", + "react-hooks-helper": "^1.6.0", "react-i18next": "^13.5.0", "styled-components": "^6.1.1" }, @@ -13474,6 +13475,14 @@ "react": "^16.8.0 || ^17 || ^18" } }, + "node_modules/react-hooks-helper": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/react-hooks-helper/-/react-hooks-helper-1.6.0.tgz", + "integrity": "sha512-DlyWQ99tgwyDdJfTihCXT6AftYymxhA2LS60vBCTOpclmjPxqDwDTLjVK0kbIc3XsgJvxkanW8TwHE0jrIB8hA==", + "peerDependencies": { + "react": "^16.8.0" + } + }, "node_modules/react-i18next": { "version": "13.5.0", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.5.0.tgz", diff --git a/package.json b/package.json index b8de57c..081e5f5 100644 --- a/package.json +++ b/package.json @@ -22,18 +22,19 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.49.2", + "react-hooks-helper": "^1.6.0", "react-i18next": "^13.5.0", "styled-components": "^6.1.1" }, "devDependencies": { - "@storybook/addon-essentials": "^7.6.5", - "@storybook/addon-interactions": "^7.6.5", - "@storybook/addon-links": "^7.6.5", + "@storybook/addon-essentials": "^7.6.6", + "@storybook/addon-interactions": "^7.6.6", + "@storybook/addon-links": "^7.6.6", "@storybook/addon-onboarding": "^1.0.10", - "@storybook/blocks": "^7.6.5", - "@storybook/react": "^7.6.5", - "@storybook/react-vite": "^7.6.5", - "@storybook/test": "^7.6.5", + "@storybook/blocks": "^7.6.6", + "@storybook/react": "^7.6.6", + "@storybook/react-vite": "^7.6.6", + "@storybook/test": "^7.6.6", "@types/react": "^18.2.37", "@types/react-dom": "^18.2.15", "@vitejs/plugin-react-swc": "^3.5.0", @@ -46,7 +47,7 @@ "eslint-plugin-storybook": "^0.6.15", "postcss": "^8.4.32", "prop-types": "^15.8.1", - "storybook": "^7.6.5", + "storybook": "^7.6.6", "tailwindcss": "^3.3.6", "vite": "^5.0.0" }, diff --git a/src/i18n.js b/src/i18n.js index 6795e0a..f75d44c 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -7,6 +7,7 @@ i18n resources: { en: { translation: { + "personalInformation": "Personal Information", "Enter your full legal name": "Enter your full legal name", "Enter your primary email address": "Enter your primary email address", "Enter your phone number": "Enter your phone number", @@ -19,11 +20,19 @@ i18n "Email helper text": "We will use this email address for all communications regarding your moderator role.", "Phone helper text": "Enter a 10-digit phone number.", "Date of Birth helper text": "Your date of birth helps us verify your eligibility for moderating our platform.", - "Location helper text": "Let us know where you are located to understand the diversity of our moderator team." + "Location helper text": "Let us know where you are located to understand the diversity of our moderator team.", + "Name should not be more than 20 characters.": "Name should not be more than 20 characters.", + "Email is required": "Email is required", + "Invalid email address": "Required field, must be a valid email address format", + "Phone number is required": "Phone number is required", + "Phone number should not exceed 10 digits": "Phone number should not exceed 10 digits", + "Date of birth is required": "Required field, must be a valid date", + "Location is required": "Required field", }, }, hi: { translation: { + "personalInformation": "पूर्ति जानकारी", "Enter your full legal name": "पूरा नाम", "Enter your primary email address": "ईमेल पता", "Enter your phone number": "संपर्क नंबर", @@ -36,11 +45,19 @@ i18n "Email helper text": " हम आपकी मॉडरेटर भूमिका के संबंध में सभी संचार के लिए इस ईमेल पते का उपयोग करेंगे।", "Phone helper text": "एक पहुंच योग्य संपर्क नंबर प्रदान करें जहां जरूरत पड़ने पर हम आप तक पहुंच सकें।", "Date of Birth helper text": "आपकी जन्मतिथि हमें हमारे प्लेटफ़ॉर्म को मॉडरेट करने के लिए आपकी पात्रता सत्यापित करने में मदद करती है।", - "Location helper text": "हमारी मॉडरेटर टीम की विविधता को समझने के लिए हमें बताएं कि आप कहां स्थित हैं।" + "Location helper text": "हमारी मॉडरेटर टीम की विविधता को समझने के लिए हमें बताएं कि आप कहां स्थित हैं।", + "Name should not be more than 20 characters.": "आवश्यक फ़ील्ड", + "Email is required": "आवश्यक फ़ील्ड, एक वैध ईमेल पता प्रारूप होना चाहिए", + "Invalid email address": "अवैध ईमेल पता", + "Phone number is required": "फ़ोन नंबर आवश्यक है", + "Phone number should not exceed 10 digits": "फ़ोन नंबर 10 अंकों से अधिक नहीं होना चाहिए", + "Date of birth is required": "आवश्यक फ़ील्ड, केवल संख्यात्मक वर्ण", + "Location is required": "आवश्यक फ़ील्ड", }, }, te: { translation: { + "personalInformation": "వ్యక్తిగత సమాచారం", "Enter your full legal name": "పూర్తి పేరు", "Enter your primary email address": "ఇమెయిల్ చిరునామా", "Enter your phone number": " సంప్రదింపు సంఖ్య", @@ -53,7 +70,14 @@ i18n "Email helper text": "మీ మోడరేటర్ పాత్రకు సంబంధించిన అన్ని కమ్యూనికేషన్‌ల కోసం మేము ఈ ఇమెయిల్ చిరునామాను ఉపయోగిస్తాము.", "Phone helper text": "అందుబాటులో ఉన్న సంప్రదింపు నంబర్‌ను అందించండి, అవసరమైతే మేము మిమ్మల్ని సంప్రదించవచ్చు.", "Date of Birth helper text": "మీ పుట్టిన తేదీ మా ప్లాట్‌ఫారమ్‌ని నియంత్రించడానికి మీ అర్హతను ధృవీకరించడంలో మాకు సహాయపడుతుంది..", - "Location helper text": "మా మోడరేటర్ బృందం యొక్క వైవిధ్యాన్ని అర్థం చేసుకోవడానికి మీరు ఎక్కడ ఉన్నారో మాకు తెలియజేయండి" + "Location helper text": "మా మోడరేటర్ బృందం యొక్క వైవిధ్యాన్ని అర్థం చేసుకోవడానికి మీరు ఎక్కడ ఉన్నారో మాకు తెలియజేయండి", + "Name should not be more than 20 characters.": "పేరు 20 అక్షరాలు పైగా ఉండాలి", + "Email is required": "అవసరమైన ఫీల్డ్, తప్పక చెల్లుబాటు అయ్యే ఇమెయిల్ చిరునామా ఫార్మాట్ అయి ఉండాలి", + "Invalid email address": "చెల్లని ఇమెయిల్ చిరునామా", + "Phone number is required": "అవసరమైన ఫీల్డ్, సంఖ్యా అక్షరాలు మాత్రమే", + "Phone number should not exceed 10 digits": "ఫోన్ నంబర్ 10 అంకెల పైగా ఉండకూడదు", + "Date of birth is required": "అవసరమైన ఫీల్డ్, తప్పనిసరిగా చెల్లుబాటు అయ్యే తేదీ అయి ఉండాలి", + "Location is required": "అవసరమైన ఫీల్డ్", }, }, }, diff --git a/src/stories/Components/Form.jsx b/src/stories/Components/Form.jsx index 93338c5..57f1871 100644 --- a/src/stories/Components/Form.jsx +++ b/src/stories/Components/Form.jsx @@ -5,7 +5,7 @@ import { useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import i18n from "../../i18n"; -export default function Form({ +const Form = ({ onSubmitData, nameMaxLength, emailPattern, @@ -17,11 +17,12 @@ export default function Form({ phoneHelperText, dobHelperText, locationHelperText, -}) { +}) => { const { register, handleSubmit, formState: { errors }, + trigger, // Add this line } = useForm(); const { t, i18n: i18nInstance } = useTranslation(); const [isTranslated, setIsTranslated] = useState(false); // State to track translation status @@ -33,6 +34,7 @@ export default function Form({ const [translatedDobHelperText, setTranslatedDobHelperText] = useState(""); const [translatedLocationHelperText, setTranslatedLocationHelperText] = useState(""); + const [translatedHeading, setTranslatedHeading] = useState(""); useEffect(() => { setTranslatedNameHelperText(t(nameHelperText)); @@ -40,8 +42,7 @@ export default function Form({ setTranslatedPhoneHelperText(t(phoneHelperText)); setTranslatedDobHelperText(t(dobHelperText)); setTranslatedLocationHelperText(t(locationHelperText)); - - // Explicitly set translated values based on the current language + setTranslatedHeading(t("personalInformation")); if (i18nInstance.language === "hi") { setTranslatedNameHelperText(t("Name helper text")); setTranslatedEmailHelperText(t("Email helper text")); @@ -66,14 +67,15 @@ export default function Form({ const changeLanguage = (language) => { i18n.changeLanguage(language).then(() => { - setIsTranslated(language === "hi"); // Set translation status based on selected language + setIsTranslated(language === "hi"); // Set translation status based on the selected language + trigger(); // Trigger form re-validation }); }; const languageOptions = [ - { value: "en", label: t("Translate to English") }, - { value: "hi", label: t("हिंदी में अनुवाद करें") }, - { value: "te", label: t("తెలుగులోకి అనువదించండి") }, + { value: "en", label: t("English") }, + { value: "hi", label: t("हिंदी") }, + { value: "te", label: t("తెలుగు") }, ]; const currentLanguageOption = @@ -85,36 +87,18 @@ export default function Form({ }; return ( -
-
+
+
-
-
-

- {t("🌟 Welcome to our")}{" "} - {t("Health and Wellness")}{" "} - {t( - "Resources Platform! 🌿 To better serve you, we kindly request that you complete the Moderator KYC Form provided adjacent. Your input helps us tailor our platform and ensures a safe and supportive community. Thank you for your cooperation! 🙏" - )} -

- -
- - {" "} - {t("9862255XX")}{" "} - - -
- {" "} - {t( - "Level 1, Phoenix Tech Tower Plot No: 14/46, Survey No.1, IDA Uppal, Hyderabad, Telangana 500039" - )} -
-
-
- -
-
+
+
+ +

+ {translatedHeading} +

@@ -158,7 +142,7 @@ export default function Form({ {errors.email.message}

)} -

+

{translatedEmailHelperText}

@@ -167,7 +151,7 @@ export default function Form({ {t("Phone")} )} -

+

{translatedPhoneHelperText}

-
@@ -228,11 +211,10 @@ export default function Form({ {errors.location.message}

)} -

+

{translatedLocationHelperText}

-
-
@@ -264,7 +244,7 @@ export default function Form({
); -} +}; Form.propTypes = { onSubmitData: PropTypes.func, @@ -297,3 +277,5 @@ Form.defaultProps = { locationHelperText: "Let us know where you are located to understand the diversity of our moderator team.", }; + +export default Form; diff --git a/tailwind.config.js b/tailwind.config.js index ec0f710..4c8156a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,7 @@ export default { "./src/**/**/*.{js,ts,jsx,tsx}", ], theme: { + extend: {}, }, plugins: [],