From f70d249a0d3f0f3a31ca95292f150d47abecb632 Mon Sep 17 00:00:00 2001 From: Mariano Perdomo Date: Fri, 27 Sep 2024 11:23:35 -0300 Subject: [PATCH] chore(zendesk): consolidate code --- .../SupportChatForGoldUserOnly.tsx | 79 ----------------- .../SupportChatForGoldUserOnly.types.ts | 3 - .../SupportChatForGoldUserOnly/index.ts | 2 - .../SupportChatForGoldUserOnly/index.tsx | 85 +++++++++++++++++++ .../ZendeskIframe/ZendeskIframe.types.ts | 4 - .../components/ZendeskIframe/index.ts | 2 - .../{ZendeskIframe.tsx => index.tsx} | 4 +- .../SupportChat/components/index.ts | 2 - .../src/components/SupportChat/hooks/index.ts | 4 - .../SupportChat/hooks/useSupportChat/index.ts | 2 - .../hooks/useSupportChat/useSupportChat.ts | 18 ---- .../useSupportChat/useSupportChat.types.ts | 3 - .../hooks/useSupportChatAvailability/index.ts | 2 - .../useSupportChatAvailability.ts | 21 ----- .../useSupportChatAvailability.types.ts | 7 -- .../hooks/useSupportChatMessage/index.ts | 5 -- .../useSupportChatMessage.ts | 25 ------ .../useSupportChatMessage.types.ts | 9 -- .../hooks/useSupportChatOpenState/index.ts | 2 - .../useSupportChatOpenState.ts | 29 ------- .../useSupportChatOpenState.types.ts | 3 - .../src/components/SupportChat/index.tsx | 2 - .../src/components/SupportChat/utils/index.ts | 1 - .../utils/waitForIframeContentToLoad/index.ts | 5 -- .../waitForIframeContentToLoad.ts | 15 ---- .../waitForIframeContentToLoad.types.ts | 7 -- .../src/layouts/Wallet/WalletLayout/index.tsx | 2 +- 27 files changed, 88 insertions(+), 255 deletions(-) delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/SupportChatForGoldUserOnly.tsx delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/SupportChatForGoldUserOnly.types.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/index.ts create mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/index.tsx delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/index.ts rename packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/{ZendeskIframe.tsx => index.tsx} (66%) delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/index.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/index.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChat/index.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChat/useSupportChat.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChat/useSupportChat.types.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatAvailability/index.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatAvailability/useSupportChatAvailability.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatAvailability/useSupportChatAvailability.types.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatMessage/index.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatMessage/useSupportChatMessage.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatMessage/useSupportChatMessage.types.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatOpenState/index.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatOpenState/useSupportChatOpenState.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatOpenState/useSupportChatOpenState.types.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/index.tsx delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/index.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/waitForIframeContentToLoad/index.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/waitForIframeContentToLoad/waitForIframeContentToLoad.ts delete mode 100644 packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/waitForIframeContentToLoad/waitForIframeContentToLoad.types.ts diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/SupportChatForGoldUserOnly.tsx b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/SupportChatForGoldUserOnly.tsx deleted file mode 100644 index 7a6a6a2c7bc..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/SupportChatForGoldUserOnly.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React, { useCallback, useEffect, useMemo } from 'react' -import { createPortal } from 'react-dom' -import { useDispatch } from 'react-redux' - -import { - useSupportChatAvailability, - useSupportChatMessage, - useSupportChatOpenState -} from 'components/SupportChat/hooks' -import { actions, selectors } from 'data' -import { Analytics } from 'data/types' -import { useRemote } from 'hooks' - -import { ZendeskIframe } from '../ZendeskIframe' -import { SupportChatForGoldUserOnlyComponent } from './SupportChatForGoldUserOnly.types' - -export const SupportChatForGoldUserOnly: SupportChatForGoldUserOnlyComponent = () => { - const iframeId = 'zendesk-iframe' - const portalElement = document.getElementById('contact-chat-portal') - const dispatch = useDispatch() - - const [isOpen] = useSupportChatOpenState() - const { data: userData } = useRemote(selectors.modules.profile.getUserData) - const { isAvailable } = useSupportChatAvailability({ iframeId }) - const { data: domains } = useRemote(selectors.core.walletOptions.getDomains) - - const { sendMessage } = useSupportChatMessage({ - iframeId - }) - - const trackCustomerSupportClickedEvent = useCallback(() => { - dispatch( - actions.analytics.trackEvent({ - key: Analytics.CUSTOMER_SUPPORT_CLICKED, - properties: {} - }) - ) - }, [dispatch]) - - const isGoldUser = useMemo(() => userData?.tiers?.current === 2, [userData]) - - const userFullname = useMemo( - () => userData?.firstName && userData.lastName && `${userData.firstName} ${userData.lastName}`, - [userData] - ) - - const iframeSrc = useMemo(() => { - if (!domains) return 'https://wallet-helper.blockchain.com' - - return `${domains.walletHelper}/wallet-helper/zendesk/#/` - }, [domains]) - - useEffect(() => { - if (isOpen) { - trackCustomerSupportClickedEvent() - } - }, [isOpen, trackCustomerSupportClickedEvent]) - - useEffect(() => { - if (isGoldUser && userData && isAvailable) { - // FIXME: adding a 7 second delay because sendMessage was preiously firing before react was loaded - // in the iframe and the chat button wasn't showing up. The proper solution should wait for the iframe - // to tell wallet that it's loaded properly and will receive this message. - setTimeout(() => { - sendMessage('showChat', { - email: userData.email, - fullName: userFullname - }) - }, 7000) - } - }, [userData, isAvailable, sendMessage, isGoldUser, userFullname]) - - if (!userData || !portalElement) return null - - return createPortal( - , - portalElement - ) -} diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/SupportChatForGoldUserOnly.types.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/SupportChatForGoldUserOnly.types.ts deleted file mode 100644 index 234299cb7e2..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/SupportChatForGoldUserOnly.types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { FC } from 'react' - -export type SupportChatForGoldUserOnlyComponent = FC diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/index.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/index.ts deleted file mode 100644 index 4bcd6b805c0..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { SupportChatForGoldUserOnly } from './SupportChatForGoldUserOnly' -export type { SupportChatForGoldUserOnlyComponent } from './SupportChatForGoldUserOnly.types' diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/index.tsx b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/index.tsx new file mode 100644 index 00000000000..e47bbbcce9f --- /dev/null +++ b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/SupportChatForGoldUserOnly/index.tsx @@ -0,0 +1,85 @@ +import React, { useCallback, useEffect, useMemo, useState } from 'react' +import { createPortal } from 'react-dom' +import { useDispatch } from 'react-redux' + +import { getDomains } from '@core/redux/walletOptions/selectors' +import { trackEvent } from 'data/analytics/slice' +import { getUserData } from 'data/modules/profile/selectors' +import { Analytics } from 'data/types' +import { useRemote } from 'hooks' + +import { ZendeskIframe } from '../ZendeskIframe' + +const iframeId = 'zendesk-iframe' + +export const SupportChatForGoldUserOnly = () => { + const portalElement = document.getElementById('contact-chat-portal') + const dispatch = useDispatch() + + const [isOpen, setIsOpen] = useState(false) + const { data: userData } = useRemote(getUserData) + const { data: domains } = useRemote(getDomains) + + const trackCustomerSupportClickedEvent = useCallback(() => { + dispatch( + trackEvent({ + key: Analytics.CUSTOMER_SUPPORT_CLICKED, + properties: {} + }) + ) + }, [dispatch]) + + const isGoldUser = useMemo(() => userData?.tiers?.current === 2, [userData]) + + const sendMessage = useCallback( + async (methodName: string, data: unknown) => { + const iframe = document.getElementById(iframeId) as HTMLIFrameElement + + if (!iframe?.contentWindow) { + console.warn('No Wallet Helper iframe') + return + } + + iframe.contentWindow.postMessage({ messageData: data, method: methodName }, '*') + }, + [iframeId] + ) + + const iframeSrc = useMemo(() => { + if (!domains) return 'https://wallet-helper.blockchain.com' + + return `${domains.walletHelper}/wallet-helper/zendesk/#/` + }, [domains]) + + const onMessage = (message: MessageEvent) => { + if (domains?.walletHelper && !message.origin.includes(domains?.walletHelper)) return + + if (typeof message.data.widgetOpen === 'boolean') { + setIsOpen(message.data.widgetOpen) + message.data.widgetOpen && trackCustomerSupportClickedEvent() + } + + if (message.data.widgetReady) { + if (!userData) return + + sendMessage('showChat', { + email: userData.email, + fullName: userData.firstName + ' ' + userData.lastName + }) + } + } + + useEffect(() => { + window.addEventListener('message', onMessage, false) + return () => { + window.removeEventListener('message', onMessage, false) + } + }, []) + + if (!userData || !portalElement || !isGoldUser) return null + + return createPortal( + , + portalElement + ) +} diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/ZendeskIframe.types.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/ZendeskIframe.types.ts index 7e5d89b8919..153487d9617 100644 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/ZendeskIframe.types.ts +++ b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/ZendeskIframe.types.ts @@ -1,9 +1,5 @@ -import { FC } from 'react' - export type ZendeskIframeProps = { id: string isOpen: boolean src: string } - -export type ZendeskIframeComponent = FC diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/index.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/index.ts deleted file mode 100644 index 40e09ff27a2..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { ZendeskIframe } from './ZendeskIframe' -export type { ZendeskIframeComponent, ZendeskIframeProps } from './ZendeskIframe.types' diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/ZendeskIframe.tsx b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/index.tsx similarity index 66% rename from packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/ZendeskIframe.tsx rename to packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/index.tsx index 920e867a13c..32e9dce3b01 100644 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/ZendeskIframe.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/ZendeskIframe/index.tsx @@ -1,9 +1,9 @@ import React from 'react' import { AbsoluteWrapper, Iframe, RelativeWrapper } from './ZendeskIframe.styles' -import { ZendeskIframeComponent } from './ZendeskIframe.types' +import { ZendeskIframeProps } from './ZendeskIframe.types' -export const ZendeskIframe: ZendeskIframeComponent = ({ id, isOpen, src }) => { +export const ZendeskIframe = ({ id, isOpen, src }: ZendeskIframeProps) => { return ( diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/index.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/index.ts deleted file mode 100644 index 9816f08fece..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/components/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './SupportChatForGoldUserOnly' -export * from './ZendeskIframe' diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/index.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/index.ts deleted file mode 100644 index 037ae5fbb2f..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './useSupportChat' -export * from './useSupportChatAvailability' -export * from './useSupportChatMessage' -export * from './useSupportChatOpenState' diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChat/index.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChat/index.ts deleted file mode 100644 index 7aa55fe2ea0..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChat/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { useSupportChat } from './useSupportChat' -export type { SupportChatHook } from './useSupportChat.types' diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChat/useSupportChat.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChat/useSupportChat.ts deleted file mode 100644 index 48c20aba411..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChat/useSupportChat.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { useCallback } from 'react' - -import { useSupportChatMessage } from '../useSupportChatMessage' -import { SupportChatHook } from './useSupportChat.types' - -export const useSupportChat: SupportChatHook = () => { - const { sendMessage } = useSupportChatMessage({ - iframeId: 'zendesk-iframe' - }) - - const open = useCallback(() => { - sendMessage('activate') - }, [sendMessage]) - - return { - open - } -} diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChat/useSupportChat.types.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChat/useSupportChat.types.ts deleted file mode 100644 index d7131157b9e..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChat/useSupportChat.types.ts +++ /dev/null @@ -1,3 +0,0 @@ -export type SupportChatHook = () => { - open: () => void -} diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatAvailability/index.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatAvailability/index.ts deleted file mode 100644 index 60d8e32c99d..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatAvailability/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { useSupportChatAvailability } from './useSupportChatAvailability' -export type { SupportChatAvailabilityHook } from './useSupportChatAvailability.types' diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatAvailability/useSupportChatAvailability.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatAvailability/useSupportChatAvailability.ts deleted file mode 100644 index 5d3a4d4860d..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatAvailability/useSupportChatAvailability.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { useEffect, useState } from 'react' - -import { waitForIframeContentToLoad } from 'components/SupportChat/utils' - -import { SupportChatAvailabilityHook } from './useSupportChatAvailability.types' - -export const useSupportChatAvailability: SupportChatAvailabilityHook = ({ iframeId }) => { - const [isAvailable, setAvailability] = useState(false) - - useEffect(() => { - const interval = setInterval(async () => { - setAvailability(await waitForIframeContentToLoad({ iframeId })) - }, 500) - - return () => clearInterval(interval) - }, [iframeId]) - - return { - isAvailable - } -} diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatAvailability/useSupportChatAvailability.types.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatAvailability/useSupportChatAvailability.types.ts deleted file mode 100644 index 51c0bd060d9..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatAvailability/useSupportChatAvailability.types.ts +++ /dev/null @@ -1,7 +0,0 @@ -type SupportChatAvailabilityHookProps = { - iframeId: string -} - -export type SupportChatAvailabilityHook = (props: SupportChatAvailabilityHookProps) => { - isAvailable: boolean -} diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatMessage/index.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatMessage/index.ts deleted file mode 100644 index 3b6e17fd2ef..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatMessage/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { useSupportChatMessage } from './useSupportChatMessage' -export type { - SupportChatMessageHook, - SupportChatMessageHookProps -} from './useSupportChatMessage.types' diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatMessage/useSupportChatMessage.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatMessage/useSupportChatMessage.ts deleted file mode 100644 index e5c500cb11a..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatMessage/useSupportChatMessage.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { useCallback } from 'react' - -import { waitForIframeContentToLoad } from 'components/SupportChat/utils' - -import { SendMessageCallback, SupportChatMessageHook } from './useSupportChatMessage.types' - -export const useSupportChatMessage: SupportChatMessageHook = ({ iframeId }) => { - const sendMessage: SendMessageCallback = useCallback( - async (methodName, data) => { - const iframe = document.getElementById(iframeId) as HTMLIFrameElement | null - - if (!iframe || !iframe.contentWindow || !(await waitForIframeContentToLoad({ iframeId }))) - return false - - iframe.contentWindow.postMessage({ messageData: data, method: methodName }, '*') - - return true - }, - [iframeId] - ) - - return { - sendMessage - } -} diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatMessage/useSupportChatMessage.types.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatMessage/useSupportChatMessage.types.ts deleted file mode 100644 index 2468ba0f44e..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatMessage/useSupportChatMessage.types.ts +++ /dev/null @@ -1,9 +0,0 @@ -export type SendMessageCallback = (methodName: string, data?: unknown) => Promise - -export type SupportChatMessageHookProps = { - iframeId: string -} - -export type SupportChatMessageHook = (props: SupportChatMessageHookProps) => { - sendMessage: SendMessageCallback -} diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatOpenState/index.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatOpenState/index.ts deleted file mode 100644 index 858f6d071cf..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatOpenState/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { useSupportChatOpenState } from './useSupportChatOpenState' -export type { SupportChatOpenStateHook } from './useSupportChatOpenState.types' diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatOpenState/useSupportChatOpenState.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatOpenState/useSupportChatOpenState.ts deleted file mode 100644 index 496e722adde..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatOpenState/useSupportChatOpenState.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { useCallback, useEffect, useState } from 'react' - -import { SupportChatOpenStateHook } from './useSupportChatOpenState.types' - -export const useSupportChatOpenState: SupportChatOpenStateHook = (initialValue = false) => { - const [isOpen, setOpen] = useState(initialValue) - - const onMessage = useCallback( - (event) => { - const message = event.data - // HMR/zendesk combo sends empty messages sometimes that result in widget state - // being set to close when it really is still open - if (message && typeof message.widgetOpen === 'boolean') { - setOpen(message.widgetOpen) - } - }, - [setOpen] - ) - - useEffect(() => { - window.addEventListener('message', onMessage, false) - - return () => { - window.removeEventListener('message', onMessage, false) - } - }, [onMessage]) - - return [isOpen, setOpen] -} diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatOpenState/useSupportChatOpenState.types.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatOpenState/useSupportChatOpenState.types.ts deleted file mode 100644 index a0fd6c236e6..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/hooks/useSupportChatOpenState/useSupportChatOpenState.types.ts +++ /dev/null @@ -1,3 +0,0 @@ -export type SupportChatOpenStateHook = ( - initialValue?: boolean -) => [boolean, (value: boolean) => void] diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/index.tsx b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/index.tsx deleted file mode 100644 index 3aa507ef26c..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export * from './components' -export { useSupportChat } from './hooks' diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/index.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/index.ts deleted file mode 100644 index d2a45eedaf9..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './waitForIframeContentToLoad' diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/waitForIframeContentToLoad/index.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/waitForIframeContentToLoad/index.ts deleted file mode 100644 index b09fdf6c4ef..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/waitForIframeContentToLoad/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { waitForIframeContentToLoad } from './waitForIframeContentToLoad' -export type { - WaitForIframeContentToLoadUtility, - WaitForIframeContentToLoadUtilityProps -} from './waitForIframeContentToLoad.types' diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/waitForIframeContentToLoad/waitForIframeContentToLoad.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/waitForIframeContentToLoad/waitForIframeContentToLoad.ts deleted file mode 100644 index 6faa91f81b3..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/waitForIframeContentToLoad/waitForIframeContentToLoad.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { WaitForIframeContentToLoadUtility } from './waitForIframeContentToLoad.types' - -export const waitForIframeContentToLoad: WaitForIframeContentToLoadUtility = async ({ - iframeId -}) => { - const iframe = document.getElementById(iframeId) as HTMLIFrameElement | null - - if (!iframe) return false - - const hasContent = !!iframe.contentWindow - - if (!hasContent) return false - - return true -} diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/waitForIframeContentToLoad/waitForIframeContentToLoad.types.ts b/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/waitForIframeContentToLoad/waitForIframeContentToLoad.types.ts deleted file mode 100644 index a0516c6a1a3..00000000000 --- a/packages/blockchain-wallet-v4-frontend/src/components/SupportChat/utils/waitForIframeContentToLoad/waitForIframeContentToLoad.types.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaitForIframeContentToLoadUtilityProps = { - iframeId: string -} - -export type WaitForIframeContentToLoadUtility = ( - props: WaitForIframeContentToLoadUtilityProps -) => Promise diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/WalletLayout/index.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/WalletLayout/index.tsx index b8f4e89f0d0..a19943177fd 100644 --- a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/WalletLayout/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/WalletLayout/index.tsx @@ -7,7 +7,7 @@ import { ServiceAnnouncement, StaticAnnouncement } from 'components/Announcement import { SofiBanner, UkBanner, UkFooterBanner } from 'components/Banner' import { CowboysCardComponent } from 'components/Card/CowboysCard' import ExchangePromo from 'components/Card/ExchangePromo' -import { SupportChatForGoldUserOnly } from 'components/SupportChat' +import { SupportChatForGoldUserOnly } from 'components/SupportChat/components/SupportChatForGoldUserOnly' import Tooltips from 'components/Tooltips' import { ModalName } from 'data/types' import ErrorBoundary from 'providers/ErrorBoundaryProvider'