added props complete based disabledState component changes

Author: anupsingh244

src/pages/sidepanel/State.tsx

@@ -6,6 +6,7 @@ import { DisabledState } from '@root/src/pages/sidepanel/components/DisabledStat
 import { WrongDomain } from '@root/src/pages/sidepanel/assets/svg/wrongDomainIcon';
 import useStorage from '@src/shared/hooks/useStorage';
 import { useDisabledState } from '@root/src/pages/sidepanel/hooks/useDisabledState';
+import { appContent } from '@root/src/shared/content/appContent';
 import extensionStateStorage from '@src/shared/storages/extensionStateStorage';
 import SidePanel from '@pages/sidepanel/SidePanel';
 
@@ -142,7 +143,16 @@ const State: React.FC<React.PropsWithChildren<StateProps>> = () => {
           )}
         </Box>
       ) : (
-        <DisabledState documentationUrl={documentationUrl} onDocLinkClick={handleDocClick} />
+        <DisabledState
+          documentationUrl={documentationUrl}
+          onDocLinkClick={handleDocClick}
+          toggleLabel={appContent.disabledState.toggleLabel}
+          title={appContent.disabledState.title}
+          description={appContent.disabledState.description}
+          documentationText={appContent.disabledState.documentationText}
+          documentationLinkText={appContent.disabledState.documentationLinkText}
+          documentationSuffix={appContent.disabledState.documentationSuffix}
+        />
       )}
     </Box>
   );

src/pages/sidepanel/components/DisabledState.tsx

@@ -4,11 +4,16 @@ import { styled } from '@mui/material/styles';
 import Toggle from '@root/src/pages/sidepanel/components/Toggle';
 import { ArrowPointer } from '@root/src/pages/sidepanel/assets/svg/ArrowPointer';
 import { appColors } from '@root/src/theme/palette';
-import { appContent } from '@root/src/shared/content/appContent';
 
 interface DisabledStateProps {
   documentationUrl: string;
   onDocLinkClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+  toggleLabel: string;
+  title: string;
+  description: string;
+  documentationText: string;
+  documentationLinkText: string;
+  documentationSuffix: string;
 }
 
 const Container = styled(Stack)(({ theme }) => ({
@@ -136,7 +141,16 @@ const StyledLink = styled(Link)(() => ({
   },
 }));
 
-export const DisabledState = ({ documentationUrl, onDocLinkClick }: DisabledStateProps): JSX.Element => {
+export const DisabledState = ({
+  documentationUrl,
+  onDocLinkClick,
+  toggleLabel,
+  title,
+  description,
+  documentationText,
+  documentationLinkText,
+  documentationSuffix,
+}: DisabledStateProps): JSX.Element => {
   return (
     <Container>
       <OuterCard>
@@ -145,7 +159,7 @@ export const DisabledState = ({ documentationUrl, onDocLinkClick }: DisabledStat
             <ArrowPointer aria-hidden="true" />
 
             <ToggleCard>
-              <ToggleText>{appContent.disabledState.toggleLabel}</ToggleText>
+              <ToggleText>{toggleLabel}</ToggleText>
               <SwitchWrapper>
                 <Toggle checked disabled />
               </SwitchWrapper>
@@ -155,10 +169,10 @@ export const DisabledState = ({ documentationUrl, onDocLinkClick }: DisabledStat
           <StyledCard>
             <Stack spacing={1} alignItems="center" textAlign="center">
               <Title variant="h6" align="center">
-                {appContent.disabledState.title}
+                {title}
               </Title>
               <Description variant="body2" color="text.secondary" align="center">
-                {appContent.disabledState.description}
+                {description}
               </Description>
             </Stack>
           </StyledCard>
@@ -167,11 +181,11 @@ export const DisabledState = ({ documentationUrl, onDocLinkClick }: DisabledStat
 
       <DocCard>
         <DocText variant="body2" color="text.secondary" align="center">
-          {appContent.disabledState.documentationText}{' '}
+          {documentationText}{' '}
           <StyledLink variant="body2" href={documentationUrl} target="_blank" onClick={onDocLinkClick}>
-            {appContent.disabledState.documentationLinkText}
+            {documentationLinkText}
           </StyledLink>
-          {appContent.disabledState.documentationSuffix}
+          {documentationSuffix}
         </DocText>
       </DocCard>
     </Container>