Skip to content

Fix/issue 3794 whatsapp flow components #3842

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
khushthecoder wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix/issue 3794 whatsapp flow components #3842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
22775b4
fix(#3794): add screen ID/data preservation, enhanced unsupported UI,…
khushthecoder Mar 14, 2026
4a6ad8c
style(#3794): fix Codacy, DeepScan, and Prettier static analysis errors
khushthecoder Mar 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 11 additions & 12 deletions src/assets/images/icons/Discord/DiscordIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
const SvgComponent = ({ color }: any) => (
<svg xmlns="http://www.w3.org/2000/svg" width={22} height={22}>
<title>{'Discord Icon'}</title>
<g fill="none" fillRule="evenodd">
<path
fill={color}
fillRule="nonzero"
d="M18.59 5.88997C17.36 5.31997 16.05 4.89997 14.67 4.65997C14.5 4.95997 14.3 5.36997 14.17 5.69997C12.71 5.47997 11.26 5.47997 9.83001 5.69997C9.69001 5.36997 9.49001 4.95997 9.32001 4.65997C7.94001 4.89997 6.63001 5.31997 5.40001 5.88997C2.92001 9.62997 2.25001 13.28 2.58001 16.87C4.23001 18.1 5.82001 18.84 7.39001 19.33C7.78001 18.8 8.12001 18.23 8.42001 17.64C7.85001 17.43 7.31001 17.16 6.80001 16.85C6.94001 16.75 7.07001 16.64 7.20001 16.54C10.33 18 13.72 18 16.81 16.54C16.94 16.65 17.07 16.75 17.21 16.85C16.7 17.16 16.15 17.42 15.59 17.64C15.89 18.23 16.23 18.8 16.62 19.33C18.19 18.84 19.79 18.1 21.43 16.87C21.82 12.7 20.76 9.08997 18.61 5.88997H18.59ZM8.84001 14.67C7.90001 14.67 7.13001 13.8 7.13001 12.73C7.13001 11.66 7.88001 10.79 8.84001 10.79C9.80001 10.79 10.56 11.66 10.55 12.73C10.55 13.79 9.80001 14.67 8.84001 14.67ZM15.15 14.67C14.21 14.67 13.44 13.8 13.44 12.73C13.44 11.66 14.19 10.79 15.15 10.79C16.11 10.79 16.87 11.66 16.86 12.73C16.86 13.79 16.11 14.67 15.15 14.67Z"
/>
</g>
</svg>
);
export default SvgComponent;

<title>{'Discord Icon'}</title>
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Localize the SVG title text instead of hardcoding English.

<title>{'Discord Icon'}</title> is user-facing accessibility text and should come from i18next so it can be translated.

💡 Suggested change 
+import { useTranslation } from 'react-i18next';
+
-const SvgComponent = ({ color }: any) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={22} height={22}>
-    <title>{'Discord Icon'}</title>
+const SvgComponent = ({ color }: any) => {
+  const { t } = useTranslation();
+  return (
+  <svg xmlns="http://www.w3.org/2000/svg" width={22} height={22}>
+    <title>{t('icons.discord')}</title>
     <g fill="none" fillRule="evenodd">
       <path
         fill={color}
         fillRule="nonzero"
         d="M18.59 5.88997C17.36 5.31997 16.05 4.89997 14.67 4.65997C14.5 4.95997 14.3 5.36997 14.17 5.69997C12.71 5.47997 11.26 5.47997 9.83001 5.69997C9.69001 5.36997 9.49001 4.95997 9.32001 4.65997C7.94001 4.89997 6.63001 5.31997 5.40001 5.88997C2.92001 9.62997 2.25001 13.28 2.58001 16.87C4.23001 18.1 5.82001 18.84 7.39001 19.33C7.78001 18.8 8.12001 18.23 8.42001 17.64C7.85001 17.43 7.31001 17.16 6.80001 16.85C6.94001 16.75 7.07001 16.64 7.20001 16.54C10.33 18 13.72 18 16.81 16.54C16.94 16.65 17.07 16.75 17.21 16.85C16.7 17.16 16.15 17.42 15.59 17.64C15.89 18.23 16.23 18.8 16.62 19.33C18.19 18.84 19.79 18.1 21.43 16.87C21.82 12.7 20.76 9.08997 18.61 5.88997H18.59ZM8.84001 14.67C7.90001 14.67 7.13001 13.8 7.13001 12.73C7.13001 11.66 7.88001 10.79 8.84001 10.79C9.80001 10.79 10.56 11.66 10.55 12.73C10.55 13.79 9.80001 14.67 8.84001 14.67ZM15.15 14.67C14.21 14.67 13.44 13.8 13.44 12.73C13.44 11.66 14.19 10.79 15.15 10.79C16.11 10.79 16.87 11.66 16.86 12.73C16.86 13.79 16.11 14.67 15.15 14.67Z"
       />
     </g>
   </svg>
-);
+  );
+};

As per coding guidelines, use i18next for internationalization with string extraction to Lokalise via yarn extract-translations.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/assets/images/icons/Discord/DiscordIcon.tsx` at line 3, The SVG title is
hardcoded as "Discord Icon" in the DiscordIcon component; replace it with a
translated string by importing and using i18next (e.g., useTranslation or t)
inside DiscordIcon and render <title>{t('discord.icon_title')}</title> (choose a
key like "discord.icon_title"), then add that key to your translation files and
run yarn extract-translations to pick it up for Lokalise; ensure the import and
t usage are added to the DiscordIcon function so accessibility text is
localized.

Copy link
Copy Markdown
Collaborator

@priyanshu6238 priyanshu6238 Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pls revert this change

<g fill="none" fillRule="evenodd">
<path
fill={color}
fillRule="nonzero"
d="M18.59 5.88997C17.36 5.31997 16.05 4.89997 14.67 4.65997C14.5 4.95997 14.3 5.36997 14.17 5.69997C12.71 5.47997 11.26 5.47997 9.83001 5.69997C9.69001 5.36997 9.49001 4.95997 9.32001 4.65997C7.94001 4.89997 6.63001 5.31997 5.40001 5.88997C2.92001 9.62997 2.25001 13.28 2.58001 16.87C4.23001 18.1 5.82001 18.84 7.39001 19.33C7.78001 18.8 8.12001 18.23 8.42001 17.64C7.85001 17.43 7.31001 17.16 6.80001 16.85C6.94001 16.75 7.07001 16.64 7.20001 16.54C10.33 18 13.72 18 16.81 16.54C16.94 16.65 17.07 16.75 17.21 16.85C16.7 17.16 16.15 17.42 15.59 17.64C15.89 18.23 16.23 18.8 16.62 19.33C18.19 18.84 19.79 18.1 21.43 16.87C21.82 12.7 20.76 9.08997 18.61 5.88997H18.59ZM8.84001 14.67C7.90001 14.67 7.13001 13.8 7.13001 12.73C7.13001 11.66 7.88001 10.79 8.84001 10.79C9.80001 10.79 10.56 11.66 10.55 12.73C10.55 13.79 9.80001 14.67 8.84001 14.67ZM15.15 14.67C14.21 14.67 13.44 13.8 13.44 12.73C13.44 11.66 14.19 10.79 15.15 10.79C16.11 10.79 16.87 11.66 16.86 12.73C16.86 13.79 16.11 14.67 15.15 14.67Z"
/>
</g>
</svg>
);
export default SvgComponent;
48 changes: 28 additions & 20 deletions src/components/UI/DotLoader/DotLoader.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,35 @@
.Loader {
margin: 0.5rem 0;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #fff;
box-shadow: 18px 0 #fff, -18px 0 #fff;
position: relative;
animation: flash 1s ease-out infinite alternate;
margin: 0.5rem 0;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #fff;
box-shadow:
18px 0 #fff,
-18px 0 #fff;
position: relative;
animation: flash 1s ease-out infinite alternate;
}

@keyframes flash {
0% {
background-color: #FFF2;
box-shadow: 18px 0 #FFF2, -18px 0 #FFF;
}
0% {
background-color: #fff2;
box-shadow:
18px 0 #fff2,
-18px 0 #fff;
}

50% {
background-color: #FFF;
box-shadow: 18px 0 #FFF2, -18px 0 #FFF2;
}
50% {
background-color: #fff;
box-shadow:
18px 0 #fff2,
-18px 0 #fff2;
}

100% {
background-color: #FFF2;
box-shadow: 18px 0 #FFF, -18px 0 #FFF2;
}
100% {
background-color: #fff2;
box-shadow:
18px 0 #fff,
-18px 0 #fff2;
}
}
2 changes: 1 addition & 1 deletion src/components/UI/Form/DateTimePicker/DateTimePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const DateTimePicker = ({
const hasError = touchedVal && errorText !== undefined;
const dateValue = field.value ? field.value : null;

const handleDateChange = (date: Dayjs | null | string) => {
const handleDateChange = (date: Dayjs | null | string) => {
const value = date && date.toString() !== 'Invalid Date' ? dayjs(date) : null;
setFieldValue(field.name, value);
if (onChange) onChange(value);
Expand Down
6 changes: 2 additions & 4 deletions src/components/UI/Form/EmojiInput/Editor.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,6 @@
background-color: #eee;
}


.FormatingOptions {
border-bottom: 1px solid #ccc;
border-top-left-radius: 10px;
Expand All @@ -175,8 +174,7 @@
flex-shrink: 0;
align-items: center;
justify-content: space-between;
color: #5F5F5F;

color: #5f5f5f;
}

.Active {
Expand All @@ -189,4 +187,4 @@

.DisablePicker {
pointer-events: none;
}
}
8 changes: 1 addition & 7 deletions src/components/UI/Heading/Heading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,7 @@ export interface HeadingProps {
};
}

export const Heading = ({
formTitle,
helpData,
backLink,
headerHelp,
button,
}: HeadingProps) => {
export const Heading = ({ formTitle, helpData, backLink, headerHelp, button }: HeadingProps) => {
const navigate = useNavigate();
const addIcon = <AddIcon className={styles.AddIcon} />;

Expand Down
2 changes: 1 addition & 1 deletion src/components/UI/Layout/Navigation/SideMenus/SideMenus.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,4 +150,4 @@
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
}
6 changes: 3 additions & 3 deletions src/components/UI/SearchBar/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export interface SearchBarProps {
endAdornment?: any;
searchMode: boolean;
iconFront?: boolean;
searchParam?:any
searchParam?: any;
}

export const SearchBar = ({
Expand All @@ -32,7 +32,7 @@ export const SearchBar = ({
handleChange,
className,
iconFront = false,
searchParam
searchParam,
}: SearchBarProps) => {
const [localSearchValue, setLocalSearchValue] = useState(searchVal);
const { t } = useTranslation();
Expand Down Expand Up @@ -78,7 +78,7 @@ export const SearchBar = ({
}}
className={styles.FilterIcon}
>
<AdvancedSearch isActive={searchParam && Object.keys(searchParam).length !== 0 } />
<AdvancedSearch isActive={searchParam && Object.keys(searchParam).length !== 0} />
</IconButton>
</Tooltip>
</InputAdornment>
Expand Down
4 changes: 2 additions & 2 deletions src/components/floweditor/FlowEditor.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
color: #073f24;
}

.DialogTitle>h2 {
.DialogTitle > h2 {
font-size: 24px;
}

Expand Down Expand Up @@ -200,4 +200,4 @@
border-radius: 4px;
cursor: pointer;
font-weight: 600;
}
}
2 changes: 1 addition & 1 deletion src/containers/AIEvals/AIEvaluationCreate/AIEvaluationCreate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,4 +197,4 @@ export default function AIEvaluationCreate() {
)}
</div>
);
};
}
Loading
Loading