@lysaab/lysa-pep 7.0.0 → 7.1.0

package/src/components/PepAnswers.tsx

@@ -1,218 +0,0 @@
-import React, { FunctionComponent } from "react";
-import "./PepAnswers.scss";
-import { PepRequest } from "../model/PepModel";
-import { getRoleAlts, getMilitaryAlts } from "../pages/RolePage/RolePage";
-import { 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.answers.who.label",
-  },
-  relationLabel: {
-    id: "pep.answers.relationship.label",
-  },
-  businessRelationLabel: {
-    id: "pep.answers.businessRelationship.label",
-  },
-  nameOfPepLabel: {
-    id: "pep.answers.nameOfPep.label",
-  },
-  birthdayOfPEPLabel: {
-    id: "pep.answers.birthdayOfPEP.label",
-  },
-  statusLabel: {
-    id: "pep.answers.status.label",
-  },
-  statusEndedValue: {
-    id: "pep.answers.statusEnded.value",
-  },
-  statusOngoingValue: {
-    id: "pep.answers.statusOngoing.value",
-  },
-  endedLabel: {
-    id: "pep.answers.endedStatus.label",
-  },
-  roleLabel: {
-    id: "pep.answers.role.label",
-  },
-  countryLabel: {
-    id: "pep.answers.country.label",
-  },
-  ambassadorCountryLabel: {
-    id: "pep.answers.ambassadorCountry.label",
-  },
-  governmentCompanyNameLabel: {
-    id: "pep.answers.governmentCompanyName.label",
-  },
-  governmentCompanyRoleLabel: {
-    id: "pep.answers.governmentCompanyRole.label",
-  },
-  internationalOrganisationNameLabel: {
-    id: "pep.answers.companyName.label",
-  },
-  internationalOrganisationRoleLabel: {
-    id: "pep.answers.companyRole.label",
-  },
-  militaryGradeLabel: {
-    id: "pep.answers.militaryRank.label",
-  },
-});
-
-export const PepAnswers: FunctionComponent<Props> = ({ answer }) => {
-  const intl = useIntl();
-
-  if (!answer.type || answer.type === PepType.NOT_PEP) {
-    return (
-      <div>
-        <p>
-          <FormattedMessage id="pep.answers.notpep" />
-        </p>
-      </div>
-    );
-  }
-
-  const entityType = answer.legalEntityType;
-  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,
-            name: answer.ownerName,
-          })}
-        />
-      )}
-      {answer.relationToPEP && (
-        <StaticInput
-          label={intl.formatMessage(messages.relationLabel)}
-          value={intl.formatMessage(relationMessages[answer.relationToPEP], {
-            entityType,
-            name: answer.ownerName,
-          })}
-        />
-      )}
-      {answer.businessRelation && (
-        <StaticInput
-          label={intl.formatMessage(messages.businessRelationLabel)}
-          value={intl.formatMessage(
-            businessRelationMessages[answer.businessRelation],
-            { entityType, name: answer.ownerName }
-          )}
-        />
-      )}
-      {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={intl.formatDisplayName(answer.country, { type: "region" })}
-        />
-      )}
-      {role && (
-        <StaticInput
-          label={intl.formatMessage(messages.roleLabel)}
-          value={role.text}
-        />
-      )}
-      {answer.ambassadorCountry && (
-        <StaticInput
-          label={intl.formatMessage(messages.ambassadorCountryLabel)}
-          value={intl.formatDisplayName(answer.ambassadorCountry, {
-            type: "region",
-          })}
-        />
-      )}
-      {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.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>
-  );
-};

package/src/demo/Done.tsx

@@ -1,21 +0,0 @@
-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,
-        }}
-      />
-      <pre>{JSON.stringify(stateToRequest(pepContext.state), null, 2)}</pre>
-    </div>
-  );
-}

package/src/demo/Localization.tsx

@@ -1,66 +0,0 @@
-import React, { useContext, useEffect } from "react";
-import { IntlProvider } from "react-intl";
-import { Language, LocalizationContext } from "./LocalizationContext";
-import svMessages from "../locales/sv.json";
-import enMessages from "../locales/en.json";
-import deMessages from "../locales/de.json";
-import { enGB, sv, de } from "date-fns/esm/locale";
-import { registerLocale, setDefaultLocale } from "react-datepicker";
-
-/**
- * Setup locales for all datepickers. We use the country code
- * as the key for the datepicker locale data
- */
-registerLocale(Language.SWEDISH, sv);
-registerLocale(Language.ENGLISH, enGB);
-registerLocale(Language.GERMAN, de);
-
-console.log("sv", sv);
-
-declare global {
-  interface Window {
-    setLanguage?: (lang: Language) => void;
-  }
-}
-
-const languagePacks = {
-  [Language.ENGLISH]: enMessages,
-  [Language.SWEDISH]: svMessages,
-  [Language.GERMAN]: deMessages,
-};
-
-const DEFAULT_LOCALE = "en";
-
-export const Localization: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const localizationContext = useContext(LocalizationContext);
-
-  useEffect(() => {
-    /**
-     * Change datepicker locale when language is changed
-     */
-    setDefaultLocale(localizationContext.state.language);
-    console.log(
-      "datepicker locale change to",
-      localizationContext.state.language
-    );
-  }, [localizationContext.state.language]);
-
-  useEffect(() => {
-    window.setLanguage = (lang: Language) => {
-      localizationContext.setState({ language: lang });
-    };
-    return () => {
-      delete window.setLanguage;
-    };
-  }, [localizationContext]);
-
-  return (
-    <IntlProvider
-      locale={localizationContext.getLocale()}
-      defaultLocale={DEFAULT_LOCALE}
-      messages={languagePacks[localizationContext.state.language] as any}
-    >
-      {children}
-    </IntlProvider>
-  );
-};

