code4romania/war-support-sprijin-de-urgenta-client

Project name

Insert bullets description of the project if available.

See the project live

Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project.

Contributing | Built with | Repos and projects | Deployment | Feedback | License | About Code for Romania

Contributing

This project is built by amazing volunteers and you can be one of them! Here's a list of ways in which you can contribute to this project. If you want to make any change to this repository, please make a fork first.

Help us out by testing this project in the staging environment. If you see something that doesn't quite work the way you expect it to, open an Issue. Make sure to describe what you expect to happen and what is actually happening in detail.

If you would like to suggest new functionality, open an Issue and mark it as a [Feature request]. Please be specific about why you think this functionality will be of use. If you can, please include some visual description of what you would like the UI to look like, if you are suggesting new UI elements.

Built With

This project is built with Next.js and TypeScript.

Local Development

Note for Windows users: If you are using Windows, please use WSL to follow the instructions below. The instructions below consider that you are on a *nix type environment.

Clone the repo

To get started , you will first have to clone the repo.

git clone https://github.com/code4romania/war-support-sprijin-de-urgenta-client
cd war-support-sprijin-de-urgenta-client

Install dependencies

You can use any node package manager you prefer to install the dependencies (npm, yarn, pnpm, etc.)

• If you use npm please paste the command below in your terminal:

npm install

• If you use yarn please paste the command below in your terminal:

yarn install

• If you use pnpm please paste the command below in your terminal:

pnpm install

Build the Project

• If you use npm please paste the command below in your terminal:

npm run build

• If you use yarn please paste the command below in your terminal:

yarn build

• If you use pnpm please paste the command below in your terminal:

pnpm run build

Utility Scripts

i18n (Internationalization)

To generate the translation files you will need to run the following command:

npm run generate-translations-sheet
npm run translate

Visualize frontend components

We use storybook to visualize the components.

npm run storybook

Testing

To run the E2E tests you will need to run the following command:

npm run e2e

Feedback

• Request a new feature on GitHub.
• Vote for popular feature requests.
• File a bug in GitHub Issues.
• Email us with other feedback [email protected]

License

This project is licensed under the MPL 2.0 License - see the LICENSE file for details

About Code for Romania

Started in 2016, Code for Romania is a civic tech NGO, official member of the Code for All network. We have a community of around 2.000 volunteers (developers, ux/ui, communications, data scientists, graphic designers, devops, it security and more) who work pro-bono for developing digital solutions to solve social problems. #techforsocialgood. If you want to learn more details about our projects visit our site or if you want to talk to one of our staff members, please e-mail us at [email protected].

Last, but not least, we rely on donations to ensure the infrastructure, logistics and management of our community that is widely spread across 11 timezones, coding for social change to make Romania and the world a better place. If you want to support us, you can do it here.

war-support-sprijin-de-urgenta-client's Issues

Services Form - phone number validations

Create proper localized messages for phone number validation

Log In Page

Create the login page with:

• for User Name and Password
• login button
• create account buttoin

Upon login the user will be redirected to TBD

Upon click on create account button the user should be redirected to the first step of the onboarding wizard

UserDetailsForm steps with SignUp call

Base on the user type selected it should show next screens with the corresponding inputs fields.

First Screen

-> UserType.legalPerson

-> UserType.ngo || UserType.publicAuthority,

-> UserType.individual

Second screen

It should capture the user credentials so we can save the user in the BE and get the token for future calls
(Figma design not updated)

address-translations

As a user I'm able to view the content on different languages

Add missing translations for homepage and CTAs

https://docs.google.com/spreadsheets/d/1abqySZY1fPkptPqV6hr31boHEK9QS9i3SphLZGnxbtU/edit#gid=0

Update SdU Logo

New logo

CallToAction url prop for button action

Send url as prop to CallToAction component

Check if unacoperis.ro has been deployed

Create Resources Table

After resource is added from the modal it needs to be shown in a table

This applies to Products and Services Resources.

For Mobile all products from all Resource categories need to be concatenated and shown inside a table that opens in a Modal by clicking a floating button in the bottom right corner

SignUpProducts - Use OPTIONS method from http request

Use OPTIONS method from http request to populate selects for SignUpProducts, after #82 is merged

Home Page Prettify

Update homepage as per Figma Design

Sign Up - Resources - Products Component

Implement the Products Component with the required form

When adding a product via the plus sign the respective form section should be cleared

After adding a product :

• On desktop A product table should appear on the right side
• On mobile A button should appear in the bottom right corner which on clicking should expand a modal full screen transitioning from bottom to top.

The Products component should be a child of Resources Component

Implement internationalization

Install and setup next-i18next package to use for translations

Sign Up - Resources - Volunteering Component

Implement the Volunteering Component with the required form

The Volunteering component should be a child of Resources Component

Create set language action

Implement the set language action in

component
The application will use the language set here.

Services Form - Car Plate Number wrong validation

