From 525880dbb8ec438418527941d31f5adcd68cca39 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Mon, 28 Oct 2024 16:09:31 +0100
Subject: [PATCH] Add feed details help links

---
 src/languages/en.ts                           |  3 +++
 src/languages/es.ts                           |  3 +++
 .../companyCards/addNew/DetailsStep.tsx       | 23 +++++++++++++++++++
 3 files changed, 29 insertions(+)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index f4501f758557..59085de429d8 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -3101,14 +3101,17 @@ const translations = {
                         processorLabel: 'Processor ID',
                         bankLabel: 'Financial institution (bank) ID',
                         companyLabel: 'Company ID',
+                        helpLabel: 'Where do I find these IDs?',
                     },
                     gl1025: {
                         title: `What's the Amex delivery file name?`,
                         fileNameLabel: 'Delivery file name',
+                        helpLabel: 'Where do I find the delivery file name?',
                     },
                     cdf: {
                         title: `What's the Mastercard distribution ID?`,
                         distributionLabel: 'Distribution ID',
+                        helpLabel: 'Where do I find the distribution ID?',
                     },
                 },
                 amexCorporate: 'Select this if the front of your cards say “Corporate”',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 6614afbc483d..853684a32a19 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -3140,14 +3140,17 @@ const translations = {
                         processorLabel: 'ID del procesador',
                         bankLabel: 'Identificación de la institución financiera (banco)',
                         companyLabel: 'Empresa ID',
+                        helpLabel: '¿Dónde encuentro estos IDs?',
                     },
                     gl1025: {
                         title: `¿Cuál es el nombre del archivo de entrega de Amex?`,
                         fileNameLabel: 'Nombre del archivo de entrega',
+                        helpLabel: '¿Dónde encuentro el nombre del archivo de entrega?',
                     },
                     cdf: {
                         title: `¿Cuál es el identificador de distribución de Mastercard?`,
                         distributionLabel: 'ID de distribución',
+                        helpLabel: '¿Dónde encuentro el ID de distribución?',
                     },
                 },
                 amexCorporate: 'Seleccione esto si el frente de sus tarjetas dice “Corporativa”',
diff --git a/src/pages/workspace/companyCards/addNew/DetailsStep.tsx b/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
index 2c719acd47d8..86a5410766b5 100644
--- a/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/DetailsStep.tsx
@@ -1,19 +1,25 @@
 import React, {useCallback} from 'react';
+import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
+import TextLink from '@components/TextLink';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import Navigation from '@navigation/Navigation';
+import variables from '@styles/variables';
 import * as CompanyCards from '@userActions/CompanyCards';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -27,6 +33,7 @@ type DetailsStepProps = {
 
 function DetailsStep({policyID}: DetailsStepProps) {
     const {translate} = useLocalize();
+    const theme = useTheme();
     const styles = useThemeStyles();
     const {inputCallbackRef} = useAutoFocusInput();
     const {canUseDirectFeeds} = usePermissions();
@@ -177,6 +184,22 @@ function DetailsStep({policyID}: DetailsStepProps) {
                     enabledWhenOffline
                 >
                     {renderInputs()}
+                    {feedProvider && !isStripeFeedProvider && (
+                        <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                            <Icon
+                                src={Expensicons.QuestionMark}
+                                width={variables.iconSizeExtraSmall}
+                                height={variables.iconSizeExtraSmall}
+                                fill={theme.icon}
+                            />
+                            <TextLink
+                                style={[styles.label, styles.textLineHeightNormal, styles.ml2]}
+                                href={CONST.COMPANY_CARDS_HELP}
+                            >
+                                {translate(`workspace.companyCards.addNewCard.feedDetails.${feedProvider}.helpLabel`)}
+                            </TextLink>
+                        </View>
+                    )}
                 </FormProvider>
             </ScrollView>
         </ScreenWrapper>