Skip to content

Commit

Permalink
code: heading added & UI change of Form
Browse files Browse the repository at this point in the history
  • Loading branch information
@dakshsinghrathore
dakshsinghrathore committed Dec 20, 2023
1 parent a0dda83 commit bbe96b6
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 60 deletions.
9 changes: 9 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

17 changes: 9 additions & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
},
Expand Down
30 changes: 27 additions & 3 deletions src/i18n.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": "संपर्क नंबर",
Expand All @@ -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": " సంప్రదింపు సంఖ్య",
Expand All @@ -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": "అవసరమైన ఫీల్డ్",
},
},
},
Expand Down
80 changes: 31 additions & 49 deletions src/stories/Components/Form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
Expand All @@ -33,15 +34,15 @@ export default function Form({
const [translatedDobHelperText, setTranslatedDobHelperText] = useState("");
const [translatedLocationHelperText, setTranslatedLocationHelperText] =
useState("");
const [translatedHeading, setTranslatedHeading] = useState("");

useEffect(() => {
setTranslatedNameHelperText(t(nameHelperText));
setTranslatedEmailHelperText(t(emailHelperText));
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"));
Expand All @@ -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 =
Expand All @@ -85,36 +87,18 @@ export default function Form({
};

return (
<div>
<section className="bg-gray-100">
<div className="flex justify-center items-center h-screen">
<section className="bg-pink-200">
<div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 gap-x-16 gap-y-8 lg:grid-cols-5">
<div className="lg:col-span-2 lg:py-12">
<p className="max-w-xl text-lg">
{t("🌟 Welcome to our")}{" "}
<span className="font-bold">{t("Health and Wellness")}</span>{" "}
{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! 🙏"
)}
</p>

<div className="mt-8">
<a href="" className="text-2xl font-bold text-pink-600">
{" "}
{t("9862255XX")}{" "}
</a>

<address className="mt-2 not-italic">
{" "}
{t(
"Level 1, Phoenix Tech Tower Plot No: 14/46, Survey No.1, IDA Uppal, Hyderabad, Telangana 500039"
)}
</address>
</div>
</div>

<div className="rounded-lg bg-slate-200 p-8 shadow-lg lg:col-span-3 lg:p-12">
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
<div className="h-screen flex items-center justify-center">
<div className="lg:col-span-3 lg:py-12 ">
<form
onSubmit={handleSubmit(onSubmit)}
className="space-y-6 border rounded-lg p-8 bg-sky-100"
>
<h1 className="text-2xl font-semibold text-center mb-6">
{translatedHeading}
</h1>
<div>
<label className="sr-only" htmlFor="name">
{t("Name")}
Expand All @@ -131,7 +115,7 @@ export default function Form({
{t("Name should not be more than 20 characters.")}
</p>
)}
<p className="text-gray-600 text-xs antialiased">
<p className="text-gray-600 text-xs antialiased font-bold pt-1">
{translatedNameHelperText}
</p>
</div>
Expand All @@ -158,7 +142,7 @@ export default function Form({
{errors.email.message}
</p>
)}
<p className="text-gray-600 text-xs antialiased">
<p className="text-gray-600 text-xs antialiased font-bold pt-1">
{translatedEmailHelperText}
</p>
</div>
Expand All @@ -167,7 +151,7 @@ export default function Form({
{t("Phone")}
</label>
<input
className="w-full rounded-lg border-gray-200 p-3 text-xs"
className="w-full rounded-lg border-gray-200 p-3 text-xs "
placeholder={t("Enter your phone number")}
type="tel"
id="phone"
Expand All @@ -186,12 +170,11 @@ export default function Form({
{errors.phone.message}
</p>
)}
<p className="text-gray-600 text-xs antialiased">
<p className="text-gray-600 text-xs antialiased font-bold pt-1">
{translatedPhoneHelperText}
</p>
</div>
</div>

<div>
<label className="sr-only" htmlFor="dob">
{t("Date of Birth")}
Expand All @@ -206,7 +189,7 @@ export default function Form({
{errors.dob && (
<p className="text-red-600 text-sm">{errors.dob.message}</p>
)}
<p className="text-gray-600 text-xs antialiased">
<p className="text-gray-600 text-xs antialiased font-bold pt-1">
{translatedDobHelperText}
</p>
</div>
Expand All @@ -228,11 +211,10 @@ export default function Form({
{errors.location.message}
</p>
)}
<p className="text-gray-600 text-xs antialiased">
<p className="text-gray-600 text-xs antialiased font-bold pt-1">
{translatedLocationHelperText}
</p>
</div>

<div className="mt-4">
<select
onChange={(e) => changeLanguage(e.target.value)}
Expand All @@ -246,15 +228,13 @@ export default function Form({
))}
</select>
</div>

<div className="mt-4">
<button
type="submit"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-xl cursor-pointer"
disabled={Object.keys(errors).length > 0}
>
{isTranslated ? t("Submit") : "Submit"}{" "}
{/* Dynamically switch button text based on translation status */}
{t("Submit")}
</button>
</div>
</form>
Expand All @@ -264,7 +244,7 @@ export default function Form({
</section>
</div>
);
}
};

Form.propTypes = {
onSubmitData: PropTypes.func,
Expand Down Expand Up @@ -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;
1 change: 1 addition & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default {
"./src/**/**/*.{js,ts,jsx,tsx}",
],
theme: {

extend: {},
},
plugins: [],
Expand Down

0 comments on commit bbe96b6

Please sign in to comment.