@lysaab/lysa-pep 0.18.0 → 1.0.0-1

package/src/components/CountrySelect.tsx

@@ -1,43 +1,47 @@
-import React, { useState, FunctionComponent } from "react";
-import { Alternative, Select } from "@lysaab/ui-2";
-import { ValidationProps } from "@lysaab/ui-2/hooks/useValidation";
-import { countries } from "../model/Countries";
-
-declare global {
-  interface Window {
-    lysa: { contentPath: string };
-  }
-}
-
-export interface Country {
-  label: string;
-  value: string;
-}
-
-interface Props extends ValidationProps {
-  value?: string;
-  onChange?(value: Alternative<string>): void;
-  label: string;
-  removeSweden?: boolean;
-}
-
-export const CountrySelect: FunctionComponent<Props> = ({
-  value,
-  removeSweden = false,
-  ...props
-}) => {
-  const [countryAlternatives] = useState(
-    countries
-      .filter(country => !(removeSweden && country.value === "SE"))
-      .map(country => ({ text: country.label, value: country.value }))
-  );
-
-  return (
-    <Select
-      alternatives={countryAlternatives}
-      placeholder={"Välj ett land"}
-      value={countryAlternatives.find(country => country.value === value)}
-      {...props}
-    />
-  );
-};
+import React, { useState, FunctionComponent } from "react";
+import { Alternative, Select } from "@lysaab/ui-2";
+import { ValidationProps } from "@lysaab/ui-2/hooks/useValidation";
+import { countries } from "../model/Countries";
+import { defineMessages, useIntl } from "react-intl";
+
+export interface Country {
+  label: string;
+  value: string;
+}
+
+interface Props extends ValidationProps {
+  value?: string;
+  onChange?(value: Alternative<string>): void;
+  label: string;
+  omitCountries?: string[];
+}
+
+const messages = defineMessages({
+  placeholder: {
+    id: 'component.select.country',
+    description: 'Select a country placeholder',
+    defaultMessage: 'Välj ett land'
+  }
+})
+
+export const CountrySelect: FunctionComponent<Props> = ({
+  value,
+  omitCountries = [],
+  ...props
+}) => {
+  const intl = useIntl();
+  const [countryAlternatives] = useState(
+    countries
+      .filter(country => !omitCountries.includes(country.value))
+      .map(country => ({ text: country.label, value: country.value }))
+  );
+
+  return (
+    <Select
+      alternatives={countryAlternatives}
+      placeholder={intl.formatMessage(messages.placeholder)}
+      value={countryAlternatives.find(country => country.value === value)}
+      {...props}
+    />
+  );
+};

package/src/components/PepAnswers.scss

@@ -1,7 +1,7 @@
-.static-input {
-  margin-bottom: 8px;
-
-  .label {
-    font-weight: bold;
-  }
-}
+.static-input {
+  margin-bottom: 8px;
+
+  .label {
+    font-weight: bold;
+  }
+}

package/src/components/PepAnswers.tsx

