Help Section Guide - Ordering App 2021 – Ordering

Modify the existing pages.

To change the title of the current 3 pages. only need to Add and modify the following language variables.

HELP_WITH_AN_ORDER
ACCOUNT_AND_PAYMENT_OPTIONS
GUIDE_TO_ORDERING

To modify the content of each Static Page, you need to download the following file. Zip: https://www.dropbox.com/sh/cq12xdh2jetf80e/AABCwsOhxKC41Q6xyfwMbclta/RNFiles1.zip?dl=0

Unzip the file.

On this example, we will modify the content of the page Account and Payment Options

Open the file index.tsx in the folder HelpAccountAndPayment

Search:

<OText mBottom={20}>
 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
 </OText>
 <OText mBottom={20}>
 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
 </OText>
 <OText mBottom={20}>
 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
 </OText>
 <OText>
 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
 </OText>

Replace:

<OText mBottom={20}>
 -Hello this is an example Line 1
 </OText>
 <OText mBottom={20}>
 -Hello this is an example Line 2
 </OText>
 <OText mBottom={20}>
 -Hello this is an example Line 3
 </OText>
 <OText>
 -Hello this is an example Line 4
 </OText>

Save the changes and upload the files in your Builder<Developer<Custom.

Type: TSX

Paths:

src/components/HelpAccountAndPayment/index.tsx
src/components/HelpAccountAndPayment/styles.tsx
src/components/HelpGuide/index.tsx
src/components/HelpGuide/styles.tsx
src/components/HelpOrder/index.tsx
src/components/HelpOrder/styles.tsx

Once you upload each file to the corresponding path and file. it should like this:

User-uploaded Image

Then add the following in the Search and Replace section:

Path: src/pages/HelpAccountAndPayment.tsx

Search:

import React from 'react'
import { HelpAccountAndPayment as HelpAccountAndPaymentController, Container } from 'ordering-ui-react-native'

Replace:

import React from 'react'
import { Container } from 'ordering-ui-react-native'
import { HelpAccountAndPayment as HelpAccountAndPaymentController } from '../components/HelpAccountAndPayment'

Path: src/pages/HelpGuide.tsx

Search:

import React from 'react'
import { HelpGuide as HelpGuideController, Container } from 'ordering-ui-react-native'

Replace:

import React from 'react'
import { Container } from 'ordering-ui-react-native'
import { HelpGuide as HelpGuideController } from '../components/HelpGuide'

Path: src/pages/HelpOrder.tsx

Search:

import React from 'react'
import { HelpOrder as HelpOrderController, Container } from 'ordering-ui-react-native'

Replace:

import React from 'react'
import { Container } from 'ordering-ui-react-native'
import { HelpOrder as HelpOrderController } from '../components/HelpOrder'

Once you have added the search and replace, it should look like this:

User-uploaded Image

Once you have finished applying the changes, build your app, and you will see the changes.

Video:https://www.dropbox.com/sh/cq12xdh2jetf80e/AAC1SnRYYENSrEyM0cU9fJ8qa/RN%20Video%20Example%201.mp4?dl=0

Create new pages in the Help Section

In builder on React Native product, add the following in Search and Replace

Path: src/pages/Help.tsx

Search:

import React from 'react'
import { Help as HelpController, Container } from 'ordering-ui-react-native'

Replace:

import React from 'react'
import { Container } from 'ordering-ui-react-native'
import { Help as HelpController } from '../components/Help'

Path: src/navigators/HomeNavigator.tsx

Search:

import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'

Replace:

import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'
import NewHelpPage from '../pages/NewHelpPage'

Path: src/navigators/HomeNavigator.tsx

Search:

<Stack.Screen
                    name="HelpAccountAndPayment"
                    component={HelpAccountAndPayment}
                    options={{ headerShown: false }}
                  />

Replace:

<Stack.Screen
                    name="HelpAccountAndPayment"
                    component={HelpAccountAndPayment}
                    options={{ headerShown: false }}
                  />
                  <Stack.Screen
                    name="NewHelpPage"
                    component={NewHelpPage}
                    options={{ headerShown: false }}
                  />

Once you have added this.

Download the following file: https://www.dropbox.com/sh/cq12xdh2jetf80e/AAAGatT9WPpGwVUTFwxPfmIOa/RNFiles2.zip?dl=0

Open the file index.js in folder Help and modify the following code sections:

<HelpSubItem
        onPress={() => onRedirect('HelpGuide')}
      >
        <OText size={14}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
      </HelpSubItem>

Replace with:

<HelpSubItem
        onPress={() => onRedirect('HelpGuide')}
      >
        <OText size={14}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
      </HelpSubItem>
      <HelpSubItem
        onPress={() => onRedirect('NewHelpPage')}
      >
        <OText size={14}>Title_NewHelpPage</OText>
      </HelpSubItem>

After you have added the code, save the file.

In the Custom section in Developers, add the files.

Type: TSX

For the file index.js in folder Help use the following path.

src/components/Help/index.tsx

For the file styles.js in folder Help use the following path.

src/components/Help/styles.tsx

For the file index.js in folder NewHelpPage use the following path.

src/components/NewHelpPage/index.tsx

For the file styles.js in folder NewHelpPage use the following path.

src/components/NewHelpPage/styles.tsx

For the file NewHelpPage.tsx use the following path.

src/pages/NewHelpPage.tsx

After you have added all the files in builder, you need to update your app to apply the changes.

User-uploaded Image

Video Example:

https://www.dropbox.com/sh/cq12xdh2jetf80e/AACUl8jeCRcsL3ubMovs51y_a/RN%20Video%20Example%202.mp4?dl=0

If you need anything else from your Ordering Team, just let us know
Have a Happy Ordering

Modify the existing pages.

Create new pages in the Help Section

Related articles