PaymentModal: Fix checkout terms (#4268)

src/api/gramjs/methods/payments.ts

@@ -136,6 +136,7 @@ export async function getPaymentForm(inputInvoice: ApiRequestInputInvoice) {
     form: buildApiPaymentForm(result),
     invoice: buildApiInvoiceFromForm(result),
     users: result.users.map(buildApiUser).filter(Boolean),
+    botId: result.botId.toString(),
   };
 }
 

src/components/payment/Checkout.tsx

@@ -3,7 +3,7 @@ import React, { memo, useCallback } from '../../lib/teact/teact';
 import { getActions } from '../../global';
 
 import type {
-  ApiChat, ApiInvoice, ApiPaymentCredentials,
+  ApiInvoice, ApiPaymentCredentials,
 } from '../../api/types';
 import type { FormEditDispatch } from '../../hooks/reducers/usePaymentReducer';
 import type { LangCode, Price } from '../../types';
@@ -26,7 +26,6 @@ import Skeleton from '../ui/placeholder/Skeleton';
 import styles from './Checkout.module.scss';
 
 export type OwnProps = {
-  chat?: ApiChat;
   invoice?: ApiInvoice;
   checkoutInfo?: {
     paymentMethod?: string;
@@ -35,6 +34,7 @@ export type OwnProps = {
     name?: string;
     phone?: string;
     shippingMethod?: string;
+    botName?: string;
   };
   prices?: Price[];
   totalPrice?: number;
@@ -48,10 +48,10 @@ export type OwnProps = {
   onAcceptTos?: (isAccepted: boolean) => void;
   savedCredentials?: ApiPaymentCredentials[];
   isPaymentFormUrl?: boolean;
+  botName?: string;
 };
 
 const Checkout: FC<OwnProps> = ({
-  chat,
   invoice,
   prices,
   shippingPrices,
@@ -66,6 +66,7 @@ const Checkout: FC<OwnProps> = ({
   hasShippingOptions,
   savedCredentials,
   isPaymentFormUrl,
+  botName,
 }) => {
   const { setPaymentStep } = getActions();
 
@@ -129,7 +130,7 @@ const Checkout: FC<OwnProps> = ({
   }
 
   function renderTosLink(url: string, isRtl?: boolean) {
-    const langString = lang('PaymentCheckoutAcceptRecurrent', chat?.title);
+    const langString = lang('PaymentCheckoutAcceptRecurrent', botName);
     const langStringSplit = langString.split('*');
     return (
       <>

src/components/payment/PaymentModal.tsx

@@ -70,6 +70,7 @@ type StateProps = {
   passwordValidUntil?: number;
   isExtendedMedia?: boolean;
   isPaymentFormUrl?: boolean;
+  botName?: string;
 };
 
 type GlobalStateProps = Pick<TabState['payment'], (
@@ -83,7 +84,6 @@ const PaymentModal: FC<OwnProps & StateProps & GlobalStateProps> = ({
   isOpen,
   onClose,
   step,
-  chat,
   shippingOptions,
   savedInfo,
   canSaveCredentials,
@@ -113,6 +113,7 @@ const PaymentModal: FC<OwnProps & StateProps & GlobalStateProps> = ({
   passwordValidUntil,
   isExtendedMedia,
   isPaymentFormUrl,
+  botName,
 }) => {
   const {
     loadPasswordInfo,
@@ -292,7 +293,6 @@ const PaymentModal: FC<OwnProps & StateProps & GlobalStateProps> = ({
       case PaymentStep.Checkout:
         return (
           <Checkout
-            chat={chat}
             prices={prices}
             dispatch={paymentDispatch}
             shippingPrices={paymentState.shipping && shippingOptions
@@ -309,6 +309,7 @@ const PaymentModal: FC<OwnProps & StateProps & GlobalStateProps> = ({
             savedCredentials={savedCredentials}
             isTosAccepted={isTosAccepted}
             onAcceptTos={setIsTosAccepted}
+            botName={botName}
           />
         );
       case PaymentStep.SavedPayments:
@@ -647,6 +648,7 @@ export default memo(withGlobal<OwnProps>(
       temporaryPassword,
       isExtendedMedia,
       url,
+      botName,
     } = selectTabState(global).payment;
 
     let providerName = nativeProvider;
@@ -700,6 +702,7 @@ export default memo(withGlobal<OwnProps>(
       savedCredentials,
       passwordValidUntil: temporaryPassword?.validUntil,
       isExtendedMedia,
+      botName,
     };
   },
 )(PaymentModal));

src/global/actions/api/payments.ts

@@ -33,6 +33,7 @@ import {
   selectSmartGlocalCredentials,
   selectStripeCredentials,
   selectTabState,
+  selectUser,
 } from '../../selectors';
 
 addActionHandler('validateRequestedInfo', (global, actions, payload): ActionReturnType => {
@@ -102,12 +103,17 @@ async function getPaymentForm<T extends GlobalState>(
     return undefined;
   }
 
-  const { form, invoice, users } = result;
+  const {
+    form, invoice, users, botId,
+  } = result;
 
   global = getGlobal();
+  global = addUsers(global, buildCollectionByKey(users, 'id'));
   global = setPaymentForm(global, form, tabId);
   global = setPaymentStep(global, PaymentStep.Checkout, tabId);
-  global = addUsers(global, buildCollectionByKey(users, 'id'));
+  global = updatePayment(global, {
+    botName: selectUser(global, botId)?.firstName,
+  }, tabId);
   setGlobal(global);
 
   return invoice;

src/global/types.ts

@@ -490,6 +490,7 @@ export type TabState = {
       validUntil: number;
     };
     url?: string;
+    botName?: string;
   };
 
   chatCreation?: {