Skip to content

Commit

Permalink
Merge pull request #790 from Vizzuality/fe/LET-1387-add-fields-projec…
Browse files Browse the repository at this point in the history 
…t-form

LET-1387 [FE]: add new fields to other information
  • Loading branch information
@barbara-chaves
barbara-chaves authored Nov 28, 2023
2 parents d2c7bd5 + 4ac1a27 commit aeb1661
Show file tree
Hide file tree
Showing 6 changed files with 210 additions and 32 deletions.
2 changes: 2 additions & 0 deletions frontend/containers/project-form/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,8 @@ export const ProjectForm: FC<ProjectFormProps> = ({
<OtherInformation
register={register}
control={control}
getValues={getValues}
setValue={setValue}
controlOptions={{ disabled: false }}
errors={errors}
/>
Expand Down
189 changes: 170 additions & 19 deletions frontend/containers/project-form/pages/other-information.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,53 @@
import React from 'react';
import React, { ChangeEvent, useEffect, useState } from 'react';

import { Controller } from 'react-hook-form';
import { FormattedMessage, useIntl } from 'react-intl';

import cx from 'classnames';

import ErrorMessage from 'components/forms/error-message';
import FieldInfo from 'components/forms/field-info';
import Input from 'components/forms/input';
import Label from 'components/forms/label';
import Textarea from 'components/forms/textarea';
import { ProjectForm } from 'types/project';

import { ProjectFormPagesProps } from '..';

const OtherInformation = ({ register, errors }: ProjectFormPagesProps<ProjectForm>) => {
const OtherInformation = ({
control,
getValues,
setValue,
register,
errors,
}: ProjectFormPagesProps<ProjectForm>) => {
const { formatMessage } = useIntl();
const [defaultRisksIdentified, setDefaultRisksIdentified] = useState<boolean>();

const risksIdentified = getValues('climate_change_risks_identified');
useEffect(() => {
if (typeof risksIdentified !== 'number') {
setDefaultRisksIdentified(risksIdentified);
}

if (!risksIdentified) {
setValue('climate_change_risks_details', '');
}
}, [getValues, setValue, risksIdentified]);

const handleChangeRisksIdentified = (e: ChangeEvent<HTMLInputElement>) => {
setDefaultRisksIdentified(!!Number(e.target.value));
setValue('climate_change_risks_identified', !!Number(e.target.value));
};

return (
<div>
<h1 className="font-serif text-3xl font-semibold mb-2.5">
<FormattedMessage defaultMessage="Other information" id="kX7oGR" />
</h1>
<p className="mb-10 text-gray-900">
<FormattedMessage
defaultMessage="This description should summarize your project in a few words. This might include relevant financial information that you want potential investors to know about. This information will be <n>public</n>."
id="bc6tGh"
defaultMessage="This description should summarize your project in a few words. This might include relevant financial information that you want potential investors to know about. This information will be public except the one marked as <n>private</n> which will only be visible for admins."
id="l2Jd2p"
values={{
n: (chunk: string) => <span className="font-semibold">{chunk}</span>,
}}
Expand All @@ -32,13 +59,6 @@ const OtherInformation = ({ register, errors }: ProjectFormPagesProps<ProjectFor
<span className="mr-2.5">
<FormattedMessage defaultMessage="Short description of the project" id="YWQkk+" />
</span>
<FieldInfo
content={formatMessage({
defaultMessage:
"This description should succinctly explain your project. It should be a catching text since it's the first thing investors will read.",
id: 'VaC9C0',
})}
/>
</Label>
<Textarea
placeholder={formatMessage({
Expand All @@ -57,13 +77,6 @@ const OtherInformation = ({ register, errors }: ProjectFormPagesProps<ProjectFor
<span className="mr-2.5">
<FormattedMessage defaultMessage="Relevant links (optional)" id="jKdvln" />
</span>
<FieldInfo
content={formatMessage({
defaultMessage:
'Use this space to share links to documents, videos and websites that support your pitch. This might include relevant financial information that you want potential investors to know about.',
id: 'DsldZ2',
})}
/>
</Label>
<Textarea
placeholder={formatMessage({
Expand All @@ -77,6 +90,144 @@ const OtherInformation = ({ register, errors }: ProjectFormPagesProps<ProjectFor
/>
<ErrorMessage id="relevant-links-error" errorText={errors?.relevant_links?.message} />
</div>
<div className="mb-6.5">
<Label htmlFor="positive_financial_returns" className="block mb-2.5">
<span className="mr-2.5">
<FormattedMessage
defaultMessage="If your current business model generates positive financial returns, please explain what they consist of (optional)"
id="TnP0xP"
/>
</span>
</Label>
<Textarea
placeholder={formatMessage({
defaultMessage: 'insert your answer (max 600 characters)',
id: 'hPsrc0',
})}
id="positive_financial_returns"
name="positive_financial_returns"
register={register}
aria-describedby="positive_financial_returns-error"
/>
<ErrorMessage
id="positive_financial_returns-error"
errorText={errors?.positive_financial_returns?.message}
/>
</div>
<div className="mb-6.5">
<Label htmlFor="last_year_sales_revenue" className="block mb-2.5">
<span className="mr-2.5">
<FormattedMessage
defaultMessage="What was the sales revenue in US$ in the last fiscal year-end? (optional)"
id="cmhwn3"
/>
</span>
</Label>
<Input
placeholder={formatMessage({
defaultMessage: 'insert value',
id: 'GDPNty',
})}
type="number"
id="last_year_sales_revenue"
name="last_year_sales_revenue"
register={register}
step="any"
aria-describedby="last_year_sales_revenue-error"
/>
<ErrorMessage
id="last_year_sales_revenue-error"
errorText={errors?.last_year_sales_revenue?.message}
/>
</div>

<div className="mb-6.5">
<fieldset className="flex items-center mt-4.5">
<legend className="float-left mr-4 font-sans text-sm font-semibold text-gray-800">
<span className="mr-2.5">
<FormattedMessage
defaultMessage="Has the project identified the risks of climate change to which the business is exposed and potential mitigation strategies?"
id="Cv28CA"
/>
</span>
</legend>
<div className="flex items-center">
<Label
htmlFor="climate_change_risks_identified_yes"
className="flex items-center pt-0.5 font-normal"
>
<Controller
control={control}
name="climate_change_risks_identified"
render={(field) => (
<input
{...field}
id="lclimate_change_risks_identified-yes"
type="radio"
value={1}
checked={defaultRisksIdentified}
className="mr-2"
aria-describedby="climate_change_risks_identified-error"
onChange={handleChangeRisksIdentified}
/>
)}
></Controller>
<FormattedMessage defaultMessage="Yes" id="a5msuh" />
</Label>
<Label
htmlFor="looking_for_funding-no"
className="flex items-center pt-0.5 ml-4 font-normal"
>
<Controller
control={control}
name="climate_change_risks_identified"
render={(field) => (
<input
{...field}
id="climate_change_risks_identified-no"
type="radio"
value={0}
checked={defaultRisksIdentified === false}
className="mr-2"
aria-describedby="climate_change_risks_identified-error"
onChange={handleChangeRisksIdentified}
/>
)}
></Controller>

<FormattedMessage defaultMessage="No" id="oUWADl" />
</Label>
</div>
</fieldset>
</div>
<div
className={cx('transition-all ease bg-background-middle rounded-md px-4', {
'h-0 opacity-0 py-0 mt-0 hidden': !defaultRisksIdentified,
'opacity-100 h-fit py-4.5 mt-4.5 block': !!defaultRisksIdentified,
})}
>
<div className="mb-6.5">
<Label htmlFor="climate_change_risks_details" className="block mb-2.5">
<span className="mr-2.5">
<FormattedMessage defaultMessage="Please explain" id="KsHMRK" />
</span>
</Label>
<Textarea
placeholder={formatMessage({
defaultMessage: 'insert your answer (max 600 characters)',
id: 'hPsrc0',
})}
id="climate_change_risks_details"
name="climate_change_risks_details"
register={register}
aria-describedby="climate_change_risks_details-error"
/>
<ErrorMessage
id="climate_change_risks_details-error"
errorText={errors?.climate_change_risks_details?.message}
/>
</div>
</div>
</form>
</div>
);
Expand Down
23 changes: 22 additions & 1 deletion frontend/schemas/project.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,8 @@ export default (page: number) => {
}),
};

let patternTwoDigisAfterComma = /^\d+(\.\d{0,2})?$/;

const schemas = [
object().shape({
name: string().required(messages.name),
Expand Down Expand Up @@ -206,7 +208,26 @@ export default (page: number) => {
}),
object().shape({
description: string().max(600, maxTextLength).required(messages.description),
relevant_links: string().nullable(),
relevant_links: string().max(600, maxTextLength).nullable(),
positive_financial_returns: string().max(600, maxTextLength).nullable(),
last_year_sales_revenue: number()
.test(
'is-decimal',
'The amount should be a decimal with maximum two digits after comma',
(val: any) => {
if (val != undefined) {
return patternTwoDigisAfterComma.test(val);
}
return true;
}
)
.min(0)
.max(999999999.99)
.nullable(true)
.transform((_, val) => (val !== '' ? Number(val) : null)),

climate_change_risks_identified: boolean().typeError(booleanField).required(booleanField),
climate_change_risks_details: string().max(600, maxTextLength),
}),
];
return schemas[page];
Expand Down
4 changes: 4 additions & 0 deletions frontend/types/project.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@ export type ProjectBase = {
received_funding_amount_usd?: number;
received_funding_investor?: string;
relevant_links?: string;
climate_change_risks_identified: boolean;
climate_change_risks_details?: string;
positive_financial_returns?: string;
last_year_sales_revenue?: number;
replicability: string;
sdgs: number[];
solution: string;
Expand Down
9 changes: 8 additions & 1 deletion frontend/validations/project.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,12 @@ export const formPageInputs: (keyof ProjectForm)[][] = [
'received_funding_investor',
],
['replicability', 'sustainability', 'progress_impact_tracking'],
['description', 'relevant_links'],
[
'description',
'relevant_links',
'positive_financial_returns',
'last_year_sales_revenue',
'climate_change_risks_identified',
'climate_change_risks_details',
],
];
15 changes: 4 additions & 11 deletions frontend/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11515,17 +11515,10 @@ __metadata:
languageName: node
linkType: hard

"caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001297, caniuse-lite@npm:^1.0.30001312":
version: 1.0.30001312
resolution: "caniuse-lite@npm:1.0.30001312"
checksum: 753fb9ea1e02e999430b323a71b5acab5120f3b5fc0161b01669f54a3ef5c5296240b6ae9b79b12a3742e3aed216aa9ee3d5398a23c16d08625ccd376b79545d
languageName: node
linkType: hard

"caniuse-lite@npm:^1.0.30001406":
version: 1.0.30001426
resolution: "caniuse-lite@npm:1.0.30001426"
checksum: e8b9c14ee33410d95b27da619f50648f373a7be712748970643f25d95fa80687b4755ba365f34a7a1cea00f9137193943aa6e742eedf0a4d7857f83809f49435
"caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001297, caniuse-lite@npm:^1.0.30001312, caniuse-lite@npm:^1.0.30001406":
version: 1.0.30001565
resolution: "caniuse-lite@npm:1.0.30001565"
checksum: 7621f358d0e1158557430a111ca5506008ae0b2c796039ef53aeebf4e2ba15e5241cb89def21ea3a633b6a609273085835b44a522165d871fa44067cdf29cccd
languageName: node
linkType: hard

Expand Down

0 comments on commit aeb1661

Please sign in to comment.