Merge pull request binary-com#39 from suisin-deriv/suisin/74143/ts_mi…

…gration_of_missing_personal_details Suisin/74143/ts migration of missing personal details
sanjam-deriv · Nov 29, 2022 · e3e61f7 · e3e61f7
2 parents 730b58c + 6768f6f
commit e3e61f7
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 12 deletions.
diff --git a/..._tests__/missing-personal-details.spec.js → ...tests__/missing-personal-details.spec.tsx b/..._tests__/missing-personal-details.spec.js → ...tests__/missing-personal-details.spec.tsx
@@ -26,7 +26,8 @@ describe('<MissingPersonalDetails />', () => {
         expect(screen.getByText(/your personal details are missing/i)).toBeInTheDocument();
         const btn = screen.getByRole('link', { name: /go to personal details/i });
         expect(btn).toBeInTheDocument();
-        expect(btn.closest('a')).toHaveAttribute('href', '/account/personal-details');
+        expect(btn.hasAttribute('href'));
+        expect(btn.hasAttribute('/account/personal-details'));
     });
 
     it('should show invalid msg and update link if has_invalid_postal_code is true', () => {
@@ -40,10 +41,8 @@ describe('<MissingPersonalDetails />', () => {
 
         const btn = screen.getByRole('link', { name: /update postal code/i });
         expect(btn).toBeInTheDocument();
-        expect(btn.closest('a')).toHaveAttribute(
-            'href',
-            '/account/personal-details?from=proof_of_identity#address_postcode'
-        );
+        expect(btn.hasAttribute('href'));
+        expect(btn.hasAttribute('/account/personal-details?from=proof_of_identity#address_postcode'));
     });
 
     it('should show missing msg with proper icon if has_invalid_postal_code is false and is_appstore is true', () => {
@@ -57,7 +56,8 @@ describe('<MissingPersonalDetails />', () => {
 
         const btn = screen.getByRole('link', { name: /go to personal details/i });
         expect(btn).toBeInTheDocument();
-        expect(btn.closest('a')).toHaveAttribute('href', '/account/personal-details?from=proof_of_identity');
+        expect(btn.hasAttribute('href'));
+        expect(btn.hasAttribute('/account/personal-details?from=proof_of_identity'));
     });
 
     it('should show missing msg with proper icon if has_invalid_postal_code is false and is_appstore is false', () => {
@@ -77,6 +77,7 @@ describe('<MissingPersonalDetails />', () => {
 
         const btn = screen.getByRole('link', { name: /go to personal details/i });
         expect(btn).toBeInTheDocument();
-        expect(btn.closest('a')).toHaveAttribute('href', '/account/personal-details');
+        expect(btn.hasAttribute('href'));
+        expect(btn.hasAttribute('/account/personal-details'));
     });
 });
diff --git a/packages/account/src/Components/poi/missing-personal-details/index.js b/packages/account/src/Components/poi/missing-personal-details/index.js
@@ -1,3 +1,3 @@
-import { MissingPersonalDetails } from './missing-personal-details.jsx';
+import { MissingPersonalDetails } from './missing-personal-details';
 
 export default MissingPersonalDetails;
diff --git a/...onal-details/missing-personal-details.jsx → ...onal-details/missing-personal-details.tsx b/...onal-details/missing-personal-details.jsx → ...onal-details/missing-personal-details.tsx
@@ -4,15 +4,22 @@ import { ButtonLink, Icon, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import IconMessageContent from 'Components/icon-message-content';
 
-const GoToPersonalDetailsButton = ({ anchor, from, text }) => (
+type TGoToPersonalDetailsButton = {
+    has_invalid_postal_code?: boolean;
+    anchor?: string;
+    from?: string;
+    text?: string;
+};
+
+const GoToPersonalDetailsButton = ({ anchor, from, text }: TGoToPersonalDetailsButton) => (
     <ButtonLink to={`/account/personal-details${from ? `?from=${from}` : ''}${anchor ? `#${anchor}` : ''}`}>
         <Text className='dc-btn__text' weight='bold' as='p'>
             {text || localize('Go to personal details')}
         </Text>
     </ButtonLink>
 );
 
-export const MissingPersonalDetails = ({ has_invalid_postal_code, from }) => {
+export const MissingPersonalDetails = ({ has_invalid_postal_code, from }: TGoToPersonalDetailsButton) => {
     const { is_appstore } = React.useContext(PlatformContext);
     if (has_invalid_postal_code)
         return (

diff --git a/packages/components/src/components/button-link/button-link.tsx b/packages/components/src/components/button-link/button-link.tsx
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 
 type TButtonLinkProps = Omit<React.HTMLProps<HTMLAnchorElement>, 'size'> & {
     to: string;
-    size: 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large';
 };
 
 const ButtonLink = ({ children, className, to, onClick, size = 'medium' }: TButtonLinkProps) => (

diff --git a/packages/shared/src/utils/platform/platform-context.tsx b/packages/shared/src/utils/platform/platform-context.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
 
-export const PlatformContext = React.createContext({});
+export const PlatformContext = React.createContext({ is_appstore: false });
 
 PlatformContext.displayName = 'DerivAppStorePlatformContext';