Skip to content

Commit

Permalink
feat(bsda+broker+intermediaries) : use new Broker and IntermediaryLis…
Browse files Browse the repository at this point in the history 
…t component on BSDA formulaire
  • Loading branch information
@benoitguigal
benoitguigal committed Jan 24, 2025
1 parent a6fe5cb commit 9771aaf
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 240 deletions.
117 changes: 117 additions & 0 deletions front/src/Apps/Forms/Components/IntermediaryList/FormikIntermediaryList.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
import React from "react";
import { FieldArray, useFormikContext } from "formik";
import { CompanyInput } from "@td/codegen-ui";
import { getInitialCompany } from "../../../common/data/initialState";
import ToggleSwitch from "@codegouvfr/react-dsfr/ToggleSwitch";
import CompanySelectorWrapper, {
selectedCompanyError
} from "../../../common/Components/CompanySelectorWrapper/CompanySelectorWrapper";
import CompanyContactInfo from "../CompanyContactInfo/CompanyContactInfo";

type FormikIntermediaryListProps = {
// N°SIRET de l'établissement courant
siret?: string;
disabled: boolean;
};

function FormikIntermediaryList({
siret,
disabled
}: FormikIntermediaryListProps) {
const { values, setFieldValue } = useFormikContext<{
intermediaries: CompanyInput[];
}>();

const intermediaries = values.intermediaries;

const hasIntermediaries = !!intermediaries?.length;

return (
<>
<ToggleSwitch
label="Présence d'intermédiaires"
checked={hasIntermediaries}
showCheckedHint={false}
onChange={hasIntermediary => {
if (!hasIntermediary) {
setFieldValue("intermediaries", []);
} else {
setFieldValue("intermediaries", [getInitialCompany()]);
}
}}
disabled={disabled}
/>
{hasIntermediaries && (
<FieldArray
name="intermediaries"
render={({ push, remove }) => (
<>
{intermediaries.map((i, idx) => (
<div className="fr-mt-2w" key={idx}>
<h6 className="fr-h6">Intermédiaire {idx + 1}</h6>
<CompanySelectorWrapper
orgId={siret}
selectedCompanyOrgId={intermediaries[idx]?.siret ?? null}
selectedCompanyError={selectedCompanyError}
disabled={disabled}
onCompanySelected={company => {
const prevIntermediary = intermediaries[idx];

if (company) {
setFieldValue(`intermediaries.${idx}`, {
...prevIntermediary,
siret: company?.siret,
orgId: company.orgId,
address: company.address,
name: company.name,
...(prevIntermediary?.siret !== company.siret
? {
// auto-completion des infos de contact uniquement
// s'il y a un changement d'établissement pour
// éviter d'écraser les infos de contact spécifiées par l'utilisateur
// lors d'une modification de bordereau
contact: company.contact ?? "",
phone: company.contactPhone ?? "",
mail: company.contactEmail ?? ""
}
: {})
});
}
}}
/>
<CompanyContactInfo fieldName={`intermediaries.${idx}`} />
{values.intermediaries.length > 1 && (
<button
type="button"
className="fr-btn fr-btn--tertiary fr-mb-2w"
onClick={() => remove(idx)}
>
Supprimer l'intermédiaire {idx + 1}
</button>
)}
<hr />
</div>
))}
{values.intermediaries.length < 3 && (
// Pas plus de trois intermédiaires
<div className="fr-grid-row fr-grid-row--right fr-mb-4w">
<button
type="button"
className="fr-btn fr-btn--secondary"
onClick={() => {
push(getInitialCompany());
}}
>
Ajouter un intermédiaire
</button>
</div>
)}
</>
)}
></FieldArray>
)}
</>
);
}

export default FormikIntermediaryList;
168 changes: 14 additions & 154 deletions front/src/form/bsda/stepper/steps/Destination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,19 @@ import {
Bsda,
BsdaStatus,
BsdaType,
BsdType,
CompanyType,
Query,
QueryCompanyPrivateInfosArgs
} from "@td/codegen-ui";
import RedErrorMessage from "../../../../common/components/RedErrorMessage";
import DateInput from "../../../common/components/custom-inputs/DateInput";
import Select from "react-select";
import { IntermediariesSelector } from "../../components/intermediaries/IntermediariesSelector";
import { getInitialCompany } from "../../../../Apps/common/data/initialState";
import { BsdaContext } from "../../FormContainer";
import { COMPANY_SELECTOR_PRIVATE_INFOS } from "../../../../Apps/common/queries/company/query";
import { useLazyQuery } from "@apollo/client";
import { useParams } from "react-router-dom";
import FormikBroker from "../../../../Apps/Forms/Components/Broker/FormikBroker";
import FormikTrader from "../../../../Apps/Forms/Components/Trader/FormikTrader";
import FormikIntermediaryList from "../../../../Apps/Forms/Components/IntermediaryList/FormikIntermediaryList";

