Skip to content

Commit 9f9f885

Browse files
farrah-derivfarrah-deriv
committed
Merge remote-tracking branch 'upstream/master' into FEQ-1305/fix-issues
2 parents 9273c00 + f7e5ed2 commit 9f9f885

File tree

32 files changed

+215
-43
lines changed

32 files changed

+215
-43
lines changed

‎.github/workflows/build-and-deploy-prod.yml

+8-3
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ jobs:
1414
timeout-minutes: 30
1515
runs-on: ubuntu-latest
1616
environment: Production
17+
env:
18+
VERSION: ${{ github.ref_name }}
1719
steps:
1820
- name: Checkout to main branch
1921
uses: actions/checkout@v3
@@ -54,6 +56,7 @@ jobs:
5456

5557
- name: Publish to Cloudflare Pages
5658
uses: "deriv-com/shared-actions/.github/actions/publish_to_pages_branch@master"
59+
id: publish_to_cloudflare
5760
with:
5861
CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
5962
CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
@@ -77,22 +80,24 @@ jobs:
7780
if: steps.dr_action.conclusion == 'failure'
7881
with:
7982
SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
80-
MESSAGE: "Vercel Publish failed for p2p.deriv.com with version ${{ github.head_ref }}"
83+
MESSAGE: "Vercel Publish failed for p2p.deriv.com with version $VERSION"
8184

8285
send_slack_notification:
8386
name: Send Release Slack notification
8487
environment: Production
8588
runs-on: ubuntu-latest
89+
env:
90+
VERSION: ${{ github.ref_name }}
8691
if: always()
8792
needs: [build_to_cloudflare_pages]
8893
steps:
8994
- name: Create Slack Message
9095
id: create_slack_message
9196
run: |
9297
if [[ "${{ needs.build_to_cloudflare_pages.result }}" == 'success' ]]; then
93-
echo "message=Production Release succeeded for p2p.deriv.com with version ${{ github.head_ref }}" >> $GITHUB_OUTPUT
98+
echo "message=Production Release succeeded for p2p.deriv.com with version $VERSION" >> $GITHUB_OUTPUT
9499
else
95-
echo "message=Production Release failed for p2p.deriv.com with version ${{ github.head_ref }}" >> $GITHUB_OUTPUT
100+
echo "message=Production Release failed for p2p.deriv.com with version $VERSION" >> $GITHUB_OUTPUT
96101
fi
97102
- name: Send Slack Notification
98103
uses: "deriv-com/shared-actions/.github/actions/send_slack_notification@master"

‎global.d.ts

