PRP

AVON Recruitment Program - Personal Recruitment Page

The PRP page holds the leads information with some personalised data such as their social media links and description. The main layout for each leads PRP is the same: -> Lead information -> Join the programme information -> Carousel learn more -> Button banner

The application is server side rendered with Next.js. This means we statically render our HTML on the server and then anything client side dependent will render once the user has recieved the static data. You can find the documentation for Next.js here : https://nextjs.org/docs/getting-started.

Install

npm i

Run local dev server

npm run dev

Build production ready app and run it

npm run build npm run start -p $PORT

Run storybook locally

Using storybook you can take a look at all the different components we have created for Avon Grow. -> With storybook you can interact with a component and see how it works -> Using knobs you customise the components and see how different scenarios will act out

`npm run storybook`

Once storybook is running you can access it through port 6060 - http://localhost:6006/

Run linting checks (without and with fixing errors)

npm run lint # Done by ESLint
npm run lint:fix # Done by ESLint

Testing

This project mainly uses React Testing Library to create the Unit Tests. The tests run through the Jest testing framework. Note: Some Enzyme testing is used for certain tests that aren't applicable for RTL.

You can run the tests by using npm run test. You can run the test and get coverage at the same time by using npm run test:coverage.

• If you do this, you can see a report of the percentage of test coverage inside:
• coverage -> lcov-report -> index.html

In this project we have a requirement for 100% test coverage. Each file or component needs to have been tested completely before you can commit code to the repo.

Local DNS -- IMPORTANT

To simulate the domain location (.ru, .co.uk etc.) you will need to add a host mask to your etc host file

This can be done by doing the following in your terminal: sudo nano /etc/hosts

Below all of the current entries, add the following line: 127.0.0.1 local.reg.avon.ru. Make sure the local.reg.avon.ru bit lines up with the other items in the column.

Now go to http://local.reg.avon.ru:3000/prp/SalesLeaderA1. This will allow you to test locally with .ru in the url.

Docker

npm run dev

http://localhost:3000/prp/RU/ru/SalesLeader2

Cypress

We have Cypress running to do integration testing and the tests can be found in the Cypress folder.

You can run the tests with the following command:

npm run cypress:open

UI Guideline

UI Guidelines, styleguide and examples are available at: https://app.zeplin.io/project/5cc068f9866b9b265424dddb/dashboard

Branch naming

This repository consists only of a master branch, with no develop branch. All new code should be merged straight to master from the branches.

Branch names should follow the feature/category/jiraticketnumber-name-with-dashes convention. The names should explain the purpose of the branch, ideally in 25 characters or less.

The categories are:

• major - Release a new flow
• minor - Features being added or expanded
• patch - Resolving bugs or broken functionality

For example: feature/minor/avrp-1-adding-button-component

RedesignBody

fontFamily

Montserrat: UK,PH,ZA,FR,CZ,SK,ES,PL,LIT,LAT,RO,BG,HU,TR,FIN,EST(EE),RU,

Noto Sans Georgian: GE,

Arial: MA (ARABIC),EG No need to configure

fontBecomeBeautyMobile

GE: { width: 280, opacity: 0.5, }, ES: { width: 280 },

fontLearnMorePC

GE,CZ,SK,ES,FIN,EST(EE),: { width: 320 }

fontLearnMoreMobile

GE,CZ,SK,ES,FIN: { width: 200 } EST(EE): { width: 180 }