@@ -1,120 +1,252 @@
-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 { EntityType, PepType } from "../pages/PepContext";
-
-interface Props {
-  answer: PepRequest;
-}
-
-export const PepAnswers: FunctionComponent<Props> = ({ answer }) => {
-  if (!answer.type || answer.type === PepType.NOT_PEP) {
-    return <div><p>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(
-    alt => alt.value === answer.militaryRank
-  );
-  return (
-    <div>
-      {answer.type && (
-        <StaticInput
-          label="Vem är pep"
-          value={labels[entityType].GENERIC.IS_PEP[answer.type]}
-        />
-      )}
-      {answer.relationToPEP && (
-        <StaticInput
-          label="Relation"
-          value={
-            labels[entityType][PepType.RELATIVE].RELATION[
-              answer.relationToPEP
-            ]
-          }
-        />
-      )}
-      {answer.businessRelation && (
-        <StaticInput
-          label="Relation"
-          value={
-            labels[entityType][PepType.COLLEAGUE].BUSINESS_RELATION[
-              answer.businessRelation
-            ]
-          }
-        />
-      )}
-      {answer.nameOfPEP && (
-        <StaticInput label="Namn på personen" value={answer.nameOfPEP} />
-      )}
-      {answer.birthdayOfPEP && (
-        <StaticInput
-          label="Födelsedag för personen"
-          value={answer.birthdayOfPEP}
-        />
-      )}
-      {answer.ended ? (
-        <React.Fragment>
-          <StaticInput label="Status" value="Avslutad" />
-          <StaticInput label="Avslutades" value={answer.ended} />
-        </React.Fragment>
-      ) : (
-        <StaticInput label="Status" value="Pågående" />
-      )}
-      {answer.country && (
-        <StaticInput
-          label="Land"
-          value={country ? country.label : answer.country}
-        />
-      )}
-      {role && <StaticInput label="Roll" value={role.text} />}
-      {answer.ambassadorCountry && (
-        <StaticInput label="Ambassadörsland" value={answer.ambassadorCountry} />
-      )}
-      {answer.governmentCompany && (
-        <StaticInput label="Företagets namn" value={answer.governmentCompany} />
-      )}
-      {answer.governmentCompanyRole && (
-        <StaticInput
-          label="Roll på företaget"
-          value={answer.governmentCompanyRole}
-        />
-      )}
-      {answer.internationalOrganisation && (
-        <StaticInput
-          label="Organisationens namn"
-          value={answer.internationalOrganisation}
-        />
-      )}
-      {answer.internationalOrganisationRole && (
-        <StaticInput
-          label="Roll i organisationen"
-          value={answer.internationalOrganisationRole}
-        />
-      )}
-      {militaryRank && (
-        <StaticInput label="Militär grad" value={militaryRank.text} />
-      )}
-    </div>
-  );
-};
-
-interface StaticInputProps {
-  label: string;
-  value: string | React.ReactNode;
-}
-
-const StaticInput: FunctionComponent<StaticInputProps> = ({ label, value }) => {
-  return (
-    <div className="static-input">
-      <div className="label">{label}</div>
-      <div className="value">{value}</div>
-    </div>
-  );
-};
+import React, { FunctionComponent } from "react";
+import "./PepAnswers.scss";
+import { PepRequest } from "../model/PepModel";
+import { countries } from "../model/Countries";
+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>
+          <FormattedMessage
+            id="pep.anwers.notpep"
+            description="Not pep"
+            defaultMessage="Personen är inte PEP"
+          />
+        </p>
+      </div>
+    );
+  }
+
+  const country = countries.find(country => country.value === answer.country);
+  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={intl.formatMessage(messages.whoIsPepLabel)}
+          value={intl.formatMessage(isPepMessages[answer.type], {
+            entityType: EntityType.PERSON
+          })}
+        />
+      )}
+      {answer.relationToPEP && (
+        <StaticInput
+          label={intl.formatMessage(messages.relationLabel)}
+          value={intl.formatMessage(relationMessages[answer.relationToPEP])}
+        />
+      )}
+      {answer.businessRelation && (
+        <StaticInput
+          label={intl.formatMessage(messages.businessRelationLabel)}
+          value={intl.formatMessage(
+            businessRelationMessages[answer.businessRelation]
+          )}
+        />
+      )}
+      {answer.nameOfPEP && (
+        <StaticInput
+          label={intl.formatMessage(messages.nameOfPepLabel)}
+          value={answer.nameOfPEP}
+        />
+      )}
+      {answer.birthdayOfPEP && (
+        <StaticInput
+          label={intl.formatMessage(messages.birthdayOfPEPLabel)}
+          value={answer.birthdayOfPEP}
+        />
+      )}
+      {answer.ended ? (
+        <React.Fragment>
+          <StaticInput
+            label={intl.formatMessage(messages.statusLabel)}
+            value={intl.formatMessage(messages.statusEndedValue)}
+          />
+          <StaticInput
+            label={intl.formatMessage(messages.endedLabel)}
+            value={answer.ended}
+          />
+        </React.Fragment>
+      ) : (
+        <StaticInput
+          label={intl.formatMessage(messages.statusLabel)}
+          value={intl.formatMessage(messages.statusOngoingValue)}
+        />
+      )}
+      {answer.country && (
+        <StaticInput
+          label={intl.formatMessage(messages.countryLabel)}
+          value={country ? country.label : answer.country}
+        />
+      )}
+      {role && (
+        <StaticInput
+          label={intl.formatMessage(messages.roleLabel)}
+          value={role.text}
+        />
+      )}
+      {answer.ambassadorCountry && (
+        <StaticInput
+          label={intl.formatMessage(messages.ambassadorCountryLabel)}
+          value={
+            countries.find(
+              country => country.value === answer.ambassadorCountry
+            )?.label || answer.ambassadorCountry
+          }
+        />
+      )}
+      {answer.governmentCompany && (
+        <StaticInput
+          label={intl.formatMessage(messages.governmentCompanyNameLabel)}
+          value={answer.governmentCompany}
+        />
+      )}
+      {answer.governmentCompanyRole && (
+        <StaticInput
+          label={intl.formatMessage(messages.governmentCompanyRoleLabel)}
+          value={answer.governmentCompanyRole}
+        />
+      )}
+      {answer.internationalOrganisation && (
+        <StaticInput
+          label={intl.formatMessage(
+            messages.internationalOrganisationNameLabel
+          )}
+          value={answer.internationalOrganisation}
+        />
+      )}
+      {answer.internationalOrganisationRole && (
+        <StaticInput
+          label={intl.formatMessage(
+            messages.internationalOrganisationRoleLabel
+          )}
+          value={answer.internationalOrganisationRole}
+        />
+      )}
+      {militaryRank && (
+        <StaticInput
+          label={intl.formatMessage(messages.militaryGradeLabel)}
+          value={militaryRank.value}
+        />
+      )}
+    </div>
+  );
+};
+
+interface StaticInputProps {
+  label: string;
+  value: string | React.ReactNode;
+}
+
+const StaticInput: FunctionComponent<StaticInputProps> = ({ label, value }) => {
+  return (
+    <div className="static-input">
+      <div className="label">{label}</div>
+      <div className="value">{value}</div>
+    </div>
+  );
+};

package/src/demo/Done.tsx

@@ -1,20 +1,16 @@
-import React, { useContext } from "react";
-import { PepContext } from "../pages/PepContext";
-import { stateToRequest } from "../model/PepModel";
-import { PepAnswers } from "../components/PepAnswers";
-
-export function Done() {
-  const pepContext = useContext(PepContext);
-  return (
-    <div>
-      <h2>Taco hej!</h2>
-      <p>Leverpastej!</p>
-      <PepAnswers
-        answer={{
-          ...stateToRequest(pepContext.state),
-          ownerName: pepContext.state.ownerName,
-        }}
-      />
-    </div>
-  );
-}
+import React, { useContext } from "react";
+import { PepContext } from "../pages/PepContext";
+import { stateToRequest } from "../model/PepModel";
+import { PepAnswers } from "../components/PepAnswers";
+
+export function Done() {
+  const pepContext = useContext(PepContext);
+  return (
+    <div>
+      <h2>Taco hej!</h2>
+      <p>Leverpastej!</p>
+      <PepAnswers answer={stateToRequest(pepContext.state)} />
+      <pre>{JSON.stringify(stateToRequest(pepContext.state), null, 2)}</pre>
+    </div>
+  );
+}