Skip to content

Commit

Permalink
CSIT-1559/Prince/add livechat widget call check (deriv-com#17257)
Browse files Browse the repository at this point in the history 
* fix: add livechat widget call check

* fix: whatsapp issue on freshchats

* chore: pass country to growthbook on login using cloudflare check

* fix: import issue

* chore: added test case for getCountry

* fix: test error
  • Loading branch information
@prince-deriv
prince-deriv authored Oct 21, 2024
1 parent 326c82a commit 5d94382
Show file tree
Hide file tree
Showing 27 changed files with 104 additions and 56 deletions.
2 changes: 1 addition & 1 deletion packages/account/src/Components/poi/status/limited/limited.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const POILimited = () => (
<span
key={0}
className='link link--orange'
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
/>,
]}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/account/src/Configs/poi-error-config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Localize } from '@deriv/translations';
import { DerivLightNameDobPoiIcon, DerivLightDobPoiIcon, DerivLightNamePoiIcon } from '@deriv/quill-icons';
import { getIDVDocumentType } from '../Helpers/utils';

const handleOnClick = () => window.LiveChatWidget.call('maximize');
const handleOnClick = () => window.LiveChatWidget?.call('maximize');

export const GENERIC_ERROR_MESSAGE = (
<Localize i18n_default_text='Sorry, an internal error occurred. Hit the above checkbox to try again.' />
Expand Down
2 changes: 1 addition & 1 deletion ...ages/appstore/src/components/modals/wallets-migration-failed/wallets-migration-failed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const WalletsMigrationFailed = observer(() => {
};

const handleLivechatButtonClick = () => {
window.LiveChatWidget.call('maximize');
window.LiveChatWidget?.call('maximize');
setWalletsMigrationFailedPopup(false);
};

Expand Down
16 changes: 8 additions & 8 deletions packages/cashier/src/components/cashier-locked/cashier-locked-provider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ const getMessage = ({
<span
key={0}
className='link link--orange'
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
/>,
]}
/>
Expand All @@ -147,7 +147,7 @@ const getMessage = ({
<span
key={0}
className='link link--orange'
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
/>,
]}
/>
Expand Down Expand Up @@ -378,7 +378,7 @@ const getMessage = ({
<span
key={0}
className='link link--orange'
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
/>,
]}
/>
Expand All @@ -395,7 +395,7 @@ const getMessage = ({
<span
key={0}
className='link link--orange'
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
/>,
]}
/>
Expand Down Expand Up @@ -471,7 +471,7 @@ const getMessage = ({
<span
key={0}
className='link link--orange'
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
/>,
]}
/>
Expand All @@ -488,7 +488,7 @@ const getMessage = ({
<span
key={0}
className='link link--orange'
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
/>,
]}
/>
Expand All @@ -505,7 +505,7 @@ const getMessage = ({
<span
key={0}
className='link link--orange'
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
/>,
]}
/>
Expand All @@ -531,7 +531,7 @@ const getMessage = ({
<span
key={0}
className='link link--orange'
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
/>,
]}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/cashier/src/components/side-notes/side-note-faq/side-note-faq.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const SideNoteFAQ = ({ transaction_type }: TSideNoteFAQProps) => {
const { isMobile } = useDevice();
const { is_eu } = client;

const onClickHandler = () => window.LiveChatWidget.call('maximize');
const onClickHandler = () => window.LiveChatWidget?.call('maximize');

const deposit_faq_list = useMemo(() => {
return [
Expand Down
2 changes: 1 addition & 1 deletion ...onboarding/components/cashier-onboarding-side-notes/cashier-onboarding-side-note-fiat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const CashierOnboardingSideNoteFiat: React.FC = observer(() => {
<a
key={0}
className='link link--orange'
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
/>
),
]}
Expand Down
2 changes: 1 addition & 1 deletion packages/cashier/src/modules/deposit-fiat/deposit-fiat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const DepositFiat: React.FC = observer(() => {
const { common, traders_hub } = useStore();
const { is_from_derivgo } = common;
const { is_low_risk_cr_eu_real } = traders_hub;
const onClickHandler = () => window.LiveChatWidget.call('maximize');
const onClickHandler = () => window.LiveChatWidget?.call('maximize');

return (
<PageContainer
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/open-livechat-link/open-livechat-link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const OpenLiveChatLink = ({ children, text_size, className }: React.PropsWithChi
<button
type='button'
className={clsx('open-livechat__link', className)}
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
>
<Text size={text_size || 'xs'} weight='bold' color='brand-red-coral'>
{children || <Localize i18n_default_text='live chat' />}
Expand Down
8 changes: 6 additions & 2 deletions packages/core/src/App/Components/Elements/WhatsApp/whatsapp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,18 @@ import { Popover, Icon } from '@deriv/components';
import { localize } from '@deriv/translations';
import { useDevice } from '@deriv-com/ui';
import { URLConstants } from '@deriv-com/utils';
import { useIsLiveChatWidgetAvailable } from '@deriv/hooks';
import { useGrowthbookGetFeatureValue, useIsLiveChatWidgetAvailable } from '@deriv/hooks';

const WhatsApp = ({ showPopover, onClick }: { showPopover?: boolean; onClick?: () => void }) => {
const { isDesktop } = useDevice();

const { is_livechat_available } = useIsLiveChatWidgetAvailable();

if (!is_livechat_available) return null;
const [enable_freshworks_live_chat] = useGrowthbookGetFeatureValue({
featureFlag: 'enable_freshworks_live_chat',
});

if (!is_livechat_available && !enable_freshworks_live_chat) return null;

if (!isDesktop)
return (
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/App/Containers/OneTimeDepositModal/one-time-deposit-modal-content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import DepositCrypto from '@deriv/cashier/src/modules/deposit-crypto/components/
export const OneTimeDepositModalContent = ({ is_crypto_provider = false }: { is_crypto_provider?: boolean }) => {
const { isDesktop } = useDevice();

const onLiveChatClick = () => window.LiveChatWidget.call('maximize');
const onLiveChatClick = () => window.LiveChatWidget?.call('maximize');

return (
<div
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/App/Containers/RealAccountSignup/change-account-currency.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const ChangeAccountCurrency = observer(
className='link link--orange'
onClick={() => {
closeRealAccountSignup();
window.LiveChatWidget.call('maximize');
window.LiveChatWidget?.call('maximize');
}}
/>,
]}
Expand Down
7 changes: 5 additions & 2 deletions packages/core/src/App/Containers/RealAccountSignup/signup-error-content.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const Message = ({ code, message, details }) => {
<span
className='chat-inline'
key={0}
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
/>,
]}
/>
Expand Down Expand Up @@ -105,7 +105,10 @@ const ErrorCTA = ({ code, onConfirm }) => {
return <TryAgain text={localize('Try a different currency')} onConfirm={onConfirm} />;
case 'DuplicateAccount':
return (
<TryAgain text={localize('Go to live chat')} onConfirm={() => window.LiveChatWidget.call('maximize')} />
<TryAgain
text={localize('Go to live chat')}
onConfirm={() => window.LiveChatWidget?.call('maximize')}
/>
);
case 'InputValidationFailed':
case 'PoBoxInAddress':
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/App/Containers/Redirect/redirect.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const Redirect = observer(() => {
}

const openLivechat = () => {
window.LiveChatWidget.call('maximize');
window.LiveChatWidget?.call('maximize');
};

const url_query_string = window.location.search;
Expand Down
5 changes: 3 additions & 2 deletions packages/core/src/Stores/client-store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
} from '@deriv/shared';
import { Analytics } from '@deriv-com/analytics';
import { URLConstants } from '@deriv-com/utils';
import { getCountry } from '@deriv/utils';

import { getLanguage, localize, getRedirectionLanguage } from '@deriv/translations';

Expand Down Expand Up @@ -1789,7 +1790,7 @@ export default class ClientStore extends BaseStore {
const broker = LocalStore?.get('active_loginid')
?.match(/[a-zA-Z]+/g)
?.join('');
setTimeout(() => {
setTimeout(async () => {
const analytics_config = {
account_type: broker === 'null' ? 'unlogged' : broker,
residence_country: this.residence,
Expand All @@ -1798,7 +1799,7 @@ export default class ClientStore extends BaseStore {
language: getLanguage(),
device_language: navigator?.language || 'en-EN',
user_language: getLanguage().toLowerCase(),
country: Cookies.get('clients_country') || Cookies?.getJSON('website_status')?.clients_country,
country: await getCountry(),
utm_source: ppc_campaign_cookies?.utm_source,
utm_medium: ppc_campaign_cookies?.utm_medium,
utm_campaign: ppc_campaign_cookies?.utm_campaign,
Expand Down
14 changes: 7 additions & 7 deletions packages/core/src/Stores/notification-store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -823,7 +823,7 @@ export default class NotificationStore extends BaseStore {
message: localize('Please contact us via live chat to unlock it.'),
action: {
onClick: () => {
window.LiveChatWidget.call('maximize');
window.LiveChatWidget?.call('maximize');
},
text: localize('Go to live chat'),
},
Expand Down Expand Up @@ -1077,7 +1077,7 @@ export default class NotificationStore extends BaseStore {
message: localize('Please contact us via live chat to enable withdrawals.'),
action: {
onClick: () => {
window.LiveChatWidget.call('maximize');
window.LiveChatWidget?.call('maximize');
},
text: localize('Go to live chat'),
},
Expand Down Expand Up @@ -1273,7 +1273,7 @@ export default class NotificationStore extends BaseStore {
),
action: {
onClick: () => {
window.LiveChatWidget.call('maximize');
window.LiveChatWidget?.call('maximize');
},
text: localize('Go to live chat'),
},
Expand Down Expand Up @@ -1386,7 +1386,7 @@ export default class NotificationStore extends BaseStore {
message: localize('Please contact us via live chat.'),
action: {
onClick: () => {
window.LiveChatWidget.call('maximize');
window.LiveChatWidget?.call('maximize');
},
text: localize('Go to live chat'),
},
Expand All @@ -1398,7 +1398,7 @@ export default class NotificationStore extends BaseStore {
message: localize('Please contact us via live chat to enable withdrawals.'),
action: {
onClick: () => {
window.LiveChatWidget.call('maximize');
window.LiveChatWidget?.call('maximize');
},
text: localize('Go to live chat'),
},
Expand Down Expand Up @@ -1573,7 +1573,7 @@ export default class NotificationStore extends BaseStore {
),
action: {
onClick: async () => {
window.LiveChatWidget.call('maximize');
window.LiveChatWidget?.call('maximize');
},
text: localize('Go to LiveChat'),
},
Expand Down Expand Up @@ -1741,7 +1741,7 @@ export default class NotificationStore extends BaseStore {
: {
text: localize('Contact live chat'),
onClick: () => {
window.LiveChatWidget.call('maximize');
window.LiveChatWidget?.call('maximize');
},
};

Expand Down
17 changes: 1 addition & 16 deletions packages/core/src/Utils/Analytics/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { getLanguage } from '@deriv/translations';
import { LocalStore, getAppId } from '@deriv/shared';
import { MAX_MOBILE_WIDTH } from '../../Constants';
import FIREBASE_INIT_DATA from '../../../../api/src/remote_config.json';
import { getCountry } from '@deriv/utils';

export const AnalyticsInitializer = async () => {
const account_type = LocalStore?.get('active_loginid')
Expand All @@ -24,22 +25,6 @@ export const AnalyticsInitializer = async () => {
}
: Cookies.getJSON('utm_data');

/*
Temp solution to fetch country and handle experiments without causing inconsistencies to the users.
*/

const getCountry = async () => {
try {
const response = await fetch('https://www.cloudflare.com/cdn-cgi/trace').catch(() => null);
const text = response ? await response.text().catch(() => '') : '';
const entries = text ? text.split('\n').map(v => v.split('=', 2)) : [];
const data = entries.length ? Object.fromEntries(entries) : {};
return data?.loc?.toLowerCase() ?? '';
} catch {
return '';
}
};

const config = {
growthbookKey: flags.marketing_growthbook ? process.env.GROWTHBOOK_CLIENT_KEY : undefined,
growthbookDecryptionKey: flags.marketing_growthbook ? process.env.GROWTHBOOK_DECRYPTION_KEY : undefined,
Expand Down
2 changes: 1 addition & 1 deletion packages/hooks/src/useIsLiveChatWidgetAvailable.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const useIsLiveChatWidgetAvailable = () => {
const [is_livechat_available, setIsLivechatAvailable] = useState(false);

useEffect(() => {
window.LiveChatWidget.on('ready', data => {
window.LiveChatWidget?.on('ready', data => {
if (data.state.availability === 'online') setIsLivechatAvailable(true);
});
}, []);
Expand Down
2 changes: 1 addition & 1 deletion packages/hooks/src/useLiveChat.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const useLiveChat = (client_information: TLiveChatClientInformation) => {

useEffect(() => {
if (is_client_store_initialized && cs_chat_livechat) {
window.LiveChatWidget.init();
window.LiveChatWidget?.init();
}
}, [is_client_store_initialized, cs_chat_livechat]);

Expand Down
2 changes: 1 addition & 1 deletion packages/p2p/src/components/dp2p-blocked/dp2p-blocked-description.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const Dp2pBlockedDescription = () => {
<span
key={0}
className='link link--orange'
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
/>,
]}
/>
Expand Down
2 changes: 1 addition & 1 deletion ...c/components/modal-manager/modals/ad-visibility-error-modal/ad-visibility-error-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const AdVisibilityErrorModal = ({ error_code }: TAdVisibilityErrorModalProps) =>
<a
key={2}
className='link link--orange'
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
/>,
]}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/shared/src/utils/constants/phone-number-verification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const getUseRequestPhoneNumberOTPErrorMessage = (
<span
key={0}
className='phone-verification__card--inputfield__livechat'
onClick={() => window.LiveChatWidget.call('maximize')}
onClick={() => window.LiveChatWidget?.call('maximize')}
/>,
]}
/>
Expand Down
Loading

0 comments on commit 5d94382

Please sign in to comment.