+6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
declare global {
22
interface Window {
33
LC_API: {
4+
on_chat_ended: VoidFunction;
45
open_chat_window: VoidFunction;
56
};
7+
LiveChatWidget: {
8+
call: (key: string, value?: object | string) => void;
9+
init: () => void;
10+
on: (key: string, callback: VoidFunction) => void;
11+
};
612
dataLayer: {
713
push: (event: { [key: string]: boolean | number | string; event: string }) => void;
814
};

‎index.html

+44
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
<meta name="keywords" content="p2p, buy, sell" />
1111
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1212
<title>Buy and sell on Deriv P2P to fund your trading account | Deriv</title>
13+
<!-- Start Cookies script -->
14+
<script src="https://static.deriv.com/scripts/cookie.js" async></script>
15+
<!-- End Cookies script -->
1316
<!-- Google Tag Manager -->
1417
<script>
1518
(function (w, d, s, l, i) {
@@ -42,5 +45,46 @@
4245
<!-- End Google Tag Manager (noscript) -->
4346
<div id="root"></div>
4447
<script type="module" src="/src/main.tsx"></script>
48+
<!-- LiveChat script -->
49+
<script type="text/javascript">
50+
window.__lc = window.__lc || {};
51+
window.__lc.license = 12049137;
52+
window.__lc.asyncInit = true;
53+
(function (n, t, c) {
54+
function i(n) {
55+
return e._h ? e._h.apply(null, n) : e._q.push(n);
56+
}
57+
var e = {
58+
_q: [],
59+
_h: null,
60+
_v: '2.0',
61+
on: function () {
62+
i(['on', c.call(arguments)]);
63+
},
64+
once: function () {
65+
i(['once', c.call(arguments)]);
66+
},
67+
off: function () {
68+
i(['off', c.call(arguments)]);
69+
},
70+
get: function () {
71+
if (!e._h) throw new Error('[LiveChatWidget] You can’t use getters before load.');
72+
return i(['get', c.call(arguments)]);
73+
},
74+
call: function () {
75+
i(['call', c.call(arguments)]);
76+
},
77+
init: function () {
78+
var n = t.createElement('script');
79+
(n.async = !0),
80+
(n.type = 'text/javascript'),
81+
(n.src = 'https://cdn.livechatinc.com/tracking.js'),
82+
t.head.appendChild(n);
83+
},
84+
};
85+
!n.__lc.asyncInit && e.init(), (n.LiveChatWidget = n.LiveChatWidget || e);
86+
})(window, document, [].slice);
87+
</script>
88+
<!-- End LiveChat script -->
4589
</body>
4690
</html>

‎src/components/AppFooter/Livechat.tsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
1+
import { useLiveChat } from '@/hooks/custom-hooks';
12
import { LegacyLiveChatOutlineIcon } from '@deriv/quill-icons';
23
import { useTranslations } from '@deriv-com/translations';
34
import { TooltipMenuIcon } from '../TooltipMenuIcon';
45

56
const Livechat = () => {
7+
const { LiveChatWidget } = useLiveChat();
68
const { localize } = useTranslations();
7-
// TODO add the logic of this
8-
// TODO add the test cases for this after adding the logics
99

1010
return (
11-
<TooltipMenuIcon as='button' className='app-footer__icon' tooltipContent={localize('Live chat')}>
11+
<TooltipMenuIcon
12+
as='button'
13+
className='app-footer__icon'
14+
onClick={() => {
15+
LiveChatWidget.call('maximize');
16+
}}
17+
tooltipContent={localize('Live chat')}
18+
>
1219
<LegacyLiveChatOutlineIcon iconSize='xs' />
1320
</TooltipMenuIcon>
1421
);

‎src/components/AppFooter/__tests__/AppFooter.spec.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import { render, screen } from '@testing-library/react';
77
import userEvent from '@testing-library/user-event';
88
import AppFooter from '../AppFooter';
99

10+
jest.mock('@deriv-com/api-hooks', () => ({
11+
useAuthData: jest.fn(() => ({ activeLoginid: null })),
12+
}));
1013
jest.mock('@deriv-com/translations');
1114
jest.mock('@/hooks');
1215

‎src/components/AppHeader/AccountSwitcher/index.tsx ‎src/components/AppHeader/AccountSwitcher/AccountSwitcher.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ type TAccountSwitcherProps = {
1010

1111
const CurrencyIcon = lazy(() => import('../CurrencyIcon').then(module => ({ default: module.CurrencyIcon })));
1212

13-
export const AccountSwitcher = ({ account }: TAccountSwitcherProps) => {
13+
const AccountSwitcher = ({ account }: TAccountSwitcherProps) => {
1414
const activeAccount = {
1515
balance: FormatUtils.formatMoney(account?.balance ?? 0),
1616
currency: account?.currency || 'USD',
@@ -22,3 +22,5 @@ export const AccountSwitcher = ({ account }: TAccountSwitcherProps) => {
2222
};
2323
return account && <UIAccountSwitcher activeAccount={activeAccount} buttonClassName='mr-4' isDisabled />;
2424
};
25+
26+
export default AccountSwitcher;

‎src/components/AppHeader/AccountSwitcher/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as AccountSwitcher } from './AccountSwitcher';

‎src/components/AppHeader/SkeletonLoader/index.tsx ‎src/components/AppHeader/AccountsInfoLoader/AccountsInfoLoader.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const LoggedInPreloader = ({ isMobile }: Pick<TAccountsInfoLoaderProps, 'isMobil
2727
</>
2828
);
2929

30-
export const AccountsInfoLoader = ({ isMobile, speed }: TAccountsInfoLoaderProps) => (
30+
const AccountsInfoLoader = ({ isMobile, speed }: TAccountsInfoLoaderProps) => (
3131
<ContentLoader
3232
backgroundColor={'#f2f3f4'}
3333
data-testid='dt_accounts_info_loader'
@@ -39,3 +39,5 @@ export const AccountsInfoLoader = ({ isMobile, speed }: TAccountsInfoLoaderProps
3939
<LoggedInPreloader isMobile={isMobile} />
4040
</ContentLoader>
4141
);
42+
43+
export default AccountsInfoLoader;

‎src/components/AppHeader/AccountsInfoLoader/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as AccountsInfoLoader } from './AccountsInfoLoader';

‎src/components/AppHeader/AppHeader.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ import { useAuthData } from '@deriv-com/api-hooks';
66
import { useTranslations } from '@deriv-com/translations';
77
import { Button, Header, Text, useDevice, Wrapper } from '@deriv-com/ui';
88
import { TooltipMenuIcon } from '../TooltipMenuIcon';
9+
import { AccountsInfoLoader } from './AccountsInfoLoader';
910
import { AccountSwitcher } from './AccountSwitcher';
1011
import { AppLogo } from './AppLogo';
1112
import { MenuItems } from './MenuItems';
1213
import { MobileMenu } from './MobileMenu';
1314
import { Notifications } from './Notifications';
1415
import { PlatformSwitcher } from './PlatformSwitcher';
15-
import { AccountsInfoLoader } from './SkeletonLoader';
1616
import './AppHeader.scss';
1717

1818
// TODO: handle local storage values not updating after changing local storage values

‎src/components/AppHeader/AppLogo/index.tsx ‎src/components/AppHeader/AppLogo/AppLogo.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { DerivLogo, useDevice } from '@deriv-com/ui';
22
import { URLConstants } from '@deriv-com/utils';
33
import './AppLogo.scss';
44

5-
export const AppLogo = () => {
5+
const AppLogo = () => {
66
const { isDesktop } = useDevice();
77

88
if (!isDesktop) return null;
@@ -15,3 +15,5 @@ export const AppLogo = () => {
1515
/>
1616
);
1717
};
18+
19+
export default AppLogo;

‎src/components/AppHeader/AppLogo/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as AppLogo } from './AppLogo';

‎src/components/AppHeader/MenuItems/index.tsx ‎src/components/AppHeader/MenuItems/MenuItems.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { MenuItem, Text, useDevice } from '@deriv-com/ui';
33
import { MenuItems as items } from '../HeaderConfig';
44
import './MenuItems.scss';
55

6-
export const MenuItems = () => {
6+
const MenuItems = () => {
77
const { localize } = useTranslations();
88
const { isDesktop } = useDevice();
99

@@ -29,3 +29,5 @@ export const MenuItems = () => {
2929
</>
3030
);
3131
};
32+
33+
export default MenuItems;

‎src/components/AppHeader/MenuItems/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as MenuItems } from './MenuItems';

‎src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ComponentProps, ReactNode } from 'react';
22
import { ACCOUNT_LIMITS, HELP_CENTRE, RESPONSIBLE } from '@/constants';
3+
import { useLiveChat } from '@/hooks/custom-hooks';
34
import {
45
BrandDerivLogoCoralIcon,
56
IconTypes,
@@ -8,6 +9,7 @@ import {
89
LegacyChartsIcon,
910
LegacyHelpCentreIcon,
1011
LegacyHomeOldIcon,
12+
LegacyLiveChatOutlineIcon,
1113
LegacyLogout1pxIcon,
1214
LegacyProfileSmIcon,
1315
LegacyResponsibleTradingIcon,
@@ -34,6 +36,7 @@ type TMenuConfig = {
3436
export const MobileMenuConfig = () => {
3537
const { localize } = useTranslations();
3638
const { logout } = useAuthData();
39+
const { LiveChatWidget } = useLiveChat();
3740

3841
const menuConfig: TMenuConfig[] = [
3942
[
@@ -101,12 +104,14 @@ export const MobileMenuConfig = () => {
101104
LeftComponent: LegacyWhatsappIcon,
102105
target: '_blank',
103106
},
104-
// TODO add livechat logic
105-
// {
106-
// as: 'button',
107-
// label: localize('Live chat'),
108-
// LeftComponent: LegacyLiveChatOutlineIcon,
109-
// },
107+
{
108+
as: 'button',
109+
label: localize('Live chat'),
110+
LeftComponent: LegacyLiveChatOutlineIcon,
111+
onClick: () => {
112+
LiveChatWidget.call('maximize');
113+
},
114+
},
110115
],
111116
[
112117
{

‎src/components/AppHeader/Notifications/index.tsx ‎src/components/AppHeader/Notifications/Notifications.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { LegacyNotificationIcon } from '@deriv/quill-icons';
44
import { useTranslations } from '@deriv-com/translations';
55
import { Notifications as UINotifications, useDevice } from '@deriv-com/ui';
66

7-
export const Notifications = () => {
7+
const Notifications = () => {
88
const [isOpen, setIsOpen] = useState(false);
99
const { localize } = useTranslations();
1010
const { isMobile } = useDevice();
@@ -21,7 +21,7 @@ export const Notifications = () => {
2121
<LegacyNotificationIcon fill='red' iconSize='sm' />
2222
</TooltipMenuIcon>
2323
<UINotifications
24-
className={isMobile ? '' : 'notifications__wrapper absolute top-20 right-80 z-10'}
24+
className={isMobile ? '' : 'absolute top-20 right-80 z-10'}
2525
clearNotificationsCallback={() => {}}
2626
componentConfig={{
2727
clearButtonText: localize('Clear all'),
@@ -36,3 +36,5 @@ export const Notifications = () => {
3636
</>
3737
);
3838
};
39+
40+
export default Notifications;

‎src/components/AppHeader/Notifications/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Notifications } from './Notifications';

‎src/components/AppHeader/PlatformSwitcher/index.tsx ‎src/components/AppHeader/PlatformSwitcher/PlatformSwitcher.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useTranslations } from '@deriv-com/translations';
22
import { PlatformSwitcher as UIPlatformSwitcher, PlatformSwitcherItem } from '@deriv-com/ui';
33
import { platformsConfig } from '../HeaderConfig';
44

5-
export const PlatformSwitcher = () => {
5+
const PlatformSwitcher = () => {
66
const { localize } = useTranslations();
77

88
return (
@@ -28,3 +28,5 @@ export const PlatformSwitcher = () => {
2828
</UIPlatformSwitcher>
2929
);
3030
};
31+
32+
export default PlatformSwitcher;

‎src/components/AppHeader/PlatformSwitcher/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as PlatformSwitcher } from './PlatformSwitcher';

‎src/components/BlockedScenarios/BlockedScenarios.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ReactComponent as P2pUnavailable } from '@/assets/p2p-unavailable.svg';
2+
import { useLiveChat } from '@/hooks';
23
import {
34
DerivLightIcCashierBlockedIcon,
45
DerivLightIcCashierLockedIcon,
@@ -19,6 +20,7 @@ type TBlockedScenariosObject = {
1920

2021
const BlockedScenarios = ({ type }: { type: string }) => {
2122
const { isMobile } = useDevice();
23+
const { LiveChatWidget } = useLiveChat();
2224

2325
const buttonTextSize = isMobile ? 'md' : 'sm';
2426
const iconSize = isMobile ? 96 : 128;
@@ -28,8 +30,9 @@ const BlockedScenarios = ({ type }: { type: string }) => {
2830
window.open(URLConstants.derivAppProduction, '_blank')?.focus();
2931
};
3032

31-
// TODO: implement this function to open live chat
32-
const openLiveChat = () => {};
33+
const openLiveChat = () => {
34+
LiveChatWidget.call('maximize');
35+
};
3336

3437
const blockedScenarios: TBlockedScenariosObject = {
3538
cashierLocked: {

‎src/components/BlockedScenarios/__tests__/BlockedScenarios.spec.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import { render, screen } from '@testing-library/react';
22
import userEvent from '@testing-library/user-event';
33
import BlockedScenarios from '../BlockedScenarios';
44

5+
jest.mock('@deriv-com/api-hooks', () => ({
6+
useAuthData: jest.fn(() => ({ activeLoginid: null })),
7+
}));
58
jest.mock('@deriv-com/ui', () => ({
69
...jest.requireActual('@deriv-com/ui'),
710
useDevice: () => ({ isDesktop: true }),

0 commit comments

Comments
 (0)