[CP-2757] Added need help button on contacts import modal (#2030)

mudita · Aug 20, 2024 · 5a69a78 · 5a69a78
1 parent 5365056
commit 5a69a78
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/libs/core/__deprecated__/renderer/locales/default/en-US.json b/libs/core/__deprecated__/renderer/locales/default/en-US.json
@@ -924,6 +924,7 @@
   "module.genericViews.importContacts.providerModal.fileUploadButtonLabel": "Upload csv or vcard",
   "module.genericViews.importContacts.providerModal.googleButtonLabel": "Google",
   "module.genericViews.importContacts.providerModal.outlookButtonLabel": "Outlook",
+  "module.genericViews.importContacts.providerModal.needHelpButtonLabel": "Need help?",
   "module.genericViews.importContacts.loaderModal.title": "Loading",
   "module.genericViews.importContacts.loaderModal.description": "This will only take a moment...",
   "module.genericViews.importContacts.contactsListModal.title": "Select contacts",

diff --git a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-provider.tsx b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-provider.tsx
@@ -17,6 +17,9 @@ import {
   startImportAuthorization,
 } from "generic-view/store"
 import { ButtonSecondary } from "../../buttons/button-secondary"
+import { ButtonText } from "../../buttons/button-text"
+import { useHistory } from "react-router"
+import { URL_MAIN } from "Core/__deprecated__/renderer/constants/urls"
 
 const messages = defineMessages({
   title: {
@@ -34,10 +37,15 @@ const messages = defineMessages({
   fileUploadButtonLabel: {
     id: "module.genericViews.importContacts.providerModal.fileUploadButtonLabel",
   },
+  needHelpButtonLabel: {
+    id: "module.genericViews.importContacts.providerModal.needHelpButtonLabel",
+  },
 })
 
 export const ImportContactsProvider = () => {
   const dispatch = useDispatch<Dispatch>()
+  const history = useHistory()
+
   return (
     <>
       <Modal.TitleIcon config={{ type: IconType.ContactsBook }} />
@@ -136,6 +144,20 @@ export const ImportContactsProvider = () => {
             },
           }}
         />
+        <HelpLink
+          config={{
+            text: intl.formatMessage(messages.needHelpButtonLabel),
+            action: {
+              type: "custom",
+              callback: () => {
+                history.push(
+                  `${URL_MAIN.help}/6w2eIEGxkQVxScg0T2at98/7IYVFZKS6eQnPk9WLeUoFI`
+                )
+              },
+            },
+            modifiers: ["link", "hover-underline"],
+          }}
+        />
       </ButtonsWrapper>
     </>
   )
@@ -160,3 +182,14 @@ const ButtonWithIconStyled = styled(ButtonSecondary)`
     height: 2rem;
   }
 `
+
+const HelpLink = styled(ButtonText)`
+  && {
+    height: 2rem;
+    min-height: 2rem;
+  }
+
+  span {
+    font-size: ${({ theme }) => theme.fontSize.labelText};
+  }
+`