Merge pull request #152 from YaswanthNagarjuna/telecom/ES-278

[ES-284] New UI changes according to UX
mosip · Sep 28, 2023 · da6b09f · da6b09f
2 parents 31fe477 + fc8098a
commit da6b09f
Show file tree

Hide file tree

Showing 9 changed files with 259 additions and 96 deletions.
diff --git a/mock-relying-party-ui-telecom/public/locales/ar.json b/mock-relying-party-ui-telecom/public/locales/ar.json
@@ -4,9 +4,22 @@
     "loading_msg": "تحميل! انتظر من فضلك...",
     "profile_picture": "الصوره الشخصيه",
     "telecom_msg": "تم إرسال رقم هاتفك الجديد إلى عنوان بريدك الإلكتروني",
-    "please_visit_our":"يرجى زيارة موقعنا",
-    "esim_website":"موقع eSIM",
-    "for_next_steps":"للخطوات القادمة."
+    "please_visit_our": "يرجى زيارة موقعنا",
+    "esim_website": "موقع eSIM",
+    "for_next_steps": "للخطوات القادمة.",
+    "initiate_activation": "بدء التنشيط ،",
+    "refuel_your_digital_life": "تزويد حياتك الرقمية",
+    "1.5gb/day": "1.5 جيجابايت/يوم",
+    "2gb/day": "2 جيجابايت/يوم",
+    "unlimited_calls_and_messages": "مكالمات غير محدودة ورسائل نصية",
+    "best_value_plan": "أفضل خطة قيمة",
+    "unlimted_calls": "تحدث إلى أحبائك لساعات مع مكالمات صوتية غير محدودة",
+    "surf_internet": "تصفح الإنترنت أو الاستمتاع بوسائل التواصل الاجتماعي أو التواصل مع الأصدقاء عبر الإنترنت",
+    "view_more": "عرض المزيد",
+    "go_for_unlimited_entertainment": "اذهب للترفيه غير المحدود",
+    "contents_available": "شاهد أكثر من 900 قناة تلفزيونية ، ودفق المحتوى بأكثر من 16 لغة ، وأكثر من ذلك بكثير على تطبيق Fastline.",
+    "explore": "يستكشف",
+    "sign_out": "خروج"
   },
   "background": {
     "home": "مسكن",
@@ -115,7 +128,7 @@
     "name": "اسم",
     "application_number": "رقم الطلب",
     "appointment_details": "تفاصيل الموعد",
-    "appointment_confirmation_date":"4 مارس 2023",
+    "appointment_confirmation_date": "4 مارس 2023",
     "home": "بيت",
     "location": "# 45/2 ، كولومبيا آسيا ، ماراثاهالي - طريق سارجابور ، مقابل إبلور ، بيلاندور ، بنغالورو ، كارناتاكا -560102"
   },
@@ -150,7 +163,6 @@
     "hide_raw_user_info": "إخفاء معلومات المستخدم الأولية",
     "new_sim": "هل تبحث عن شريحة SIM جديدة؟",
     "register_for_sim": "قم بالتسجيل للحصول على بطاقة SIM الإلكترونية باستخدام بطاقة الهوية الوطنية"
