refactor: 🎨 migrated component to TSX (#48)

* refactor: 🎨 migrated component to TSX * refactor: ⚰️ unused import
likhith-deriv · Sep 16, 2023 · 2703f09 · 2703f09
1 parent 3fe4a5c
commit 2703f09
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 7 deletions.
diff --git a/...count/src/Components/sample-credit-card-modal/__tests__/sample-credit-card-modal.spec.tsx b/...count/src/Components/sample-credit-card-modal/__tests__/sample-credit-card-modal.spec.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { SampleCreditCardModal } from '../sample-credit-card-modal';
+
+describe('SampleCreditCardModal', () => {
+    let modal_root_el: HTMLDivElement;
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+
+    it('should render modal props', () => {
+        const props = {
+            is_open: true,
+            onClose: jest.fn(),
+        };
+        render(<SampleCreditCardModal {...props} />);
+        expect(screen.getByRole('heading')).toHaveTextContent('How to mask your card?');
+        expect(screen.getByRole('img')).toHaveAttribute('alt', 'creditcardsample');
+    });
+
+    it('should not render modal when is_open is false', () => {
+        const props = {
+            is_open: false,
+            onClose: jest.fn(),
+        };
+        render(<SampleCreditCardModal {...props} />);
+        expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+        expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    });
+});
diff --git a/...ponents/sample-credit-card-modal/index.js → ...ponents/sample-credit-card-modal/index.ts b/...ponents/sample-credit-card-modal/index.js → ...ponents/sample-credit-card-modal/index.ts
@@ -1,3 +1,3 @@
-import { SampleCreditCardModal } from './sample-credit-card-modal.jsx';
+import { SampleCreditCardModal } from './sample-credit-card-modal';
 
 export default SampleCreditCardModal;
diff --git a/...t-card-modal/sample-credit-card-modal.jsx → ...t-card-modal/sample-credit-card-modal.tsx b/...t-card-modal/sample-credit-card-modal.jsx → ...t-card-modal/sample-credit-card-modal.tsx
@@ -1,9 +1,21 @@
 import React from 'react';
 import { Modal, Text } from '@deriv/components';
-import { localize, Localize } from '@deriv/translations';
+import { Localize } from '@deriv/translations';
 import { getUrlBase } from '@deriv/shared';
 
-export const SampleCreditCardModal = ({ is_open, onClose }) => {
+type TSampleCreditCardModalProps = {
+    is_open: boolean;
+    onClose: () => void;
+};
+
+/**
+ * Display a modal with a sample credit card image and instructions on how to mask the card.
+ * @name SampleCreditCardModal
+ * @param is_open - boolean to determine if the modal should be open or not
+ * @param onClose - function to close the modal
+ * @returns React component
+ */
+export const SampleCreditCardModal = ({ is_open, onClose }: TSampleCreditCardModalProps) => {
     return (
         <Modal
             className='sample-credit-card-modal'
@@ -14,9 +26,7 @@ export const SampleCreditCardModal = ({ is_open, onClose }) => {
         >
             <React.Fragment>
                 <Text className='sample-credit-card-modal-text' size='xs'>
-                    {localize(
-                        'Black out digits 7 to 12 of the card number that’s shown on the front of your debit/credit card.⁤'
-                    )}
+                    <Localize i18n_default_text='Black out digits 7 to 12 of the card number that’s shown on the front of your debit/credit card.⁤' />
                 </Text>
                 <img
                     src={getUrlBase('/public/images/common/sample-credit-card.png')}

diff --git a/packages/account/src/Sections/Verification/ProofOfOwnership/expanded-card.jsx b/packages/account/src/Sections/Verification/ProofOfOwnership/expanded-card.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import FileUploader from './file-uploader';
 import { Input, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import SampleCreditCardModal from 'Components/sample-credit-card-modal';
+import SampleCreditCardModal from '../../../Components/sample-credit-card-modal';
 import classNames from 'classnames';
 import { IDENTIFIER_TYPES, VALIDATIONS } from './constants/constants.js';