const DestinationCAPModificationAlert = () => (
<div className="fr-alert fr-alert--info fr-my-4v">
Expand Down Expand Up @@ -101,45 +101,6 @@ export function Destination({ disabled }) {
values?.destination?.company?.phone
]);

const hasBroker = Boolean(values.broker);
function onBrokerToggle() {
if (hasBroker) {
setFieldValue("broker", null);
} else {
setFieldValue(
"broker",
{
company: getInitialCompany(),
recepisse: {
number: "",
department: "",
validityLimit: null
}
},
false
);
}
}

function onAddIntermediary() {
setFieldValue(
"intermediaries",
(values.intermediaries ?? []).concat([
{
siret: "",
orgId: "",
name: "",
address: "",
contact: "",
mail: "",
phone: "",
vatNumber: "",
country: ""
}
])
);
}

function onNextDestinationToggle() {
// When we toggle the next destination switch, we swap destination <-> nextDestination
// That's because the final destination is always displayed first:
Expand Down Expand Up @@ -371,125 +332,24 @@ export function Destination({ disabled }) {
</div>
)}

<h4 className="form__section-heading">Informations complémentaires</h4>

<div className="form__row tw-mb-6">
<div className="td-input">
<label> Ajout d'intermédiaires:</label>
<Select
placeholder="Ajouter un intermédiaire"
options={[
...(!hasBroker
? [
{
value: "BROKER",
label: "Je suis passé par un courtier"
}
]
: []),
{
value: "INTERMEDIARY",
label: "Ajouter un autre type d'intermédiaire"
}
]}
onChange={option => {
switch ((option as { value: string })?.value) {
case "INTERMEDIARY":
return onAddIntermediary();
case "BROKER":
return onBrokerToggle();
default:
return;
}
}}
classNamePrefix="react-select"
/>
</div>
<h4 className="form__section-heading">Autres acteurs</h4>
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
<FormikBroker
bsdType={BsdType.Bsda}
siret={siret}
disabled={disabled}
/>
<FormikIntermediaryList siret={siret} disabled={disabled} />
</div>
{hasBroker && (
<div className="form__row td-input tw-mb-6">
<h4 className="form__section-heading">Courtier</h4>
<CompanySelector
name="broker.company"
onCompanySelected={broker => {
if (broker?.brokerReceipt) {
setFieldValue(
"broker.recepisse.number",
broker.brokerReceipt.receiptNumber
);
setFieldValue(
"broker.recepisse.validityLimit",
broker.brokerReceipt.validityLimit
);
setFieldValue(
"broker.recepisse.department",
broker.brokerReceipt.department
);
} else {
setFieldValue("broker.recepisse.number", "");
setFieldValue("broker.recepisse.validityLimit", null);
setFieldValue("broker.recepisse.department", "");
}
}}
/>

<div className="form__row">
<label>
Numéro de récépissé
<Field
type="text"
name="broker.recepisse.number"
className="td-input td-input--medium"
/>
</label>

<RedErrorMessage name="broker.recepisse.number" />
</div>
<div className="form__row">
<label>
Département
<Field
type="text"
name="broker.recepisse.department"
placeholder="Ex: 83"
className="td-input td-input--small"
/>
</label>

<RedErrorMessage name="broker.recepisse.department" />
</div>
<div className="form__row">
<label>
Limite de validité
<Field
component={DateInput}
name="broker.recepisse.validityLimit"
className="td-input td-input--small"
/>
</label>

<RedErrorMessage name="broker.recepisse.validityLimit" />
</div>
<div className="tw-mt-2">
<button
className="btn btn--danger tw-mr-1"
type="button"
onClick={onBrokerToggle}
>
Supprimer le courtier
</button>
</div>
</div>
)}

{Boolean(values.intermediaries?.length) && (
{/* {Boolean(values.intermediaries?.length) && (
<Field
name="intermediaries"
component={IntermediariesSelector}
disabled={disabled}
maxNbOfIntermediaries={3}
/>
)}
)} */}
</>
);
}
Loading

0 comments on commit 9771aaf

Please sign in to comment.