-
   },
   "error": {
     "sign_in_failed": "المصادقة فشلت! حاول تسجيل الدخول باستخدام e-Signet",

diff --git a/mock-relying-party-ui-telecom/public/locales/en.json b/mock-relying-party-ui-telecom/public/locales/en.json
@@ -3,10 +3,23 @@
     "welcome_msg": "Welcome",
     "loading_msg": "Loading! Please wait...",
     "profile_picture": "profile picture",
-    "telecom_msg": "Your new phone number has been sent to your email address",
+    "telecom_msg": "Please click on the button below to initiate the eSIM activation process",
     "please_visit_our":"Please visit our",
     "esim_website":"e-SIM website",
-    "for_next_steps":"for the next steps."
+    "for_next_steps":"for the next steps.",
+    "initiate_activation": "Initiate Activation",
+    "refuel_your_digital_life": "Refuel your digital life",
+    "1.5gb/day": "1.5 GB/day",
+    "2gb/day": "2 GB/day",
+    "unlimited_calls_and_messages": "Unlimited calls and SMS",
+    "best_value_plan": "Best value plan",
+    "unlimted_calls": "Talk to your loved ones for hours with unlimited voice calls",
+    "surf_internet": "Surf internet, enjoy social media, or connect with friends online",
+    "view_more": "View More",
+    "go_for_unlimited_entertainment": "Go for unlimited entertainment",
+    "contents_available": "Watch 900+ TV channels, stream content in more than 16 languages, and much more on the FastLine app.",
+    "explore": "Explore",
+    "sign_out": "Sign Out"
   },
   "background": {
     "home": "Home",

diff --git a/mock-relying-party-ui-telecom/src/App.js b/mock-relying-party-ui-telecom/src/App.js
@@ -6,7 +6,6 @@ import "react-toastify/dist/ReactToastify.css";
 import { useTranslation } from "react-i18next";
 import { useEffect, useState } from "react";
 import langConfigService from "./services/langConfigService";
-import Background from "./components/Background";
 import SimRegistrationCompletedPage from "./pages/SimRegistrationCompleted";
 
 function App() {

diff --git a/mock-relying-party-ui-telecom/src/components/Background.js b/mock-relying-party-ui-telecom/src/components/Background.js
@@ -12,7 +12,7 @@ export default function Background({
 
   return (
     <>
-      <section className="flex flex-col h-screen">
+      <section className="flex flex-col h-[calc(100%-99px)]">
         <NavHeader langOptions={langOptions} />
         <div className="flex flex-grow md:flex-row flex-col h-fit backgroundColor">
           <div className="flex flex-col md:w-1/2">

diff --git a/mock-relying-party-ui-telecom/src/components/NavHeader.js b/mock-relying-party-ui-telecom/src/components/NavHeader.js
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Select from "react-select";
 
-export default function NavHeader({ langOptions, i18nKeyPrefix = "background" }) {
+export default function NavHeader({ component, langOptions, i18nKeyPrefix = "background" }) {
   const { t, i18n } = useTranslation("translation", {
     keyPrefix: i18nKeyPrefix,
   });
@@ -49,7 +49,7 @@ export default function NavHeader({ langOptions, i18nKeyPrefix = "background" })
 
   return (
     <nav className="bg-white border-gray-500">
-      <div className="flex items-center grid grid-cols-3 md:order-2 justify-center mb-2 mt-2">
+      <div className="flex items-center grid grid-cols-3 md:order-2 justify-center">
         <div className="flex justify-end col-start-3 mr-3">
           <img src="images/language_icon.png" alt={t("language")} className="mr-2" />
           <Select
@@ -65,8 +65,8 @@ export default function NavHeader({ langOptions, i18nKeyPrefix = "background" })
       </div>
       <div className="bg-[#FFFFFF] shadow-lg border-[#707070] px-2 sm:px-4 py-3">
         <div className="flex items-center">
-          <img src="images/company_logo.png" alt={t("fastline")} className="ml-8 mr-8" />
-          <div className="flex w-full justify-end space-x-8 ml-8 mr-8 text-xl font-medium">
+          <img src="images/company_logo.png" alt={t("fastline")} className="justify-evenly ml-32 mr-32" />
+          <div className="flex w-full space-x-8 ml-8 mr-8 text-xl font-medium">
             {navList.map((nav) => {
               return (
                 <div key={nav.label}>
@@ -83,6 +83,9 @@ export default function NavHeader({ langOptions, i18nKeyPrefix = "background" })
           </div>
         </div>
       </div>
+      <div className="lg:flex-grow lg:px-24 md:px-16 backgroundColor">
+        {component}
+      </div>
     </nav>
   );
 }
diff --git a/mock-relying-party-ui-telecom/src/components/Registration.js b/mock-relying-party-ui-telecom/src/components/Registration.js
@@ -33,7 +33,7 @@ export default function Registration({
       let error_desc = searchParams.get("error_description");
 
       if (errorCode) {
-        setError({ errorCode: errorCode, errorMsg: error_desc });
+        setError({ errorCode: errorCode, errorMsg: error_desc, showToast: true });
         setStatus(states.ERROR);
         return;
       }
@@ -78,10 +78,10 @@ export default function Registration({
         customStyle: {
           outerDivStyleStandard: {
             position: "relative",
-            width: "250px",
+            width: "fit-content",
             border: "1px solid #0E3572",
             background: "#0E3572",
-            padding: "0.625rem 1.25rem",
+            padding: "0.625rem 1.5rem",
             display: "flex",
             "border-radius": "0.375rem",
             "text-decoration": "none",
@@ -139,13 +139,15 @@ export default function Registration({
         </div>
         <div id="sign-in-with-esignet" className="flex items-center justify-center"></div>
 
-        {status === states.LOADING && (
-          <LoadingIndicator size="medium" message={t("loading_msg")} />
-        )}
+        <div className="p-4">
+          {status === states.LOADING && (
+            <LoadingIndicator size="medium" message={t("loading_msg")} />
+          )}
 
-        {error && (
-          <Error errorCode={error.errorCode} errorMsg={error.errorMsg} />
-        )}
+          {error && (
+            <Error errorCode={error.errorCode} errorMsg={error.errorMsg} showToast={error.showToast}/>
+          )}
+        </div>
       </div>
     </>
   );