@lysaab/lysa-pep 0.18.0 → 1.0.0-0

package/src/components/PepAnswers.tsx

@@ -2,104 +2,236 @@ import React, { FunctionComponent } from "react";
 import "./PepAnswers.scss";
 import { PepRequest } from "../model/PepModel";
 import { countries } from "../model/Countries";
-import { LABELS } from "../model/PepTexts";
-import { roleAlternatives, militaryAlternatives } from "../pages/PepRolePage";
+import { getRoleAlts, getMilitaryAlts } from "../pages/RolePage/RolePage";
 import { EntityType, PepType } from "../pages/PepContext";
+import { useIntl, defineMessages, FormattedMessage } from "react-intl";
+import { messages as isPepMessages } from "../pages/IsPep/IsPepMessages";
+import {
+  relationMessages,
+  businessRelationMessages
+} from "../pages/RelationPage/RelationMessages";
 
 interface Props {
   answer: PepRequest;
 }
 
+const messages = defineMessages({
+  whoIsPepLabel: {
+    id: "pep.anwers.who.label",
+    description: "Who is pep label",
+    defaultMessage: "Vem är pep"
+  },
+  relationLabel: {
+    id: "pep.anwers.relation.label",
+    description: "Relation label",
+    defaultMessage: "Relation"
+  },
+  businessRelationLabel: {
+    id: "pep.anwers.businessRelation.label",
+    description: "Business relation label",
+    defaultMessage: "Vem är pep"
+  },
+  nameOfPepLabel: {
+    id: "pep.anwers.nameOfPep.label",
+    description: "Name of pep label",
+    defaultMessage: "Namn på personen"
+  },
+  birthdayOfPEPLabel: {
+    id: "pep.anwers.birthdayOfPEP.label",
+    description: "Birthday of pep label",
+    defaultMessage: "Födelsedag för personen"
+  },
+  statusLabel: {
+    id: "pep.anwers.status.label",
+    description: "Status label",
+    defaultMessage: "Status"
+  },
+  statusEndedValue: {
+    id: "pep.anwers.statusEnded.value",
+    description: "Status ended value",
+    defaultMessage: "Avslutad"
+  },
+  statusOngoingValue: {
+    id: "pep.anwers.statusOngoing.value",
+    description: "Status ongoing value",
+    defaultMessage: "Pågående"
+  },
+  endedLabel: {
+    id: "pep.anwers.endedStatus.label",
+    description: "Ended label",
+    defaultMessage: "Avslutades"
+  },
+  roleLabel: {
+    id: "pep.anwers.role.label",
+    description: "Role label",
+    defaultMessage: "Roll"
+  },
+  countryLabel: {
+    id: "pep.anwers.country.label",
+    description: "Country label",
+    defaultMessage: "Land"
+  },
+  ambassadorCountryLabel: {
+    id: "pep.anwers.ambassadorCountry.label",
+    description: "Ambassador country label",
+    defaultMessage: "Ambassadörsland"
+  },
+  governmentCompanyNameLabel: {
+    id: "pep.anwers.governmentCompanyName.label",
+    description: "Government company name label",
+    defaultMessage: "Företags namn"
+  },
+  governmentCompanyRoleLabel: {
+    id: "pep.anwers.governmentCompanyRole.label",
+    description: "Government company role label",
+    defaultMessage: "Roll på företaget"
+  },
+  internationalOrganisationNameLabel: {
+    id: "pep.anwers.companyName.label",
+    description: "International organisation name label",
+    defaultMessage: "Organisationens namn"
+  },
+  internationalOrganisationRoleLabel: {
+    id: "pep.anwers.companyRole.label",
+    description: "International organisation role label",
+    defaultMessage: "Roll i organisationen"
+  },
+  militaryGradeLabel: {
+    id: "pep.anwers.militaryRank.label",
+    description: "Military rank label",
+    defaultMessage: "Roll i organisationen"
+  }
+});
+
 export const PepAnswers: FunctionComponent<Props> = ({ answer }) => {
+  const intl = useIntl();
   if (!answer.type || answer.type === PepType.NOT_PEP) {
-    return <div><p>Personen är inte PEP</p></div>;
+    return (
+      <div>
+        <p>
+          <FormattedMessage
+            id="pep.anwers.notpep"
+            description="Not pep"
+            defaultMessage="Personen är inte PEP"
+          />
+        </p>
+      </div>
+    );
   }
 
-  const entityType = answer.legalEntityType || EntityType.PERSON;
-  const labels = LABELS(answer.ownerName);
   const country = countries.find(country => country.value === answer.country);
-  const role = roleAlternatives.find(alt => alt.value === answer.role);
-  const militaryRank = militaryAlternatives.find(
+  const role = getRoleAlts(intl).find(alt => alt.value === answer.role);
+  const militaryRank = getMilitaryAlts(intl).find(
     alt => alt.value === answer.militaryRank
   );
   return (
     <div>
       {answer.type && (
         <StaticInput
-          label="Vem är pep"
-          value={labels[entityType].GENERIC.IS_PEP[answer.type]}
+          label={intl.formatMessage(messages.whoIsPepLabel)}
+          value={intl.formatMessage(isPepMessages[answer.type], {
+            entityType: EntityType.PERSON
+          })}
         />
       )}
       {answer.relationToPEP && (
         <StaticInput
-          label="Relation"
-          value={
-            labels[entityType][PepType.RELATIVE].RELATION[
-              answer.relationToPEP
-            ]
-          }
+          label={intl.formatMessage(messages.relationLabel)}
+          value={intl.formatMessage(relationMessages[answer.relationToPEP])}
         />
       )}
       {answer.businessRelation && (
         <StaticInput
-          label="Relation"
-          value={
-            labels[entityType][PepType.COLLEAGUE].BUSINESS_RELATION[
-              answer.businessRelation
-            ]
-          }
+          label={intl.formatMessage(messages.businessRelationLabel)}
+          value={intl.formatMessage(
+            businessRelationMessages[answer.businessRelation]
+          )}
         />
       )}
       {answer.nameOfPEP && (
-        <StaticInput label="Namn på personen" value={answer.nameOfPEP} />
+        <StaticInput
+          label={intl.formatMessage(messages.nameOfPepLabel)}
+          value={answer.nameOfPEP}
+        />
       )}
       {answer.birthdayOfPEP && (
         <StaticInput
-          label="Födelsedag för personen"
+          label={intl.formatMessage(messages.birthdayOfPEPLabel)}
           value={answer.birthdayOfPEP}
         />
       )}
       {answer.ended ? (
         <React.Fragment>
-          <StaticInput label="Status" value="Avslutad" />
-          <StaticInput label="Avslutades" value={answer.ended} />
+          <StaticInput
+            label={intl.formatMessage(messages.statusLabel)}
+            value={intl.formatMessage(messages.statusEndedValue)}
+          />
+          <StaticInput
+            label={intl.formatMessage(messages.endedLabel)}
+            value={answer.ended}
+          />
         </React.Fragment>
       ) : (
-        <StaticInput label="Status" value="Pågående" />
+        <StaticInput
+          label={intl.formatMessage(messages.statusLabel)}
+          value={intl.formatMessage(messages.statusOngoingValue)}
+        />
       )}
       {answer.country && (
         <StaticInput
-          label="Land"
+          label={intl.formatMessage(messages.countryLabel)}
           value={country ? country.label : answer.country}
         />
       )}
-      {role && <StaticInput label="Roll" value={role.text} />}
+      {role && (
+        <StaticInput
+          label={intl.formatMessage(messages.roleLabel)}
+          value={role.text}
+        />
+      )}
       {answer.ambassadorCountry && (
-        <StaticInput label="Ambassadörsland" value={answer.ambassadorCountry} />
+        <StaticInput
+          label={intl.formatMessage(messages.ambassadorCountryLabel)}
+          value={
+            countries.find(
+              country => country.value === answer.ambassadorCountry
+            )?.label || answer.ambassadorCountry
+          }
+        />
       )}
       {answer.governmentCompany && (
-        <StaticInput label="Företagets namn" value={answer.governmentCompany} />
+        <StaticInput
+          label={intl.formatMessage(messages.governmentCompanyNameLabel)}
+          value={answer.governmentCompany}
+        />
       )}
       {answer.governmentCompanyRole && (
         <StaticInput
-          label="Roll på företaget"
+          label={intl.formatMessage(messages.governmentCompanyRoleLabel)}
           value={answer.governmentCompanyRole}
         />
       )}
       {answer.internationalOrganisation && (
         <StaticInput
-          label="Organisationens namn"
+          label={intl.formatMessage(
+            messages.internationalOrganisationNameLabel
+          )}
           value={answer.internationalOrganisation}
         />
       )}
       {answer.internationalOrganisationRole && (
         <StaticInput
-          label="Roll i organisationen"
+          label={intl.formatMessage(
+            messages.internationalOrganisationRoleLabel
+          )}
           value={answer.internationalOrganisationRole}
         />
       )}
       {militaryRank && (
-        <StaticInput label="Militär grad" value={militaryRank.text} />
+        <StaticInput
+          label={intl.formatMessage(messages.militaryGradeLabel)}
+          value={militaryRank.value}
+        />
       )}
     </div>
   );

package/src/demo/Done.tsx

@@ -9,12 +9,8 @@ export function Done() {
     <div>
       <h2>Taco hej!</h2>
       <p>Leverpastej!</p>
-      <PepAnswers
-        answer={{
-          ...stateToRequest(pepContext.state),
-          ownerName: pepContext.state.ownerName,
-        }}
-      />
+      <PepAnswers answer={stateToRequest(pepContext.state)} />
+      <pre>{JSON.stringify(stateToRequest(pepContext.state), null, 2)}</pre>
     </div>
   );
 }

package/src/demo/Pep.tsx

@@ -1,11 +1,12 @@
 import React, { useState, useContext, useEffect, useRef } from "react";
 import { Story } from "@lysaab/ui-2";
-import { PepIsPepPage } from "../pages/PepIsPepPage";
-import { PepStatusPage } from "../pages/PepStatusPage";
-import { PepRolePage } from "../pages/PepRolePage";
+import { IntlProvider } from "react-intl";
+import { IsPepPage } from "../pages/IsPep/IsPepPage";
+import { StatusPage } from "../pages/StatusPage/StatusPage";
+import { RolePage } from "../pages/RolePage/RolePage";
 import { PepContext, PepType, EntityType } from "../pages/PepContext";
 import { Done } from "./Done";
-import { PepRelationPage } from "../pages/PepRelationPage";
+import { RelationPage } from "../pages/RelationPage/RelationPage";
 
 export function Pep() {
   const [page, setPage] = useState(0);
@@ -14,93 +15,98 @@ export function Pep() {
   const loaded = useRef(false);
 
   useEffect(() => {
-    if(!loaded.current) {
-      pepContext.setState({ ownerName: "Sean Banan", tin: '191212121212', legalEntityType: EntityType.PERSON });
+    if (!loaded.current) {
+      pepContext.setState({
+        ownerName: "Sean Banan",
+        tin: "191212121212",
+        legalEntityType: EntityType.PERSON
+      });
       loaded.current = true;
     }
   }, [loaded, pepContext]);
 
   return (
     <div style={{ maxWidth: "1000px", margin: "0 auto" }}>
-      <Story
-        header="PEP Lib"
-        showBack={page > 0}
-        showClose={false}
-        onBack={() => {
-          if (page === 4 && type === PepType.NOT_PEP) {
-            setPage(0);
-          } else if (page === 2 && type === PepType.ME) {
-            setPage(0);
-          } else {
-            setPage(page - 1);
-          }
-        }}
-        transitionKey={page.toString()}
-        onExit={() => {}}
-      >
-        {page === 0 && (
-          <PepIsPepPage
-            next={() => {
-              if (type === PepType.ME) {
-                setPage(2);
-              } else if (type === PepType.NOT_PEP) {
-                setPage(4);
-              } else {
-                setPage(1);
-              }
-            }}
-          />
-        )}
-        {page === 1 && <PepRelationPage next={() => setPage(2)} />}
-        {page === 2 && <PepStatusPage next={() => setPage(3)} />}
-        {page === 3 && <PepRolePage next={() => setPage(4)} />}
-        {page === 4 && <Done />}
-      </Story>
-      <hr />
-      <fieldset>
-        <legend>Konfig</legend>
-        <div>
-          <label>
-            Entitet
-
-            <select
-              value={pepContext.state.legalEntityType || EntityType.PERSON}
-              onChange={event => {
-                pepContext.setState({
-                  legalEntityType: event.currentTarget.value as EntityType,
-                });
-              }}
-            >
-              <option value={EntityType.PERSON}>Person</option>
-              <option value={EntityType.CORPORATION}>Företag</option>
-            </select>
-          </label>
-        </div>
-        <div>
-          <label>
-            Namnet på den verkliga huvudmannen
-            <input
-              type="text"
-              value={pepContext.state.ownerName || ''}
-              onChange={event =>
-                pepContext.setState({ ownerName: event.currentTarget.value })
+      <IntlProvider locale="sv">
+        <Story
+          header="PEP Lib"
+          showBack={page > 0}
+          showClose={false}
+          onBack={() => {
+            if (page === 4 && type === PepType.NOT_PEP) {
+              setPage(0);
+            } else if (page === 3 && type === PepType.ME) {
+              setPage(1);
+            } else {
+              setPage(page - 1);
+            }
+          }}
+          transitionKey={page.toString()}
+          onExit={() => { }}
+        >
+          {page === 0 ? (
+            <IsPepPage
+              next={() =>
+                type !== PepType.NOT_PEP ? setPage(page + 1) : setPage(4)
               }
             />
-          </label>
-        </div>
-        <div>
-          <label>
-            Personnummer på huvudmannen
-            <input
-              type="text"
-              value={pepContext.state.tin || ''}
-              onChange={event =>
-                pepContext.setState({ tin: event.currentTarget.value })
+          ) : null}
+          {page === 1 ? (
+            <StatusPage
+              next={() =>
+                type === PepType.ME ? setPage(page + 2) : setPage(page + 1)
               }
             />
-          </label>
-        </div>
-      </fieldset>
+          ) : null}
+          {page === 2 ? <RelationPage next={() => setPage(page + 1)} /> : null}
+          {page === 3 ? <RolePage next={() => setPage(page + 1)} /> : null}
+          {page === 4 ? <Done /> : null}
+        </Story>
+        <hr />
+        <fieldset>
+          <legend>Konfig</legend>
+          <div>
+            <label>
+              Verkligen huvudman
+            <input
+                type="checkbox"
+                value={"true"}
+                onChange={event =>
+                  pepContext.setState({
+                    legalEntityType: event.currentTarget.checked
+                      ? EntityType.CORPORATION
+                      : EntityType.PERSON
+                  })
+                }
+              />
+            </label>
+          </div>
+          <div>
+            <label>
+              Namnet på den verkliga huvudmannen
+            <input
+                type="text"
+                value={pepContext.state.ownerName || ""}
+                onChange={event =>
+                  pepContext.setState({ ownerName: event.currentTarget.value })
+                }
+              />
+            </label>
+          </div>
+          <div>
+            <label>
+              Personnummer på huvudmannen
+            <input
+                type="text"
+                value={pepContext.state.tin || ""}
+                onChange={event =>
+                  pepContext.setState({ tin: event.currentTarget.value })
+                }
+              />
+            </label>
+          </div>
+        </fieldset>
+      </IntlProvider>
     </div>
   );
 }

package/src/pages/IsPep/IsPepMessages.ts

@@ -0,0 +1,75 @@
+import { defineMessages } from "react-intl";
+import { PepType } from "../PepContext";
+
+export const messages = defineMessages({
+    header: {
+        id: 'pep.ispep.header',
+        description: 'Not pep',
+        defaultMessage: `{ 
+        entityType, select,
+          PERSON {
+            Är du eller en närstående till dig en person i politisk utsatt ställning? (PEP)
+          }
+          CORPORATION {
+            Är {name} eller en närstående till {name} en person i politisk utsatt ställning? (PEP)
+          }
+      }`
+    },
+    required: {
+        id: 'pep.ispep.header',
+        description: 'Not pep',
+        defaultMessage: `{ 
+        entityType, select,
+          PERSON {
+            Är du eller en närstående till dig en person i politisk utsatt ställning? (PEP)
+          }
+          CORPORATION {
+            Är {name} eller en närstående till {name} en person i politisk utsatt ställning? (PEP)
+          }
+      }`
+    },
+    [PepType.NOT_PEP]: {
+        id: 'pep.ispep.NOT_PEP',
+        description: 'Not pep',
+        defaultMessage: 'Nej'
+    },
+    [PepType.ME]: {
+        id: 'pep.ispep.ME',
+        description: 'The person is pep',
+        defaultMessage: `{ 
+        entityType, select,
+          PERSON {
+            Jag har en funktion som gör mig till PEP
+          }
+          CORPORATION {
+            På grund av sin funktion är {name} PEP
+          }
+      }`
+    },
+    [PepType.RELATIVE]: {
+        id: 'pep.ispep.RELATIVE',
+        description: 'Jag har en relation med en person som är PEP',
+        defaultMessage: `{ 
+        entityType, select,
+          PERSON {
+            Jag har en relation med en person som är PEP
+          }
+          CORPORATION {
+            {name} är medarbetare till, eller har en affärsrelation med, en person som är PEP
+          }
+      }`
+    },
+    [PepType.COLLEAGUE]: {
+        id: 'pep.ispep.COLLEAGUE',
+        description: 'The person has a colleague that is pep',
+        defaultMessage: `{ 
+        entityType, select,
+          PERSON {
+            Jag är medarbetare till, eller har en affärsrelation med, en person som är PEP
+          }
+          CORPORATION {
+            På grund av sin funktion är {name} PEP
+          }
+      }`
+    },
+})

package/src/pages/IsPep/IsPepPage.tsx

@@ -0,0 +1,94 @@
+import React, {
+  FunctionComponent,
+  useRef,
+  useCallback,
+  useContext
+} from "react";
+import {
+  Form,
+  RadioGroup,
+  RequiredValidator,
+  PrimaryButton,
+  LysaFormRef
+} from "@lysaab/ui-2";
+import { PepType, PepContext, EntityType } from "../PepContext";
+import { useIntl, FormattedMessage } from "react-intl";
+import { messages } from "./IsPepMessages";
+
+export interface ExternalIsPepState {
+  ownerName: string;
+  entityType: EntityType;
+  type?: PepType;
+  onChange: (type: PepType) => void;
+}
+
+interface Props {
+  next?: () => void;
+}
+
+export const IsPepRadioGroup: FunctionComponent<ExternalIsPepState> = ({
+  ownerName,
+  entityType,
+  type,
+  onChange
+}) => {
+  const intl = useIntl();
+
+  const IsPepAlternatives = [
+    {
+      text: intl.formatMessage(messages[PepType.NOT_PEP], { entityType, name: ownerName }),
+      value: PepType.NOT_PEP
+    },
+    { text: intl.formatMessage(messages[PepType.ME], { entityType, name: ownerName }), value: PepType.ME },
+    {
+      text: intl.formatMessage(messages[PepType.RELATIVE], { entityType, name: ownerName }),
+      value: PepType.RELATIVE
+    },
+    {
+      text: intl.formatMessage(messages[PepType.COLLEAGUE], { entityType, name: ownerName }),
+      value: PepType.COLLEAGUE
+    }
+  ];
+
+  return (
+    <RadioGroup
+      alternatives={IsPepAlternatives}
+      onChange={alt => onChange(alt.value)}
+      value={IsPepAlternatives.find(alt => alt.value === type)}
+      header={intl.formatMessage(messages.header, { entityType, name: ownerName })}
+      validators={[RequiredValidator(intl.formatMessage(messages.required))]}
+    />
+  );
+};
+
+export const IsPepPage: FunctionComponent<Props> = ({ next }) => {
+  const pepContext = useContext(PepContext);
+  const formRef = useRef<LysaFormRef>();
+
+  const nextPage = useCallback(() => {
+    if (formRef.current && formRef.current.isValid && next) {
+      next();
+    }
+  }, [formRef, next]);
+
+  return (
+    <Form onSubmit={nextPage} lysaFormRef={formRef}>
+      <IsPepRadioGroup
+        entityType={pepContext.state.legalEntityType || EntityType.PERSON}
+        ownerName={pepContext.state.ownerName || ""}
+        type={pepContext.state.type}
+        onChange={type => {
+          pepContext.setState({ type });
+        }}
+      />
+
+      <PrimaryButton type="submit">
+        <FormattedMessage
+          id="pep.ispep.next"
+          description="Next button"
+          defaultMessage='Gå vidare'
+        />
+      </PrimaryButton>
+    </Form>
+  );
+};