From 0b3db96ea21ee834cf7d8e686d5705ba024c62ee Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Fri, 5 Aug 2022 19:23:25 +0200 Subject: [PATCH] Payment: Support closing form by event from t.me (#1983) --- src/api/gramjs/methods/chats.ts | 4 +- src/components/common/UsernameInput.tsx | 6 +-- src/components/left/main/LeftMainHeader.tsx | 2 +- src/components/main/WebAppModal.tsx | 4 +- .../main/premium/PremiumMainModal.tsx | 5 +-- .../middle/message/ContextMenuContainer.tsx | 4 +- src/components/payment/ConfirmPayment.tsx | 40 +++++++++++++++++-- src/config.ts | 3 ++ src/global/actions/apiUpdaters/payments.ts | 9 ++++- src/global/helpers/chats.ts | 4 +- src/util/environment.ts | 2 + 11 files changed, 64 insertions(+), 19 deletions(-) diff --git a/src/api/gramjs/methods/chats.ts b/src/api/gramjs/methods/chats.ts index 4e3ffc17..2d6fac9f 100644 --- a/src/api/gramjs/methods/chats.ts +++ b/src/api/gramjs/methods/chats.ts @@ -1206,11 +1206,11 @@ function preparePeers( ) { const store: Record = {}; - result.chats.forEach((chat) => { + result.chats?.forEach((chat) => { store[`chat${chat.id}`] = chat; }); - result.users.forEach((user) => { + result.users?.forEach((user) => { store[`user${user.id}`] = user; }); diff --git a/src/components/common/UsernameInput.tsx b/src/components/common/UsernameInput.tsx index 84fd1252..a39f324a 100644 --- a/src/components/common/UsernameInput.tsx +++ b/src/components/common/UsernameInput.tsx @@ -4,6 +4,7 @@ import React, { useState, useCallback, memo, useEffect, useMemo, } from '../../lib/teact/teact'; +import { TME_LINK_PREFIX } from '../../config'; import { debounce } from '../../util/schedulers'; import useLang from '../../hooks/useLang'; @@ -20,7 +21,6 @@ type OwnProps = { const MIN_USERNAME_LENGTH = 5; const MAX_USERNAME_LENGTH = 32; -const LINK_PREFIX = 'https://t.me/'; const LINK_PREFIX_REGEX = /https:\/\/t\.me\/?/i; const USERNAME_REGEX = /^([a-zA-Z0-9_]+)$/; @@ -79,7 +79,7 @@ const SettingsEditProfile: FC = ({ const handleUsernameChange = useCallback((e: ChangeEvent) => { const newUsername = e.target.value.trim().replace(LINK_PREFIX_REGEX, ''); setUsername(newUsername); - e.target.value = `${asLink ? LINK_PREFIX : ''}${newUsername}`; + e.target.value = `${asLink ? TME_LINK_PREFIX : ''}${newUsername}`; const isValid = isUsernameValid(newUsername); @@ -96,7 +96,7 @@ const SettingsEditProfile: FC = ({ return ( ; -const PRODUCTION_HOSTNAME = 'web.telegram.org'; const LEGACY_VERSION_URL = 'https://web.telegram.org/?legacy=1'; const WEBK_VERSION_URL = 'https://web.telegram.org/k/'; diff --git a/src/components/main/WebAppModal.tsx b/src/components/main/WebAppModal.tsx index df025ab1..ae826cf7 100644 --- a/src/components/main/WebAppModal.tsx +++ b/src/components/main/WebAppModal.tsx @@ -10,6 +10,7 @@ import type { ThemeKey } from '../../types'; import windowSize from '../../util/windowSize'; import { IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment'; +import { TME_LINK_PREFIX } from '../../config'; import { selectCurrentChat, selectTheme, selectUser } from '../../global/selectors'; import buildClassName from '../../util/buildClassName'; import { extractCurrentThemeParams, validateHexColor } from '../../util/themeStyle'; @@ -54,7 +55,6 @@ type StateProps = { const MAIN_BUTTON_ANIMATION_TIME = 250; const PROLONG_INTERVAL = 45000; // 45s const ANIMATION_WAIT = 400; -const LINK_PREFIX = 'https://t.me/'; const SANDBOX_ATTRIBUTES = [ 'allow-scripts', 'allow-same-origin', @@ -110,7 +110,7 @@ const WebAppModal: FC = ({ } if (eventType === 'web_app_open_tg_link') { - const linkUrl = LINK_PREFIX + eventData.path_full; + const linkUrl = TME_LINK_PREFIX + eventData.path_full; openTelegramLink({ url: linkUrl }); closeWebApp(); } diff --git a/src/components/main/premium/PremiumMainModal.tsx b/src/components/main/premium/PremiumMainModal.tsx index 3f2f00ee..8b50fc62 100644 --- a/src/components/main/premium/PremiumMainModal.tsx +++ b/src/components/main/premium/PremiumMainModal.tsx @@ -12,6 +12,7 @@ import PremiumFeatureModal, { PREMIUM_FEATURE_SECTIONS, PREMIUM_FEATURE_TITLES, } from './PremiumFeatureModal'; +import { TME_LINK_PREFIX } from '../../../config'; import { formatCurrency } from '../../../util/formatCurrency'; import buildClassName from '../../../util/buildClassName'; import { selectIsCurrentUserPremium, selectUser } from '../../../global/selectors'; @@ -77,8 +78,6 @@ type StateProps = { premiumBotUsername?: string; }; -const LINK_PREFIX = 'https://t.me/'; - const PremiumMainModal: FC = ({ isOpen, fromUser, @@ -127,7 +126,7 @@ const PremiumMainModal: FC = ({ }); } else if (premiumBotUsername) { openTelegramLink({ - url: `${LINK_PREFIX}${premiumBotUsername}?start=${startParam || 'promo'}`, + url: `${TME_LINK_PREFIX}${premiumBotUsername}?start=${startParam || 'promo'}`, }); closePremiumModal(); } diff --git a/src/components/middle/message/ContextMenuContainer.tsx b/src/components/middle/message/ContextMenuContainer.tsx index 46969b05..49f89344 100644 --- a/src/components/middle/message/ContextMenuContainer.tsx +++ b/src/components/middle/message/ContextMenuContainer.tsx @@ -20,7 +20,7 @@ import { isActionMessage, isChatChannel, isChatGroup, isOwnMessage, areReactionsEmpty, isUserId, isMessageLocal, getMessageVideo, } from '../../../global/helpers'; -import { SERVICE_NOTIFICATIONS_USER_ID } from '../../../config'; +import { SERVICE_NOTIFICATIONS_USER_ID, TME_LINK_PREFIX } from '../../../config'; import { getDayStartAt } from '../../../util/dateFormat'; import buildClassName from '../../../util/buildClassName'; import { REM } from '../../common/helpers/mediaDimensions'; @@ -326,7 +326,7 @@ const ContextMenuContainer: FC = ({ }, [closeMenu, copyMessagesByIds]); const handleCopyLink = useCallback(() => { - copyTextToClipboard(`https://t.me/${chatUsername || `c/${message.chatId.replace('-', '')}`}/${message.id}`); + copyTextToClipboard(`${TME_LINK_PREFIX}${chatUsername || `c/${message.chatId.replace('-', '')}`}/${message.id}`); closeMenu(); }, [chatUsername, closeMenu, message]); diff --git a/src/components/payment/ConfirmPayment.tsx b/src/components/payment/ConfirmPayment.tsx index 5281e6d2..62b8f01f 100644 --- a/src/components/payment/ConfirmPayment.tsx +++ b/src/components/payment/ConfirmPayment.tsx @@ -1,6 +1,9 @@ -import type { FC } from '../../lib/teact/teact'; -import React, { memo } from '../../lib/teact/teact'; +import React, { memo, useCallback, useEffect } from '../../lib/teact/teact'; +import { getActions } from '../../global'; +import type { FC } from '../../lib/teact/teact'; + +import { TME_LINK_PREFIX } from '../../config'; import useLang from '../../hooks/useLang'; import './ConfirmPayment.scss'; @@ -9,16 +12,47 @@ export type OwnProps = { url: string; }; +interface IframeCallbackEvent { + eventType: string; + eventData: { + path_full: string; + }; +} + const ConfirmPayment: FC = ({ url }) => { + const { closePaymentModal, openTelegramLink } = getActions(); + const lang = useLang(); + const handleMessage = useCallback((event: MessageEvent) => { + try { + const data = JSON.parse(event.data) as IframeCallbackEvent; + const { eventType, eventData } = data; + + if (eventType !== 'web_app_open_tg_link') { + return; + } + + const linkUrl = TME_LINK_PREFIX + eventData.path_full; + openTelegramLink({ url: linkUrl }); + closePaymentModal(); + } catch (err) { + // Ignore other messages + } + }, [closePaymentModal, openTelegramLink]); + + useEffect(() => { + window.addEventListener('message', handleMessage); + return () => window.removeEventListener('message', handleMessage); + }, [handleMessage]); + return (