Merge pull request #703 from vtexdocs/feat/troubleshooting-section-su…

…pport feat(index.tsx): adding new support component to the troubleshooting page
vtexdocs · Jun 20, 2024 · dddbbc0 · dddbbc0
2 parents 0f4b093 + 78f691b
commit dddbbc0
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 2 deletions.
diff --git a/public/navigation.json b/public/navigation.json
@@ -14879,7 +14879,7 @@
           "name": "VTEX Troubleshooting overview",
           "slug": "overview",
           "origin": "",
-          "type": "markdown",
+          "type": "category",
           "children": [
             {
               "name": "Development",

diff --git a/src/messages/language.json b/src/messages/language.json
@@ -91,6 +91,7 @@
   "troubleshooting.description": "Find practical solutions to development issues.",
   "troubleshooting.title": "Troubleshooting",
   "troubleshooting.subtitle": "Find practical solutions to development issues in our troubleshooting guides.",
+  "troubleshooting_page_other_resources.title": "Still having trouble?",
   "relese-note-days-elapsed": "days ago",
   "error_loading_image": "An error occurred while trying to load the image.",
   "multiselect_apply_button": "Apply",

diff --git a/src/pages/docs/troubleshooting/index.tsx b/src/pages/docs/troubleshooting/index.tsx
@@ -1,5 +1,5 @@
 import { Fragment, useState, useContext, useMemo } from 'react'
-import { Box, Flex } from '@vtex/brand-ui'
+import { Box, Flex, Link, Text } from '@vtex/brand-ui'
 import { GetStaticProps, NextPage } from 'next'
 import getNavigation from 'utils/getNavigation'
 import { DocumentationTitle, UpdatesTitle } from 'utils/typings/unionTypes'
@@ -13,6 +13,7 @@ import { PreviewContext } from 'utils/contexts/preview'
 import getTroubleshootingData from 'utils/getTroubleshootingData'
 import TroubleshootingCard from 'components/troubleshooting-card'
 import Pagination from 'components/pagination'
+import { resourceTroubleshooting } from 'utils/constants'
 
 interface Props {
   sidebarfallback: any //eslint-disable-line
@@ -81,6 +82,30 @@ const TroubleshootingPage: NextPage<Props> = ({
             pageCount={page.total}
             onPageChange={handleClick}
           />
+          <Box sx={styles.resourcesSectionContainer}>
+            <Text sx={styles.contentTitle}>
+              {messages['troubleshooting_page_other_resources.title']}
+            </Text>
+            <Box>
+              {resourceTroubleshooting.map((resourceTroubleshooting) => (
+                <Box
+                  key={resourceTroubleshooting.title}
+                  sx={styles.resourceContainer}
+                >
+                  <Link
+                    target="_blank"
+                    href={resourceTroubleshooting.link}
+                    sx={styles.resourceTitle}
+                  >
+                    {resourceTroubleshooting.title}
+                  </Link>
+                  <Text sx={styles.resourceDescription}>
+                    {resourceTroubleshooting.description}
+                  </Text>
+                </Box>
+              ))}
+            </Box>
+          </Box>
         </Box>
       </Fragment>
     </>

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -12,6 +12,7 @@ import {
   getLearningCenterURL,
   getGithubURL,
   getHelpCenterURL,
+  getHelpCenterTroubleshootingURL,
   getSupportURL,
 } from 'utils/get-url'
 
@@ -22,6 +23,7 @@ import {
   CodeSamplesElement,
   ResourceDataElement,
   AdminDataElement,
+  ResourceDataTroubleshooting,
 } from './typings/types'
 import EditIcon from 'components/icons/edit-icon'
 import MenuIcon from 'components/icons/menu-icon'
@@ -184,6 +186,27 @@ export const resources: ResourceDataElement[] = [
   },
 ]
 
+export const resourceTroubleshooting: ResourceDataTroubleshooting[] = [
+  {
+    title: 'Community',
+    description:
+      messages['app_development_page_other_resources_community.description'],
+    link: getCommunityURL(),
+  },
+  {
+    title: 'Help Center',
+    description:
+      messages['app_development_page_other_resources_help_center.description'],
+    link: getHelpCenterTroubleshootingURL(),
+  },
+  {
+    title: 'Support',
+    description:
+      messages['app_development_page_other_resources_support.description'],
+    link: getSupportURL(),
+  },
+]
+
 export const codeSamples: CodeSamplesElement[] = [
   {
     title: 'React app',

diff --git a/src/utils/get-url.tsx b/src/utils/get-url.tsx
@@ -10,6 +10,10 @@ export const getHelpCenterURL = () => {
   return `https://help.vtex.com/`
 }
 
+export const getHelpCenterTroubleshootingURL = () => {
+  return `https://help.vtex.com/category/troubleshooting--39pDkp8qxSll6mGj0tWViz`
+}
+
 export const getCommunityURL = () => {
   return `https://community.vtex.com/?_ga=2.198523433.743584735.1647618303-1974737580.1645714642`
 }

diff --git a/src/utils/typings/types.ts b/src/utils/typings/types.ts
@@ -7,6 +7,7 @@ import {
   UpdatesTitle,
   ResourceTitle,
   AdminTitle,
+  ResourceTitleTroubleshooting,
 } from './unionTypes'
 
 // eslint-disable-next-line @typescript-eslint/ban-types
@@ -77,6 +78,12 @@ export type ResourceDataElement = {
   link: string
 }
 
+export type ResourceDataTroubleshooting = {
+  title: ResourceTitleTroubleshooting
+  description: string
+  link: string
+}
+
 export type SelectOption = {
   id: string
   label: string

diff --git a/src/utils/typings/unionTypes.ts b/src/utils/typings/unionTypes.ts
@@ -30,6 +30,11 @@ export type ResourceTitle =
   | 'Help Center'
   | 'Support'
 
+export type ResourceTitleTroubleshooting =
+  | 'Community'
+  | 'Help Center'
+  | 'Support'
+
 export type MethodType = 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH'
 
 export function isMethodType(value: string): value is MethodType {