feat(frontend): add ccn 2120 to idl (#966)

* feat(frontend): add skippable branche steps

We add a function condition() which take the finalform values and return
a boolean
this function is designed to filter steps depending on previous values

* feat(frontend): add ccn 2120 to idl

fix #931

packages/code-du-travail-frontend/src/outils/indemniteLicenciement/branches.js

@@ -37,6 +37,10 @@ export const branches = [
     label:
       "Convention collective nationale Boucherie boucherie-charcuterie triperie"
   },
+  {
+    value: "2120",
+    label: "Convention collective nationale des banques"
+  },
   {
     value: "2344",
     label: "Convention collective nationale de la Sidérurgie"

packages/code-du-travail-frontend/src/outils/indemniteLicenciement/ccn/2120/Result.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { getIndemniteFromFinalForm } from "../../indemnite";
+
+import { IndemniteCCn } from "../../components/IndemniteConventionnelle";
+import { getIndemnite, getSalaireRef } from "./indemnite";
+
+export function Result({ form }) {
+  const state = form.getState();
+
+  const {
+    hasTempsPartiel = false,
+    hasSameSalaire = false,
+    salairePeriods = [],
+    salaires = [],
+    salaire,
+    anciennete,
+    dateEntree,
+    dateSortie,
+    branche,
+    motif,
+    categorie
+  } = state.values;
+
+  const { indemniteLegale, formuleLegale } = getIndemniteFromFinalForm(form);
+  const salaireRef = getSalaireRef({
+    hasTempsPartiel,
+    hasSameSalaire,
+    salaire,
+    salairePeriods,
+    salaires,
+    anciennete
+  });
+  const { error, indemniteConventionnelle, formula } = getIndemnite({
+    salaireRef,
+    dateEntree,
+    dateSortie,
+    anciennete,
+    categorie,
+    motif
+  });
+  return (
+    <IndemniteCCn
+      montant={indemniteConventionnelle}
+      indemniteLegale={indemniteLegale}
+      formule={formula}
+      formuleLegale={formuleLegale}
+      branche={branche}
+      error={error}
+    />
+  );
+}

packages/code-du-travail-frontend/src/outils/indemniteLicenciement/ccn/2120/Step.js

@@ -0,0 +1,92 @@
+import React from "react";
+import { Field } from "react-final-form";
+import styled from "styled-components";
+import { Container, theme } from "@cdt/ui";
+
+import { SectionTitle, Label } from "../../stepStyles";
+
+export const DISCIPLINAIRE = "disciplinaire";
+export const NON_DISCIPLINAIRE = "non-disciplinaire";
+export const ECONOMIQUE = "eco";
+
+export const CADRE = "cadre";
+export const NON_CADRE = "non-cadre";
+export const NE_SAIT_PAS = "ne-sais-pas";
+
+const optionMotifs = {
+  [DISCIPLINAIRE]: "Motif disciplinaire",
+  [NON_DISCIPLINAIRE]: "Motif non disciplinaire",
+  [ECONOMIQUE]: "Motif économique"
+};
+
+const optionCategorie = {
+  [NON_CADRE]: "Non cadre",
+  [CADRE]: "Cadre",
+  [NE_SAIT_PAS]: "Ne sait pas"
+};
+
+function Step() {
+  return (
+    <Container>
+      <SectionTitle>Motif du licenciement</SectionTitle>
+      <Field name="motif">
+        {({ input }) => {
+          return (
+            <FormGroup>
+              <Label htmlFor="input-motif">
+                Préciser le motif de licenciement :
+              </Label>
+              <Select id="input-motif" {...input}>
+                <option value="" disabled>
+                  motifs...
+                </option>
+                {Object.entries(optionMotifs).map(([value, label]) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </Select>
+            </FormGroup>
+          );
+        }}
+      </Field>
+
+      <Field name="categorie">
+        {({ input }) => {
+          return (
+            <FormGroup>
+              <Label htmlFor="input-categorie">
+                Précisez votre categorie professionnelle :
+              </Label>
+
+              <Select id="input-categorie" {...input}>
+                <option value="" disabled>
+                  catégories...
+                </option>
+                {Object.entries(optionCategorie).map(([value, label]) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </Select>
+            </FormGroup>
+          );
+        }}
+      </Field>
+    </Container>
+  );
+}
+
+export { Step };
+
+const { spacing } = theme;
+const Select = styled.select`
+  max-width: 20rem;
+`;
+
+const FormGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: ${spacing.interComponent};
+`;

packages/code-du-travail-frontend/src/outils/indemniteLicenciement/ccn/2120/__tests__/Result.test.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { render } from "react-testing-library";
+import { Result } from "../Result";
+import { Form } from "react-final-form";
+
+const initialValues = {
+  branche: "2120"
+};
+
+describe("<Result />", () => {
+  it("should render", () => {
+    const onSubmit = jest.fn();
+    const { container } = render(
+      <Form initialValues={initialValues} onSubmit={onSubmit}>
+        {({ form }) => <Result form={form} />}
+      </Form>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

packages/code-du-travail-frontend/src/outils/indemniteLicenciement/ccn/2120/__tests__/Step.test.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { render } from "react-testing-library";
+import { Step } from "../Step";
+import { Form } from "react-final-form";
+
+describe("<Step />", () => {
+  it("should render", () => {
+    const onSubmit = jest.fn();
+    const { container } = render(
+      <Form onSubmit={onSubmit}>{({ form }) => <Step form={form} />}</Form>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

packages/code-du-travail-frontend/src/outils/indemniteLicenciement/ccn/2120/__tests__/__snapshots__/Result.test.js.snap

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Result /> should render 1`] = `
+.c0 {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1.25rem;
+}
+
+.c0 > *:first-child {
+  margin-top: 0;
+}
+
+.c0 > *:last-child {
+  margin-bottom: 0;
+}
+
+.c4 {
+  padding: 0.625rem 1rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  text-align: center;
+  line-height: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  vertical-align: middle;
+  border-style: solid;
+  border-width: 1px 1px 2px 1px;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  -webkit-transition: background-color 250ms ease;
+  transition: background-color 250ms ease;
+  color: #fff;
+  background: #006be6;
+  border-color: #006be6;
+  border-bottom-color: #0053b3;
+}
+
+.c4:not([disabled]):hover,
+.c4:not([disabled]):focus {
+  background: #07f;
+  color: #fff;
+}
+
+.c4:not([disabled]):active {
+  color: #fff;
+  background: #1a85ff;
+  border-width: 2px 1px 1px 1px;
+  border-color: #006be6;
+  outline: none;
+}
+
+.c4[aria-pressed="true"] {
+  color: #fff;
+  background: #07f;
+  border-width: 2px 1px 1px 1px;
+  border-color: #006be6;
+  border-top-color: #0053b3;
+  box-shadow: inset 0 1px 2px 0 #0053b3;
+}
+
+.c4[aria-pressed="true"]:not([disabled]):hover,
+.c4[aria-pressed="true"]:not([disabled]):focus {
+  background-color: #006be6;
+}
+
+.c4[aria-pressed="true"]:not([disabled]):active {
+  border-top-color: #0053b3;
+}
+
+.c4[disabled] {
+  cursor: not-allowed;
+  color: rgba(255,255,255,0.4);
+}
+
+.c1 {
+  font-size: 1.625rem;
+  margin-top: 2rem;
+  margin-bottom: 1.25rem;
+}
+
+.c2 {
+  font-size: 1.625rem;
+  font-weight: 700;
+  color: #0053b3;
+}
+
+.c3 {
+  color: #434956;
+  font-style: italic;
+}
+
+@media print {
+  .c0 {
+    max-width: 100%;
+    padding: 0;
+  }
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <h2
+      class="c1"
+    >
+      Convention collective nationale des banques
+    </h2>
+    <p>
+      Le montant de l’indemnité est
+       
+      <strong
+        class="c2"
+      >
+        NaN
+         €
+      </strong>
+       
+      <span
+        class="c3"
+      >
+        sur la base du calcul de l’indemnité légale
+      </span>
+    </p>
+    <br />
+    <details>
+      <summary>
+        Voir le detail du calcul
+      </summary>
+      <div
+        id="react-mathjax-preview"
+      >
+        <div
+          id="react-mathjax-preview-result"
+        >
+          \`undefined\`
+        </div>
+      </div>
+    </details>
+    <br />
+    <br />
+    <button
+      aria-pressed="false"
+      class="c4"
+    >
+      Recommencer une simulation
+    </button>
+  </div>
+</div>
+`;