From c3d662ec04f959b91b6669ea76d90bcabb2b66d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?=
 <“yauheni@deriv.me”>
Date: Tue, 15 Nov 2022 14:25:28 +0300
Subject: [PATCH 1/3] refactor: formcancelbutton ts migration

---
 .../src/components/button/button.tsx          |  2 +-
 .../form-cancel-button/form-cancel-button.jsx | 36 -------------------
 .../form-cancel-button/form-cancel-button.tsx | 35 ++++++++++++++++++
 .../form-cancel-button/{index.js => index.ts} |  2 +-
 4 files changed, 37 insertions(+), 38 deletions(-)
 delete mode 100644 packages/components/src/components/form-cancel-button/form-cancel-button.jsx
 create mode 100644 packages/components/src/components/form-cancel-button/form-cancel-button.tsx
 rename packages/components/src/components/form-cancel-button/{index.js => index.ts} (55%)

diff --git a/packages/components/src/components/button/button.tsx b/packages/components/src/components/button/button.tsx
index 146d22e5702e..8f35ef234200 100644
--- a/packages/components/src/components/button/button.tsx
+++ b/packages/components/src/components/button/button.tsx
@@ -4,7 +4,7 @@ import ButtonLoading from './button_loading';
 import Icon from '../icon';
 import Text from '../text';
 
-type TButtonProps = React.PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+export type TButtonProps = React.PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement>> & {
     alternate: boolean;
     blue: boolean;
     classNameSpan: string;
diff --git a/packages/components/src/components/form-cancel-button/form-cancel-button.jsx b/packages/components/src/components/form-cancel-button/form-cancel-button.jsx
deleted file mode 100644
index 98eb43cdddb5..000000000000
--- a/packages/components/src/components/form-cancel-button/form-cancel-button.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import Button from '../button/button';
-
-const FormCancelButton = ({ className, is_center, is_disabled, is_absolute, label, onCancel, ...props }) => {
-    return (
-        <div
-            className={classNames('dc-form-cancel-button', className, {
-                'dc-form-cancel-button--absolute': is_absolute,
-                'dc-form-cancel-button--center': !!is_center,
-                'dc-form-cancel-button--relative': !is_absolute,
-            })}
-        >
-            <Button has_effect onClick={onCancel} text={label} type='button' tertiary large {...props} />
-        </div>
-    );
-};
-
-FormCancelButton.defaultProps = {
-    className: undefined,
-    is_disabled: false,
-    is_center: false,
-    is_absolute: false,
-};
-
-FormCancelButton.propTypes = {
-    className: PropTypes.string,
-    is_absolute: PropTypes.bool,
-    is_center: PropTypes.bool,
-    is_disabled: PropTypes.bool,
-    label: PropTypes.string,
-    onCancel: PropTypes.func,
-};
-
-export default FormCancelButton;
diff --git a/packages/components/src/components/form-cancel-button/form-cancel-button.tsx b/packages/components/src/components/form-cancel-button/form-cancel-button.tsx
new file mode 100644
index 000000000000..688139873647
--- /dev/null
+++ b/packages/components/src/components/form-cancel-button/form-cancel-button.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import classNames from 'classnames';
+import Button, { TButtonProps } from '../button/button';
+
+type TFormCancelButton = Partial<TButtonProps> & {
+    className?: string;
+    is_absolute?: boolean;
+    is_center?: boolean;
+    is_disabled?: boolean;
+    label: string;
+    onCancel: () => void;
+};
+
+const FormCancelButton = ({
+    className,
+    is_center = false,
+    is_absolute = false,
+    label,
+    onCancel,
+    ...props
+}: TFormCancelButton) => {
+    return (
+        <div
+            className={classNames('dc-form-cancel-button', className, {
+                'dc-form-cancel-button--absolute': is_absolute,
+                'dc-form-cancel-button--center': is_center,
+                'dc-form-cancel-button--relative': !is_absolute,
+            })}
+        >
+            <Button has_effect onClick={onCancel} text={label} type='button' tertiary large {...props} />
+        </div>
+    );
+};
+
+export default FormCancelButton;
diff --git a/packages/components/src/components/form-cancel-button/index.js b/packages/components/src/components/form-cancel-button/index.ts
similarity index 55%
rename from packages/components/src/components/form-cancel-button/index.js
rename to packages/components/src/components/form-cancel-button/index.ts
index c213ce6120c1..cc895bae947c 100644
--- a/packages/components/src/components/form-cancel-button/index.js
+++ b/packages/components/src/components/form-cancel-button/index.ts
@@ -1,4 +1,4 @@
-import FormCancelButton from './form-cancel-button.jsx';
+import FormCancelButton from './form-cancel-button';
 import './form-cancel-button.scss';
 
 export default FormCancelButton;

From edb404948c458af994346e9278ca58bd535d1de5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?=
 <“yauheni@deriv.me”>
Date: Tue, 15 Nov 2022 15:37:59 +0300
Subject: [PATCH 2/3] trigger


From b2a924480b1e1c816ef72dcb911826e74db7ad84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?=
 <“yauheni@deriv.me”>
Date: Wed, 16 Nov 2022 14:59:22 +0300
Subject: [PATCH 3/3] refactor: prop fix

---
 .../src/components/elements/account-wizard/account-wizard.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/appstore/src/components/elements/account-wizard/account-wizard.tsx b/packages/appstore/src/components/elements/account-wizard/account-wizard.tsx
index 40e33922dd75..800e1dacbfdb 100644
--- a/packages/appstore/src/components/elements/account-wizard/account-wizard.tsx
+++ b/packages/appstore/src/components/elements/account-wizard/account-wizard.tsx
@@ -333,7 +333,7 @@ const AccountWizard: React.FC<TAccountWizard> = (props: TAccountWizard) => {
                 {wizard_steps}
             </Wizard>
             <DesktopWrapper>
-                <FormCancelButton label={localize('Cancel')} is_absolute onClick={onCancel} />
+                <FormCancelButton label={localize('Cancel')} is_absolute onCancel={onCancel} />
             </DesktopWrapper>
         </React.Fragment>
     );