@lysaab/lysa-pep 1.0.0 → 1.0.2-0

package/src/demo/Pep.tsx

@@ -1,106 +1,112 @@
-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 { PepContext, PepType, EntityType } from "../pages/PepContext";
-import { Done } from "./Done";
-import { PepRelationPage } from "../pages/PepRelationPage";
-
-export function Pep() {
-  const [page, setPage] = useState(0);
-  const pepContext = useContext(PepContext);
-  const type = pepContext.state.type;
-  const loaded = useRef(false);
-
-  useEffect(() => {
-    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 })
-              }
-            />
-          </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>
-    </div>
-  );
-}
+import React, { useState, useContext, useEffect, useRef } from "react";
+import { Story } from "@lysaab/ui-2";
+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 { RelationPage } from "../pages/RelationPage/RelationPage";
+
+export function Pep() {
+  const [page, setPage] = useState(0);
+  const pepContext = useContext(PepContext);
+  const type = pepContext.state.type;
+  const loaded = useRef(false);
+
+  useEffect(() => {
+    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" }}>
+      <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 === 2 && type === PepType.ME) {
+              setPage(0);
+            } else {
+              setPage(page - 1);
+            }
+          }}
+          transitionKey={page.toString()}
+          onExit={() => {}}
+        >
+          {page === 0 ? (
+            <IsPepPage
+              next={() => {
+                if (type === PepType.NOT_PEP) {
+                  setPage(4);
+                } else if (type === PepType.ME) {
+                  setPage(page + 2);
+                } else {
+                  setPage(page + 1);
+                }
+              }}
+            />
+          ) : null}
+          {page === 1 ? <RelationPage next={() => setPage(page + 1)} /> : null}
+          {page === 2 ? <StatusPage 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/model/PepModel.ts

@@ -1,52 +1,52 @@
-import { PepState, PepType, EntityType, PepStatus } from "../pages/PepContext";
-import { DateTime } from "luxon";
-
-export interface PepRequest
-  extends Omit<PepState, "isSweden" | "isOngoing" | "ended" | "birthdayOfPEP"> {
-  ended?: string;
-  birthdayOfPEP?: string;
-}
-
-/**
- * Do some minor preprocessing before we are ready to send everything to the
- * server
- */
-export function stateToRequest(pepData: PepState): PepRequest {
-  const data = { ...pepData };
-  delete data.isSweden;
-  delete data.isOngoing;
-  delete data.ownerName;
-  if (data.legalEntityType === EntityType.PERSON) {
-    delete data.tin;
-  }
-  return {
-    ...data,
-    country: data.type !== PepType.NOT_PEP ? data.country || "SE" : undefined,
-    ended: data.ended
-      ? DateTime.fromJSDate(data.ended).toFormat("yyyy-MM")
-      : undefined,
-    birthdayOfPEP: data.birthdayOfPEP
-      ? DateTime.fromJSDate(data.birthdayOfPEP).toFormat("yyyy-MM-dd")
-      : undefined
-  };
-}
-
-export function requestToState({
-  ended,
-  birthdayOfPEP,
-  ...serverData
-}: PepRequest): PepState {
-  const state: PepState = { ...serverData };
-  if (ended) {
-    state.ended = DateTime.fromFormat(ended, "yyyy-MM").toJSDate();
-  }
-  if (birthdayOfPEP) {
-    state.birthdayOfPEP = DateTime.fromFormat(
-      birthdayOfPEP,
-      "yyyy-MM-dd"
-    ).toJSDate();
-  }
-  state.isSweden = state.country === "SE" ? "sweden" : "other";
-  state.isOngoing = state.ended ? PepStatus.ENDED : PepStatus.ONGOING;
-  return state;
-}
+import { PepState, PepType, EntityType, PepStatus } from "../pages/PepContext";
+import { DateTime } from "luxon";
+
+export interface PepRequest
+  extends Omit<PepState, "isSweden" | "isOngoing" | "ended" | "birthdayOfPEP"> {
+  ended?: string;
+  birthdayOfPEP?: string;
+}
+
+/**
+ * Do some minor preprocessing before we are ready to send everything to the
+ * server
+ */
+export function stateToRequest(pepData: PepState): PepRequest {
+  const data = { ...pepData };
+  delete data.isSweden;
+  delete data.isOngoing;
+  delete data.ownerName;
+  if (data.legalEntityType === EntityType.PERSON) {
+    delete data.tin;
+  }
+  return {
+    ...data,
+    country: data.type !== PepType.NOT_PEP ? data.country || "SE" : undefined,
+    ended: data.ended
+      ? DateTime.fromJSDate(data.ended).toFormat("yyyy-MM")
+      : undefined,
+    birthdayOfPEP: data.birthdayOfPEP
+      ? DateTime.fromJSDate(data.birthdayOfPEP).toFormat("yyyy-MM-dd")
+      : undefined
+  };
+}
+
+export function requestToState({
+  ended,
+  birthdayOfPEP,
+  ...serverData
+}: PepRequest): PepState {
+  const state: PepState = { ...serverData };
+  if (ended) {
+    state.ended = DateTime.fromFormat(ended, "yyyy-MM").toJSDate();
+  }
+  if (birthdayOfPEP) {
+    state.birthdayOfPEP = DateTime.fromFormat(
+      birthdayOfPEP,
+      "yyyy-MM-dd"
+    ).toJSDate();
+  }
+  state.isSweden = state.country === "SE" ? "sweden" : "other";
+  state.isOngoing = state.ended ? PepStatus.ENDED : PepStatus.ONGOING;
+  return state;
+}

package/src/pages/IsPep/IsPepMessages.ts

@@ -0,0 +1,67 @@
+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.required",
+    description: "Not pep",
+    defaultMessage: "Du måste välja ett alternativ",
+  },
+  [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,114 @@
+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={[
+        new 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>
+  );
+};