[UPM-982]/evgeniy/redirect to error page while clicking contact us li…

…nk (#14944)

* chore: [UPM-982]/evgeniy/redirect to error page while clicking contact us link

* refactor: move css import, rename classname

* chore: remove return

* chore: trigger build

packages/account/src/Components/self-exclusion/self-exclusion-article-content.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { getStaticUrl, PlatformContext } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
-import { Button, Icon, Popup, Text } from '@deriv/components';
+import { Button, Icon, OpenLiveChatLink, Popup, Text } from '@deriv/components';
 import SelfExclusionContext from './self-exclusion-context';
 
 type TSelfExclusionArticleItems = Record<
@@ -107,15 +107,7 @@ export const selfExclusionArticleItems = ({ is_eu, is_deriv_crypto, is_app_setti
                       component: (
                           <Localize
                               i18n_default_text='If you want to adjust your self-exclusion limits, <0>contact us via live chat.</0>'
-                              components={[
-                                  <a
-                                      key={0}
-                                      className='link'
-                                      rel='noopener noreferrer'
-                                      target='_blank'
-                                      href={getStaticUrl('/contact_us', { is_deriv_crypto })}
-                                  />,
-                              ]}
+                              components={[<OpenLiveChatLink key={0} text_size='xxs' />]}
                           />
                       ),
                   },

packages/components/src/components/open-livechat-link/index.ts

@@ -0,0 +1,3 @@
+import OpenLiveChatLink from './open-livechat-link';
+
+export default OpenLiveChatLink;

packages/components/src/components/open-livechat-link/open-livechat-link.scss

@@ -0,0 +1,14 @@
+.open-livechat {
+    &__link {
+        background: transparent;
+        border: none;
+        margin: 0;
+        padding: 0;
+        color: var(--brand-red-coral);
+
+        &:hover {
+            text-decoration: underline;
+            cursor: pointer;
+        }
+    }
+}

packages/components/src/components/open-livechat-link/open-livechat-link.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Localize } from '@deriv/translations';
+import Text from '../text';
+import './open-livechat-link.scss';
+
+type TOpenLiveChatLink = {
+    text_size?: React.ComponentProps<typeof Text>['size'];
+};
+
+const OpenLiveChatLink = ({ children, text_size }: React.PropsWithChildren<TOpenLiveChatLink>) => (
+    <button type='button' className='open-livechat__link' onClick={() => window.LC_API.open_chat_window()}>
+        <Text size={text_size || 'xs'} weight='bold' color='brand-red-coral'>
+            {children || <Localize i18n_default_text='live chat' />}
+        </Text>
+    </button>
+);
+
+export default OpenLiveChatLink;

packages/components/src/index.ts

@@ -79,6 +79,7 @@ export { default as Money } from './components/money';
 export { default as MultiStep } from './components/multi-step';
 export { default as NewsTicker } from './components/news-ticker';
 export { default as Numpad } from './components/numpad';
+export { default as OpenLiveChatLink } from './components/open-livechat-link';
 export { default as PageError } from './components/page-error';
 export { default as PageErrorContainer } from './components/page-error-container';
 export { default as PageOverlay } from './components/page-overlay';