Wrong validation for Car Plate Number, message and regex

Conditional Rendering in Stepper

Load respective components based on the current selected step.

Add Storybook and create stories for available components

Install Storybook

SignUpVolunteeringForm - Use OPTIONS method from http request

env api url typo

NEXT_PUBLIC_PUBLIC_API={{http://sprijin-de-urgenta-api.heroesof.tech:8070/api/v1}}
->
NEXT_PUBLIC_PUBLIC_API=http://sprijin-de-urgenta-api.heroesof.tech:8070/api/v1

Form components

Implement following form components:

• Input
• Checkbox
• Radio
• Textarea
• Dropdown
• Buttons
• Date Input
• Number Input
  The logic and validation should be done in the Parent Component

DX: implement script for faster component creation

add new script to package.json that should create the boiler plate for creating a new component.

script use: npm gc ComponentName

Copy translations EN/RO/UA from google docs

Add translations in public/locale/ en-ro-ua.
Find them at: https://docs.google.com/document/d/1StW97eQ8pQoiMxa92NuLDXqOk8TcKqgaWVIi-sqiU4c/edit

Home Page Component

Implement the Figma design for the HomePage

Layout Footer Component

Implement the Footer component based on the Figma design.

Redesign Sponsors/Partners section in Header component

Tailwind theme configuration

After color palette is decided, add color tokens to tailwindcss to use as bg-blue-500 , text-blue-700

Add Titillium Web - Font

Sign Up - User Type Component

Implement the user type component based on the Figma design,

It should have a select and the user types are received from the backend.

${apiUrl}/get-donor-types/

Sign Up - Resources - Others Component

Implement the Others Component with the required textarea form field

The Others component should be a child of Resources Component

SignUpServicesForm - Use OPTIONS method from http request

Use OPTIONS method from http request to populate selects for SignUpServicesForm

Fix add missing prop

Failed to compile.

./components/SignUpResources/SignUpResources.tsx:86:10
Type error: Property 'name' is missing in type '{ children: string; }' but required in type 'InputElementProps'.

84 | <div className={clsx('w-full lg:w-2/5', 'text-xs')}>
85 |

{t('signup.resources.gdpr')}*

86 | Da
| ^
87 |
88 |
89 | )
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: next build && next export
npm ERR! Exit status 1

Create Header component based on Figma design

Link Login with Backend

Using axios (or opened to suggestions) login user using the credentials from the form.
The received token should be saved in cookies for future api calls

{api}/auth/login/
http://sprijin-de-urgenta-api.heroesof.tech:8070/api/v1/schema/swagger-ui/

Sign Up - Resources

Implement Parent Resources component based on figma design.

It should have list of offered resources selectable via checkbox

Upon selection Child components should be shown
Services Component (issue link)
Products Component (issue link)
Volunteering Component (issue link)
Others Component (issue link )

Sign Up - User Details Component

Implement the User Details component based on the Figma design,

Form Fields Components

Create reusable form fields components with just the styles.

• Input text
• Dropdown Select
• Checkbox
• Radio

The logic and validation should be done in the Parent Component

Steps Wizard implementation

Should have as props the step on which the user is and an useEffect that changes it accordingly

Each step should have 3 stages: current, past, future

Home Component additional styling

Link Sign Up user with Backend

Using axios (or opened to suggestions) sign up user using the details from the form.
The received token should be saved in cookies for future api calls

{api}/auth/signup/ It still needs to be implemented
http://sprijin-de-urgenta-api.heroesof.tech:8070/api/v1/schema/swagger-ui/

Update OG tags before going live

currently our <og: tags contain TBD.
We need og:image and text for remainging ones

          <meta
            property="og:image"
            content="TBD"
          />
          <meta property="og:type" content="website" />
          <meta property="og:url" content="TBD" />
          <meta property="og:site_name" content="TBD" />
          <meta property="og:title" content="TBD" />
          <meta
            property="og:description"
            content="TBD"
          />

Create Layout Component

It should contain the Header, MainContent Components

Setup Tailwind

Remove i18next

Since it's not working with next export remove i18 until better solution

Remove test page before release

Remove /form-elements page before release

Counties not loading in modal

When opening up Services -> Transport, counties are not showing up

Sign Up - Resources - Services Component

Implement the Services Component with the required form fields

The Services component should be a child of Resources Component

Create Donors Page

Extract Resources from Step 3 as a separate component and create /donors page

If the user is logged in, it should be redirected to this page after selecting a resource from HomePage

Input error messages display issues

Error messages are not displaying correctly in some cases:

#57

Link all available components

1. Link all available components without login (#58)
2. In home page, change links to a single /signup page (also create page component for this);

Subheading for all Forms

All forms should have Subheading. (Services, Products, Volunteers, Other)

Modal Window for Resources

Implement reusable modal window for adding new resources.
Use either Reach, RadixUI or HeadlessUI