package/src/demo/LocalizationContext.tsx

@@ -1,61 +0,0 @@
-import React, { FunctionComponent, useReducer } from "react";
-
-export enum Language {
-  SWEDISH = "sv",
-  ENGLISH = "en",
-  GERMAN = "de",
-}
-
-export enum Country {
-  DE = "DE",
-  SE = "SE",
-  DK = "DK",
-  FI = "FI",
-}
-
-// Types for the state
-export interface LocalizationState {
-  language: Language;
-  country?: Country;
-}
-
-// All types for the context. This includes setter methods
-export interface LocalizationContextProps {
-  state: LocalizationState;
-  setState: (newState: Partial<LocalizationState>) => void;
-  getLocale: () => string;
-}
-
-// Create the context. (This will just create a template)
-export const LocalizationContext =
-  React.createContext<LocalizationContextProps>({} as LocalizationContextProps);
-
-function stateReducer(
-  state: LocalizationState,
-  newState: Partial<LocalizationState>
-) {
-  return { ...state, ...newState };
-}
-
-export const LocalizationContextProvider: FunctionComponent<React.PropsWithChildren<unknown>> = ({
-  children,
-}) => {
-  const [state, setState] = useReducer(stateReducer, {
-    language: Language.ENGLISH,
-  });
-
-  const getLocale = () => {
-    let locale: string = state.language;
-    if (state.country) {
-      locale = `${state.language}-${state.country}`;
-    }
-
-    return locale;
-  };
-
-  return (
-    <LocalizationContext.Provider value={{ state, setState, getLocale }}>
-      {children}
-    </LocalizationContext.Provider>
-  );
-};

package/src/demo/Pep.tsx

@@ -1,172 +0,0 @@
-import React, { useState, useContext, useEffect, useRef } from "react";
-import { Story, WorldCountry } from "@lysaab/ui-2";
-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 { RelationPage } from "../pages/RelationPage/RelationPage";
-import { Localization } from "./Localization";
-import { Country, Language, LocalizationContext } from "./LocalizationContext";
-
-export function Pep() {
-  const [page, setPage] = useState(0);
-  const pepContext = useContext(PepContext);
-  const localizationContext = useContext(LocalizationContext);
-  const type = pepContext.state.type;
-  const loaded = useRef(false);
-
-  useEffect(() => {
-    if (!loaded.current) {
-      pepContext.setState({
-        ownerName: "Sean Banan",
-        tin: "191212121212",
-        legalEntityType: EntityType.PERSON,
-      });
-      localizationContext.setState({
-        country: Country.DK,
-        language: Language.ENGLISH,
-      });
-      loaded.current = true;
-    }
-  }, [loaded, pepContext, localizationContext]);
-
-  const countryCode = localizationContext.state.country || Country.DK;
-  const countryNames = {
-    [Language.ENGLISH]: {
-      [Country.DE]: "Germany",
-      [Country.DK]: "Denmark",
-      [Country.SE]: "Sweden",
-      [Country.FI]: "Finland",
-    },
-    [Language.SWEDISH]: {
-      [Country.DE]: "Tyskland",
-      [Country.DK]: "Danmark",
-      [Country.SE]: "Sverige",
-      [Country.FI]: "Finland",
-    },
-    [Language.GERMAN]: {
-      [Country.DE]: "Deutschland",
-      [Country.DK]: "Dänemark",
-      [Country.SE]: "Schweden",
-      [Country.FI]: "Finnland",
-    },
-  };
-
-  return (
-    <div style={{ maxWidth: "1000px", margin: "0 auto" }}>
-      <Localization>
-        <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={() => {}}
-          ariaLabelProgress={() => "Progress"}
-        >
-          {page === 0 && (
-            <IsPepPage
-              next={() => {
-                if (type === PepType.ME) {
-                  setPage(2);
-                } else if (type === PepType.NOT_PEP) {
-                  setPage(4);
-                } else {
-                  setPage(1);
-                }
-              }}
-            />
-          )}
-          {page === 1 && <RelationPage next={() => setPage(2)} />}
-          {page === 2 && (
-            <StatusPage
-              countryName={
-                countryNames[localizationContext.state.language][countryCode]
-              }
-              countryCode={countryCode as unknown as WorldCountry}
-              language={localizationContext.state.language}
-              next={() => setPage(3)}
-            />
-          )}
-          {page === 3 && (
-            <RolePage
-              language={localizationContext.state.language}
-              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 })
-                }
-              />
-            </label>
-          </div>
-          <div>
-            <label>
-              Personnummer på huvudmannen
-              <input
-                type="text"
-                value={pepContext.state.tin || ""}
-                onChange={(event) =>
-                  pepContext.setState({ tin: event.currentTarget.value })
-                }
-              />
-            </label>
-          </div>
-          <div>
-            <label>
-              Språk
-              <select
-                value={localizationContext.state.language}
-                onChange={(event) => {
-                  localizationContext.setState({
-                    language: event.currentTarget.value as Language,
-                  });
-                }}
-              >
-                <option value={Language.ENGLISH}>Engelska</option>
-                <option value={Language.SWEDISH}>Svenska</option>
-                <option value={Language.GERMAN}>German</option>
-              </select>
-            </label>
-          </div>
-        </fieldset>
-      </Localization>
-    </div>
-  );
-}

package/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

package/src/index.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import "./index.css";
-import App from "./App";
-import * as serviceWorker from "./serviceWorker";
-
-const root = createRoot(document.getElementById("root")!);
-root.render(<App />);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();