@lysaab/lysa-pep 1.0.2-0 → 1.0.4-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/pages/IsPep/IsPepPage.js +7 -6
  2. package/lib/pages/RelationPage/RelationPage.js +55 -54
  3. package/lib/pages/RolePage/RolePage.js +81 -78
  4. package/lib/pages/StatusPage/StatusPage.js +38 -35
  5. package/package.json +3 -3
  6. package/src/pages/IsPep/IsPepPage.tsx +13 -9
  7. package/src/pages/RelationPage/RelationPage.tsx +113 -108
  8. package/src/pages/RolePage/RolePage.tsx +145 -140
  9. package/src/pages/StatusPage/StatusPage.tsx +82 -76
package/lib/pages/IsPep/IsPepPage.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useRef, useCallback, useContext, } from "react";
2
- import { Form, RadioGroup, RequiredValidator, PrimaryButton, } from "@lysaab/ui-2";
2
+ import { Form, RadioGroup, RequiredValidator, PrimaryButton, Card, } from "@lysaab/ui-2";
3
3
  import { PepType, PepContext, EntityType } from "../PepContext";
4
4
  import { useIntl, FormattedMessage } from "react-intl";
5
5
  import { messages } from "./IsPepMessages";
@@ -40,7 +40,7 @@ export const IsPepRadioGroup = ({ ownerName, entityType, type, onChange, }) => {
40
40
  name: ownerName,
41
41
  }), validators: [
42
42
  new RequiredValidator(intl.formatMessage(messages.required)),
43
- ] }));
43
+ ], "data-test-id": "pep-ispep" }));
44
44
  };
45
45
  export const IsPepPage = ({ next }) => {
46
46
  const pepContext = useContext(PepContext);
@@ -51,9 +51,10 @@ export const IsPepPage = ({ next }) => {
51
51
  }
52
52
  }, [formRef, next]);
53
53
  return (React.createElement(Form, { onSubmit: nextPage, lysaFormRef: formRef },
54
- React.createElement(IsPepRadioGroup, { entityType: pepContext.state.legalEntityType || EntityType.PERSON, ownerName: pepContext.state.ownerName || "", type: pepContext.state.type, onChange: (type) => {
55
- pepContext.setState({ type });
56
- } }),
57
- React.createElement(PrimaryButton, { type: "submit" },
54
+ React.createElement(Card, null,
55
+ React.createElement(IsPepRadioGroup, { entityType: pepContext.state.legalEntityType || EntityType.PERSON, ownerName: pepContext.state.ownerName || "", type: pepContext.state.type, onChange: (type) => {
56
+ pepContext.setState({ type });
57
+ } })),
58
+ React.createElement(PrimaryButton, { block: true, type: "submit" },
58
59
  React.createElement(FormattedMessage, { id: "pep.ispep.next", description: "Next button", defaultMessage: "G\u00E5 vidare" }))));
59
60
  };
package/lib/pages/RelationPage/RelationPage.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useContext, useRef, useCallback, } from "react";
2
2
  import { PepContext, PepType, BusinessRelation, Relation, EntityType, } from "../PepContext";
3
- import { RadioGroup, Form, RequiredValidator, TextInput, Datepicker, PrimaryButton, } from "@lysaab/ui-2";
3
+ import { RadioGroup, Form, RequiredValidator, TextInput, Datepicker, PrimaryButton, Card, } from "@lysaab/ui-2";
4
4
  import { DateTime } from "luxon";
5
5
  import { useIntl, FormattedMessage } from "react-intl";
6
6
  import { relationMessages, businessRelationMessages, relativeNameMessages, birthdayMessages, colleagueNameMessages, } from "./RelationMessages";
@@ -20,64 +20,65 @@ export const RelationPage = ({ next }) => {
20
20
  }
21
21
  }, [formRef, next]);
22
22
  return (React.createElement(Form, { onSubmit: () => nextPage(), lysaFormRef: formRef },
23
- type === PepType.RELATIVE ? (React.createElement(RadioGroup, { alternatives: relationAlternatives, onChange: (alternative) => {
24
- pepContext.setState({
25
- relationToPEP: alternative.value,
26
- });
27
- }, value: relationAlternatives.find((alt) => alt.value === pepContext.state.relationToPEP), header: intl.formatMessage(relationMessages.header, {
28
- entityType,
29
- name: pepContext.state.ownerName,
30
- possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
31
- }), validators: [
32
- new RequiredValidator(intl.formatMessage(relationMessages.required)),
33
- ] })) : null,
34
- type === PepType.COLLEAGUE ? (React.createElement(RadioGroup, { alternatives: businessRelationAlternatives, onChange: (alternative) => {
35
- pepContext.setState({
36
- businessRelation: alternative.value,
37
- });
38
- }, value: businessRelationAlternatives.find((alt) => alt.value === pepContext.state.businessRelation), header: intl.formatMessage(businessRelationMessages.header, {
39
- entityType,
40
- name: pepContext.state.ownerName,
41
- }), validators: [
42
- new RequiredValidator(intl.formatMessage(businessRelationMessages.required)),
43
- ] })) : null,
44
- pepContext.state.relationToPEP && type === PepType.RELATIVE ? (React.createElement(React.Fragment, null,
45
- React.createElement(TextInput, { label: intl.formatMessage(relativeNameMessages.header, {
23
+ React.createElement(Card, null,
24
+ type === PepType.RELATIVE ? (React.createElement(RadioGroup, { alternatives: relationAlternatives, onChange: (alternative) => {
25
+ pepContext.setState({
26
+ relationToPEP: alternative.value,
27
+ });
28
+ }, value: relationAlternatives.find((alt) => alt.value === pepContext.state.relationToPEP), header: intl.formatMessage(relationMessages.header, {
46
29
  entityType,
47
30
  name: pepContext.state.ownerName,
48
- relation: pepContext.state.type === PepType.COLLEAGUE
49
- ? pepContext.state.businessRelation
50
- : pepContext.state.relationToPEP,
51
31
  possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
52
- }), value: pepContext.state.nameOfPEP || "", onChange: (value) => {
53
- pepContext.setState({ nameOfPEP: value });
54
- }, validators: [
55
- new RequiredValidator(intl.formatMessage(relativeNameMessages.required)),
56
- ] }),
57
- React.createElement(Datepicker, { label: intl.formatMessage(birthdayMessages.header, {
32
+ }), validators: [
33
+ new RequiredValidator(intl.formatMessage(relationMessages.required)),
34
+ ] })) : null,
35
+ type === PepType.COLLEAGUE ? (React.createElement(RadioGroup, { alternatives: businessRelationAlternatives, onChange: (alternative) => {
36
+ pepContext.setState({
37
+ businessRelation: alternative.value,
38
+ });
39
+ }, value: businessRelationAlternatives.find((alt) => alt.value === pepContext.state.businessRelation), header: intl.formatMessage(businessRelationMessages.header, {
58
40
  entityType,
59
41
  name: pepContext.state.ownerName,
60
- relation: pepContext.state.type === PepType.COLLEAGUE
61
- ? pepContext.state.businessRelation
62
- : pepContext.state.relationToPEP,
63
- possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
64
- }), selected: pepContext.state.birthdayOfPEP, onChange: (event) => pepContext.setState({ birthdayOfPEP: event || undefined }), validators: [
65
- new RequiredValidator(intl.formatMessage(birthdayMessages.required)),
66
- ], maxDate: new Date(), openToDate: pepContext.state.birthdayOfPEP || DATEPICKER_START_DATE }))) : null,
67
- pepContext.state.businessRelation && type === PepType.COLLEAGUE ? (React.createElement(React.Fragment, null,
68
- React.createElement(TextInput, { label: intl.formatMessage(colleagueNameMessages.header, {
69
- entityType,
70
- name: pepContext.state.ownerName,
71
- relation: pepContext.state.type === PepType.COLLEAGUE
72
- ? pepContext.state.businessRelation
73
- : pepContext.state.relationToPEP,
74
- possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
75
- }), value: pepContext.state.nameOfPEP || "", onChange: (value) => {
76
- pepContext.setState({ nameOfPEP: value });
77
- }, validators: [
78
- new RequiredValidator(intl.formatMessage(colleagueNameMessages.required)),
79
- ] }))) : null,
80
- React.createElement(PrimaryButton, { type: "submit" },
42
+ }), validators: [
43
+ new RequiredValidator(intl.formatMessage(businessRelationMessages.required)),
44
+ ] })) : null,
45
+ pepContext.state.relationToPEP && type === PepType.RELATIVE ? (React.createElement(React.Fragment, null,
46
+ React.createElement(TextInput, { label: intl.formatMessage(relativeNameMessages.header, {
47
+ entityType,
48
+ name: pepContext.state.ownerName,
49
+ relation: pepContext.state.type === PepType.COLLEAGUE
50
+ ? pepContext.state.businessRelation
51
+ : pepContext.state.relationToPEP,
52
+ possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
53
+ }), value: pepContext.state.nameOfPEP || "", onChange: (value) => {
54
+ pepContext.setState({ nameOfPEP: value });
55
+ }, validators: [
56
+ new RequiredValidator(intl.formatMessage(relativeNameMessages.required)),
57
+ ] }),
58
+ React.createElement(Datepicker, { label: intl.formatMessage(birthdayMessages.header, {
59
+ entityType,
60
+ name: pepContext.state.ownerName,
61
+ relation: pepContext.state.type === PepType.COLLEAGUE
62
+ ? pepContext.state.businessRelation
63
+ : pepContext.state.relationToPEP,
64
+ possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
65
+ }), selected: pepContext.state.birthdayOfPEP, onChange: (event) => pepContext.setState({ birthdayOfPEP: event || undefined }), validators: [
66
+ new RequiredValidator(intl.formatMessage(birthdayMessages.required)),
67
+ ], maxDate: new Date(), openToDate: pepContext.state.birthdayOfPEP || DATEPICKER_START_DATE }))) : null,
68
+ pepContext.state.businessRelation && type === PepType.COLLEAGUE ? (React.createElement(React.Fragment, null,
69
+ React.createElement(TextInput, { label: intl.formatMessage(colleagueNameMessages.header, {
70
+ entityType,
71
+ name: pepContext.state.ownerName,
72
+ relation: pepContext.state.type === PepType.COLLEAGUE
73
+ ? pepContext.state.businessRelation
74
+ : pepContext.state.relationToPEP,
75
+ possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
76
+ }), value: pepContext.state.nameOfPEP || "", onChange: (value) => {
77
+ pepContext.setState({ nameOfPEP: value });
78
+ }, validators: [
79
+ new RequiredValidator(intl.formatMessage(colleagueNameMessages.required)),
80
+ ] }))) : null),
81
+ React.createElement(PrimaryButton, { block: true, type: "submit" },
81
82
  React.createElement(FormattedMessage, { id: "pep.relation.next", description: "Next button", defaultMessage: "G\u00E5 vidare" }))));
82
83
  };
83
84
  function getRelationAlternatives(intl, entityType, pepContext) {
package/lib/pages/RolePage/RolePage.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useRef, useCallback, useContext, } from "react";
2
- import { Form, PrimaryButton, RequiredValidator, TextInput, Select, } from "@lysaab/ui-2";
2
+ import { Form, PrimaryButton, RequiredValidator, TextInput, Select, Card, } from "@lysaab/ui-2";
3
3
  import { PepContext, Role, MilitaryRank, PepType, EntityType, } from "../PepContext";
4
4
  import { CountrySelect } from "../../components/CountrySelect";
5
5
  import { useIntl, FormattedMessage } from "react-intl";
@@ -32,106 +32,109 @@ export const RolePage = ({ next }) => {
32
32
  return null;
33
33
  }
34
34
  return (React.createElement(Form, { onSubmit: () => nextPage(), lysaFormRef: formRef },
35
- React.createElement(Select, { label: intl.formatMessage(roleMessages.header, {
36
- entityType,
37
- pepType: type,
38
- relation: pepContext.state.type === PepType.COLLEAGUE
39
- ? pepContext.state.businessRelation
40
- : pepContext.state.relationToPEP,
41
- name: pepContext.state.ownerName,
42
- possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
43
- }), placeholder: intl.formatMessage(roleMessages.placeholder), alternatives: roleAlternatives, value: roleAlternatives.find((alt) => alt.value === pepContext.state.role), onChange: (event) => {
44
- pepContext.setState({ role: event.value });
45
- resetRoleFields();
46
- }, validators: [
47
- new RequiredValidator(intl.formatMessage(roleMessages.required)),
48
- ] }),
49
- pepContext.state.role && pepContext.state.role === Role.AMBASSADOR ? (React.createElement(CountrySelect, { label: intl.formatMessage(ambassadorMessages.header, {
50
- entityType,
51
- pepType: type,
52
- relation: pepContext.state.type === PepType.COLLEAGUE
53
- ? pepContext.state.businessRelation
54
- : pepContext.state.relationToPEP,
55
- name: pepContext.state.ownerName,
56
- }), onChange: (event) => pepContext.setState({
57
- ambassadorCountry: event.value
58
- ? event.value.toString()
59
- : undefined,
60
- }), value: pepContext.state.ambassadorCountry, validators: [
61
- new RequiredValidator(intl.formatMessage(ambassadorMessages.required)),
62
- ] })) : null,
63
- pepContext.state.role &&
64
- pepContext.state.role === Role.GOVERNMENT_COMPANY ? (React.createElement(React.Fragment, null,
65
- React.createElement(TextInput, { label: intl.formatMessage(governmentCompanyMessages.nameHeader, {
35
+ React.createElement(Card, null,
36
+ React.createElement(Select, { label: intl.formatMessage(roleMessages.header, {
66
37
  entityType,
67
38
  pepType: type,
68
39
  relation: pepContext.state.type === PepType.COLLEAGUE
69
40
  ? pepContext.state.businessRelation
70
41
  : pepContext.state.relationToPEP,
71
42
  name: pepContext.state.ownerName,
72
- }), value: pepContext.state.governmentCompany || "", onChange: (value) => {
73
- pepContext.setState({ governmentCompany: value });
43
+ possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
44
+ }), placeholder: intl.formatMessage(roleMessages.placeholder), alternatives: roleAlternatives, value: roleAlternatives.find((alt) => alt.value === pepContext.state.role), onChange: (event) => {
45
+ pepContext.setState({ role: event.value });
46
+ resetRoleFields();
74
47
  }, validators: [
75
- new RequiredValidator(intl.formatMessage(governmentCompanyMessages.nameRequired)),
48
+ new RequiredValidator(intl.formatMessage(roleMessages.required)),
76
49
  ] }),
77
- React.createElement(TextInput, { label: intl.formatMessage(governmentCompanyMessages.roleHeader, {
50
+ pepContext.state.role && pepContext.state.role === Role.AMBASSADOR ? (React.createElement(CountrySelect, { label: intl.formatMessage(ambassadorMessages.header, {
78
51
  entityType,
79
52
  pepType: type,
80
53
  relation: pepContext.state.type === PepType.COLLEAGUE
81
54
  ? pepContext.state.businessRelation
82
55
  : pepContext.state.relationToPEP,
83
56
  name: pepContext.state.ownerName,
84
- }), value: pepContext.state.governmentCompanyRole || "", onChange: (value) => {
85
- pepContext.setState({
86
- governmentCompanyRole: value,
87
- });
88
- }, validators: [
89
- new RequiredValidator(intl.formatMessage(governmentCompanyMessages.roleRequired)),
90
- ] }))) : null,
91
- pepContext.state.role &&
92
- pepContext.state.role ===
93
- Role.HIGH_RANKING_POSITION_INTERNALTIONAL_CORP ? (React.createElement(React.Fragment, null,
94
- React.createElement(TextInput, { label: intl.formatMessage(intCompanyMessages.nameHeader, {
95
- entityType,
96
- pepType: type,
97
- relation: pepContext.state.type === PepType.COLLEAGUE
98
- ? pepContext.state.businessRelation
99
- : pepContext.state.relationToPEP,
100
- name: pepContext.state.ownerName,
101
- }), value: pepContext.state.internationalOrganisation || "", onChange: (value) => {
102
- pepContext.setState({ internationalOrganisation: value });
103
- }, validators: [
104
- new RequiredValidator(intl.formatMessage(intCompanyMessages.nameRequired)),
105
- ] }),
106
- React.createElement(TextInput, { label: intl.formatMessage(intCompanyMessages.roleHeader, {
57
+ }), onChange: (event) => pepContext.setState({
58
+ ambassadorCountry: event.value
59
+ ? event.value.toString()
60
+ : undefined,
61
+ }), value: pepContext.state.ambassadorCountry, validators: [
62
+ new RequiredValidator(intl.formatMessage(ambassadorMessages.required)),
63
+ ] })) : null,
64
+ pepContext.state.role &&
65
+ pepContext.state.role === Role.GOVERNMENT_COMPANY ? (React.createElement(React.Fragment, null,
66
+ React.createElement(TextInput, { label: intl.formatMessage(governmentCompanyMessages.nameHeader, {
67
+ entityType,
68
+ pepType: type,
69
+ relation: pepContext.state.type === PepType.COLLEAGUE
70
+ ? pepContext.state.businessRelation
71
+ : pepContext.state.relationToPEP,
72
+ name: pepContext.state.ownerName,
73
+ }), value: pepContext.state.governmentCompany || "", onChange: (value) => {
74
+ pepContext.setState({ governmentCompany: value });
75
+ }, validators: [
76
+ new RequiredValidator(intl.formatMessage(governmentCompanyMessages.nameRequired)),
77
+ ] }),
78
+ React.createElement(TextInput, { label: intl.formatMessage(governmentCompanyMessages.roleHeader, {
79
+ entityType,
80
+ pepType: type,
81
+ relation: pepContext.state.type === PepType.COLLEAGUE
82
+ ? pepContext.state.businessRelation
83
+ : pepContext.state.relationToPEP,
84
+ name: pepContext.state.ownerName,
85
+ }), value: pepContext.state.governmentCompanyRole || "", onChange: (value) => {
86
+ pepContext.setState({
87
+ governmentCompanyRole: value,
88
+ });
89
+ }, validators: [
90
+ new RequiredValidator(intl.formatMessage(governmentCompanyMessages.roleRequired)),
91
+ ] }))) : null,
92
+ pepContext.state.role &&
93
+ pepContext.state.role ===
94
+ Role.HIGH_RANKING_POSITION_INTERNALTIONAL_CORP ? (React.createElement(React.Fragment, null,
95
+ React.createElement(TextInput, { label: intl.formatMessage(intCompanyMessages.nameHeader, {
96
+ entityType,
97
+ pepType: type,
98
+ relation: pepContext.state.type === PepType.COLLEAGUE
99
+ ? pepContext.state.businessRelation
100
+ : pepContext.state.relationToPEP,
101
+ name: pepContext.state.ownerName,
102
+ }), value: pepContext.state.internationalOrganisation || "", onChange: (value) => {
103
+ pepContext.setState({ internationalOrganisation: value });
104
+ }, validators: [
105
+ new RequiredValidator(intl.formatMessage(intCompanyMessages.nameRequired)),
106
+ ] }),
107
+ React.createElement(TextInput, { label: intl.formatMessage(intCompanyMessages.roleHeader, {
108
+ entityType,
109
+ pepType: type,
110
+ relation: pepContext.state.type === PepType.COLLEAGUE
111
+ ? pepContext.state.businessRelation
112
+ : pepContext.state.relationToPEP,
113
+ name: pepContext.state.ownerName,
114
+ }), value: pepContext.state.internationalOrganisationRole || "", onChange: (value) => {
115
+ pepContext.setState({
116
+ internationalOrganisationRole: value,
117
+ });
118
+ }, validators: [
119
+ new RequiredValidator(intl.formatMessage(intCompanyMessages.roleRequired)),
120
+ ] }))) : null,
121
+ pepContext.state.role &&
122
+ pepContext.state.role === Role.MILITARY_OFFICER ? (React.createElement(Select, { label: intl.formatMessage(militaryMessages.header, {
107
123
  entityType,
108
124
  pepType: type,
109
125
  relation: pepContext.state.type === PepType.COLLEAGUE
110
126
  ? pepContext.state.businessRelation
111
127
  : pepContext.state.relationToPEP,
112
128
  name: pepContext.state.ownerName,
113
- }), value: pepContext.state.internationalOrganisationRole || "", onChange: (value) => {
129
+ possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
130
+ }), placeholder: intl.formatMessage(militaryMessages.placeholder), alternatives: militaryAlternatives, value: militaryAlternatives.find((alt) => alt.value === pepContext.state.militaryRank), onChange: (event) => {
114
131
  pepContext.setState({
115
- internationalOrganisationRole: value,
132
+ militaryRank: event.value,
116
133
  });
117
134
  }, validators: [
118
- new RequiredValidator(intl.formatMessage(intCompanyMessages.roleRequired)),
119
- ] }))) : null,
120
- pepContext.state.role &&
121
- pepContext.state.role === Role.MILITARY_OFFICER ? (React.createElement(Select, { label: intl.formatMessage(militaryMessages.header, {
122
- entityType,
123
- pepType: type,
124
- relation: pepContext.state.type === PepType.COLLEAGUE
125
- ? pepContext.state.businessRelation
126
- : pepContext.state.relationToPEP,
127
- name: pepContext.state.ownerName,
128
- possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
129
- }), placeholder: intl.formatMessage(militaryMessages.placeholder), alternatives: militaryAlternatives, value: militaryAlternatives.find((alt) => alt.value === pepContext.state.militaryRank), onChange: (event) => {
130
- pepContext.setState({ militaryRank: event.value });
131
- }, validators: [
132
- new RequiredValidator(intl.formatMessage(militaryMessages.required)),
133
- ] })) : null,
134
- React.createElement(PrimaryButton, { type: "submit" },
135
+ new RequiredValidator(intl.formatMessage(militaryMessages.required)),
136
+ ] })) : null),
137
+ React.createElement(PrimaryButton, { block: true, type: "submit" },
135
138
  React.createElement(FormattedMessage, { id: "pep.role.next", description: "Next button", defaultMessage: "G\u00E5 vidare" }))));
136
139
  };
137
140
  export function getRoleAlts(intl) {
package/lib/pages/StatusPage/StatusPage.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useRef, useCallback, useContext, } from "react";
2
- import { Form, RadioGroup, RequiredValidator, PrimaryButton, Datepicker, } from "@lysaab/ui-2";
2
+ import { Form, RadioGroup, RequiredValidator, PrimaryButton, Datepicker, Card, } from "@lysaab/ui-2";
3
3
  import { PepContext, PepStatus, EntityType, PepType } from "../PepContext";
4
4
  import { CountrySelect } from "../../components/CountrySelect";
5
5
  import { useIntl, FormattedMessage } from "react-intl";
@@ -33,40 +33,43 @@ export const StatusPage = ({ next }) => {
33
33
  React.createElement(Form, { lysaFormRef: formRef, onSubmit: () => {
34
34
  nextPage();
35
35
  } },
36
- React.createElement(RadioGroup, { alternatives: stateAlternatives, header: intl.formatMessage(isOngoingMessages.header, {
37
- entityType,
38
- name: pepContext.state.ownerName,
39
- possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
40
- relation: pepContext.state.type === PepType.COLLEAGUE
41
- ? pepContext.state.businessRelation
42
- : pepContext.state.relationToPEP,
43
- pepType: pepContext.state.type,
44
- }), onChange: updateIsOngoing, value: stateAlternatives.find((alt) => alt.value === pepContext.state.isOngoing), validators: [
45
- new RequiredValidator(intl.formatMessage(isOngoingMessages.required)),
46
- ] }),
47
- pepContext.state.isOngoing &&
48
- pepContext.state.isOngoing === PepStatus.ENDED ? (React.createElement(Datepicker, { label: intl.formatMessage(endedMessages.header), selected: pepContext.state.ended, onChange: (event) => pepContext.setState({ ended: event || undefined }), validators: [
49
- new RequiredValidator(intl.formatMessage(isOngoingMessages.required)),
50
- ], showMonthYearPicker: true, dateFormat: "yyyy-MM", maxDate: new Date() })) : null,
51
- React.createElement(RadioGroup, { alternatives: isSwedenAlternatives, header: intl.formatMessage(isLocalCountryMessages.header, {
52
- possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
53
- }), onChange: updateIsSweden, value: isSwedenAlternatives.find((alt) => alt.value === pepContext.state.isSweden), validators: [
54
- new RequiredValidator(intl.formatMessage(isLocalCountryMessages.required)),
55
- ] }),
56
- pepContext.state.isSweden && pepContext.state.isSweden === "other" ? (React.createElement(CountrySelect, { label: intl.formatMessage(countrySelectionMessages.header, {
57
- entityType,
58
- name: pepContext.state.ownerName,
59
- possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
60
- relation: pepContext.state.type === PepType.COLLEAGUE
61
- ? pepContext.state.businessRelation
62
- : pepContext.state.relationToPEP,
63
- pepType: pepContext.state.type,
64
- }), onChange: (event) => pepContext.setState({
65
- country: event.value ? event.value.toString() : undefined,
66
- }), validators: [
67
- new RequiredValidator(intl.formatMessage(countrySelectionMessages.required)),
68
- ], value: pepContext.state.country, omitCountries: ["SE"] })) : null,
69
- React.createElement(PrimaryButton, { type: "submit" },
36
+ React.createElement(Card, null,
37
+ React.createElement(RadioGroup, { alternatives: stateAlternatives, header: intl.formatMessage(isOngoingMessages.header, {
38
+ entityType,
39
+ name: pepContext.state.ownerName,
40
+ possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
41
+ relation: pepContext.state.type === PepType.COLLEAGUE
42
+ ? pepContext.state.businessRelation
43
+ : pepContext.state.relationToPEP,
44
+ pepType: pepContext.state.type,
45
+ }), onChange: updateIsOngoing, value: stateAlternatives.find((alt) => alt.value === pepContext.state.isOngoing), validators: [
46
+ new RequiredValidator(intl.formatMessage(isOngoingMessages.required)),
47
+ ] }),
48
+ pepContext.state.isOngoing &&
49
+ pepContext.state.isOngoing === PepStatus.ENDED ? (React.createElement(Datepicker, { label: intl.formatMessage(endedMessages.header), selected: pepContext.state.ended, onChange: (event) => pepContext.setState({ ended: event || undefined }), validators: [
50
+ new RequiredValidator(intl.formatMessage(isOngoingMessages.required)),
51
+ ], showMonthYearPicker: true, dateFormat: "yyyy-MM", maxDate: new Date() })) : null),
52
+ React.createElement(Card, null,
53
+ React.createElement(RadioGroup, { alternatives: isSwedenAlternatives, header: intl.formatMessage(isLocalCountryMessages.header, {
54
+ possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
55
+ }), onChange: updateIsSweden, value: isSwedenAlternatives.find((alt) => alt.value === pepContext.state.isSweden), validators: [
56
+ new RequiredValidator(intl.formatMessage(isLocalCountryMessages.required)),
57
+ ] }),
58
+ pepContext.state.isSweden &&
59
+ pepContext.state.isSweden === "other" ? (React.createElement(CountrySelect, { label: intl.formatMessage(countrySelectionMessages.header, {
60
+ entityType,
61
+ name: pepContext.state.ownerName,
62
+ possessiveName: formatPossessive(pepContext.state.ownerName, intl.locale),
63
+ relation: pepContext.state.type === PepType.COLLEAGUE
64
+ ? pepContext.state.businessRelation
65
+ : pepContext.state.relationToPEP,
66
+ pepType: pepContext.state.type,
67
+ }), onChange: (event) => pepContext.setState({
68
+ country: event.value ? event.value.toString() : undefined,
69
+ }), validators: [
70
+ new RequiredValidator(intl.formatMessage(countrySelectionMessages.required)),
71
+ ], value: pepContext.state.country, omitCountries: ["SE"] })) : null),
72
+ React.createElement(PrimaryButton, { block: true, type: "submit" },
70
73
  React.createElement(FormattedMessage, { id: "pep.status.next", description: "Next button", defaultMessage: "G\u00E5 vidare" })))));
71
74
  };
72
75
  function getIsLocalCountryAlternatives(intl) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lysaab/lysa-pep",
3
3
  "author": "Lysa AB",
4
- "version": "1.0.2-0",
4
+ "version": "1.0.4-0",
5
5
  "main": "./lib/Exports.js",
6
6
  "dependencies": {
7
7
  "@types/luxon": "^1.15.2",
@@ -10,7 +10,7 @@
10
10
  "react-intl": "^4.1.1"
11
11
  },
12
12
  "devDependencies": {
13
- "@lysaab/ui-2": "^18.0.0",
13
+ "@lysaab/ui-2": "^20.0.0",
14
14
  "@types/jest": "24.0.20",
15
15
  "@types/luxon": "^1.15.2",
16
16
  "@types/node": "12.11.7",
@@ -24,7 +24,7 @@
24
24
  "typescript": "^3.7.2"
25
25
  },
26
26
  "peerDependencies": {
27
- "@lysaab/ui-2": "^16.3.2"
27
+ "@lysaab/ui-2": "^20.0.0"
28
28
  },
29
29
  "scripts": {
30
30
  "start": "react-scripts start",
package/src/pages/IsPep/IsPepPage.tsx CHANGED
@@ -10,6 +10,7 @@ import {
10
10
  RequiredValidator,
11
11
  PrimaryButton,
12
12
  LysaFormRef,
13
+ Card,
13
14
  } from "@lysaab/ui-2";
14
15
  import { PepType, PepContext, EntityType } from "../PepContext";
15
16
  import { useIntl, FormattedMessage } from "react-intl";
@@ -77,6 +78,7 @@ export const IsPepRadioGroup: FunctionComponent<ExternalIsPepState> = ({
77
78
  validators={[
78
79
  new RequiredValidator(intl.formatMessage(messages.required)),
79
80
  ]}
81
+ data-test-id="pep-ispep"
80
82
  />
81
83
  );
82
84
  };
@@ -93,16 +95,18 @@ export const IsPepPage: FunctionComponent<Props> = ({ next }) => {
93
95
 
94
96
  return (
95
97
  <Form onSubmit={nextPage} lysaFormRef={formRef}>
96
- <IsPepRadioGroup
97
- entityType={pepContext.state.legalEntityType || EntityType.PERSON}
98
- ownerName={pepContext.state.ownerName || ""}
99
- type={pepContext.state.type}
100
- onChange={(type) => {
101
- pepContext.setState({ type });
102
- }}
103
- />
98
+ <Card>
99
+ <IsPepRadioGroup
100
+ entityType={pepContext.state.legalEntityType || EntityType.PERSON}
101
+ ownerName={pepContext.state.ownerName || ""}
102
+ type={pepContext.state.type}
103
+ onChange={(type) => {
104
+ pepContext.setState({ type });
105
+ }}
106
+ />
107
+ </Card>
104
108
 
105
- <PrimaryButton type="submit">
109
+ <PrimaryButton block type="submit">
106
110
  <FormattedMessage
107
111
  id="pep.ispep.next"
108
112
  description="Next button"
package/src/pages/RelationPage/RelationPage.tsx CHANGED
@@ -21,6 +21,7 @@ import {
21
21
  TextInput,
22
22
  Datepicker,
23
23
  PrimaryButton,
24
+ Card,
24
25
  } from "@lysaab/ui-2";
25
26
  import { DateTime } from "luxon";
26
27
  import { useIntl, IntlShape, FormattedMessage } from "react-intl";
@@ -64,135 +65,139 @@ export const RelationPage: FunctionComponent<Props> = ({ next }) => {
64
65
  }, [formRef, next]);
65
66
  return (
66
67
  <Form onSubmit={() => nextPage()} lysaFormRef={formRef}>
67
- {type === PepType.RELATIVE ? (
68
- <RadioGroup
69
- alternatives={relationAlternatives}
70
- onChange={(alternative) => {
71
- pepContext.setState({
72
- relationToPEP: alternative.value,
73
- });
74
- }}
75
- value={relationAlternatives.find(
76
- (alt) => alt.value === pepContext.state.relationToPEP
77
- )}
78
- header={intl.formatMessage(relationMessages.header, {
79
- entityType,
80
- name: pepContext.state.ownerName,
81
- possessiveName: formatPossessive(
82
- pepContext.state.ownerName,
83
- intl.locale
84
- ),
85
- })}
86
- validators={[
87
- new RequiredValidator(
88
- intl.formatMessage(relationMessages.required)
89
- ),
90
- ]}
91
- />
92
- ) : null}
93
- {type === PepType.COLLEAGUE ? (
94
- <RadioGroup
95
- alternatives={businessRelationAlternatives}
96
- onChange={(alternative) => {
97
- pepContext.setState({
98
- businessRelation: alternative.value,
99
- });
100
- }}
101
- value={businessRelationAlternatives.find(
102
- (alt) => alt.value === pepContext.state.businessRelation
103
- )}
104
- header={intl.formatMessage(businessRelationMessages.header, {
105
- entityType,
106
- name: pepContext.state.ownerName,
107
- })}
108
- validators={[
109
- new RequiredValidator(
110
- intl.formatMessage(businessRelationMessages.required)
111
- ),
112
- ]}
113
- />
114
- ) : null}
115
- {pepContext.state.relationToPEP && type === PepType.RELATIVE ? (
116
- <React.Fragment>
117
- <TextInput
118
- label={intl.formatMessage(relativeNameMessages.header, {
119
- entityType,
120
- name: pepContext.state.ownerName,
121
- relation:
122
- pepContext.state.type === PepType.COLLEAGUE
123
- ? pepContext.state.businessRelation
124
- : pepContext.state.relationToPEP,
125
- possessiveName: formatPossessive(
126
- pepContext.state.ownerName,
127
- intl.locale
128
- ),
129
- })}
130
- value={pepContext.state.nameOfPEP || ""}
131
- onChange={(value) => {
132
- pepContext.setState({ nameOfPEP: value });
68
+ <Card>
69
+ {type === PepType.RELATIVE ? (
70
+ <RadioGroup
71
+ alternatives={relationAlternatives}
72
+ onChange={(alternative) => {
73
+ pepContext.setState({
74
+ relationToPEP: alternative.value,
75
+ });
133
76
  }}
134
- validators={[
135
- new RequiredValidator(
136
- intl.formatMessage(relativeNameMessages.required)
137
- ),
138
- ]}
139
- />
140
- <Datepicker
141
- label={intl.formatMessage(birthdayMessages.header, {
77
+ value={relationAlternatives.find(
78
+ (alt) => alt.value === pepContext.state.relationToPEP
79
+ )}
80
+ header={intl.formatMessage(relationMessages.header, {
142
81
  entityType,
143
82
  name: pepContext.state.ownerName,
144
- relation:
145
- pepContext.state.type === PepType.COLLEAGUE
146
- ? pepContext.state.businessRelation
147
- : pepContext.state.relationToPEP,
148
83
  possessiveName: formatPossessive(
149
84
  pepContext.state.ownerName,
150
85
  intl.locale
151
86
  ),
152
87
  })}
153
- selected={pepContext.state.birthdayOfPEP}
154
- onChange={(event) =>
155
- pepContext.setState({ birthdayOfPEP: event || undefined })
156
- }
157
88
  validators={[
158
89
  new RequiredValidator(
159
- intl.formatMessage(birthdayMessages.required)
90
+ intl.formatMessage(relationMessages.required)
160
91
  ),
161
92
  ]}
162
- maxDate={new Date()}
163
- openToDate={pepContext.state.birthdayOfPEP || DATEPICKER_START_DATE}
164
93
  />
165
- </React.Fragment>
166
- ) : null}
167
-
168
- {pepContext.state.businessRelation && type === PepType.COLLEAGUE ? (
169
- <React.Fragment>
170
- <TextInput
171
- label={intl.formatMessage(colleagueNameMessages.header, {
94
+ ) : null}
95
+ {type === PepType.COLLEAGUE ? (
96
+ <RadioGroup
97
+ alternatives={businessRelationAlternatives}
98
+ onChange={(alternative) => {
99
+ pepContext.setState({
100
+ businessRelation: alternative.value,
101
+ });
102
+ }}
103
+ value={businessRelationAlternatives.find(
104
+ (alt) => alt.value === pepContext.state.businessRelation
105
+ )}
106
+ header={intl.formatMessage(businessRelationMessages.header, {
172
107
  entityType,
173
108
  name: pepContext.state.ownerName,
174
- relation:
175
- pepContext.state.type === PepType.COLLEAGUE
176
- ? pepContext.state.businessRelation
177
- : pepContext.state.relationToPEP,
178
- possessiveName: formatPossessive(
179
- pepContext.state.ownerName,
180
- intl.locale
181
- ),
182
109
  })}
183
- value={pepContext.state.nameOfPEP || ""}
184
- onChange={(value) => {
185
- pepContext.setState({ nameOfPEP: value });
186
- }}
187
110
  validators={[
188
111
  new RequiredValidator(
189
- intl.formatMessage(colleagueNameMessages.required)
112
+ intl.formatMessage(businessRelationMessages.required)
190
113
  ),
191
114
  ]}
192
115
  />
193
- </React.Fragment>
194
- ) : null}
195
- <PrimaryButton type="submit">
116
+ ) : null}
117
+ {pepContext.state.relationToPEP && type === PepType.RELATIVE ? (
118
+ <React.Fragment>
119
+ <TextInput
120
+ label={intl.formatMessage(relativeNameMessages.header, {
121
+ entityType,
122
+ name: pepContext.state.ownerName,
123
+ relation:
124
+ pepContext.state.type === PepType.COLLEAGUE
125
+ ? pepContext.state.businessRelation
126
+ : pepContext.state.relationToPEP,
127
+ possessiveName: formatPossessive(
128
+ pepContext.state.ownerName,
129
+ intl.locale
130
+ ),
131
+ })}
132
+ value={pepContext.state.nameOfPEP || ""}
133
+ onChange={(value) => {
134
+ pepContext.setState({ nameOfPEP: value });
135
+ }}
136
+ validators={[
137
+ new RequiredValidator(
138
+ intl.formatMessage(relativeNameMessages.required)
139
+ ),
140
+ ]}
141
+ />
142
+ <Datepicker
143
+ label={intl.formatMessage(birthdayMessages.header, {
144
+ entityType,
145
+ name: pepContext.state.ownerName,
146
+ relation:
147
+ pepContext.state.type === PepType.COLLEAGUE
148
+ ? pepContext.state.businessRelation
149
+ : pepContext.state.relationToPEP,
150
+ possessiveName: formatPossessive(
151
+ pepContext.state.ownerName,
152
+ intl.locale
153
+ ),
154
+ })}
155
+ selected={pepContext.state.birthdayOfPEP}
156
+ onChange={(event) =>
157
+ pepContext.setState({ birthdayOfPEP: event || undefined })
158
+ }
159
+ validators={[
160
+ new RequiredValidator(
161
+ intl.formatMessage(birthdayMessages.required)
162
+ ),
163
+ ]}
164
+ maxDate={new Date()}
165
+ openToDate={
166
+ pepContext.state.birthdayOfPEP || DATEPICKER_START_DATE
167
+ }
168
+ />
169
+ </React.Fragment>
170
+ ) : null}
171
+
172
+ {pepContext.state.businessRelation && type === PepType.COLLEAGUE ? (
173
+ <React.Fragment>
174
+ <TextInput
175
+ label={intl.formatMessage(colleagueNameMessages.header, {
176
+ entityType,
177
+ name: pepContext.state.ownerName,
178
+ relation:
179
+ pepContext.state.type === PepType.COLLEAGUE
180
+ ? pepContext.state.businessRelation
181
+ : pepContext.state.relationToPEP,
182
+ possessiveName: formatPossessive(
183
+ pepContext.state.ownerName,
184
+ intl.locale
185
+ ),
186
+ })}
187
+ value={pepContext.state.nameOfPEP || ""}
188
+ onChange={(value) => {
189
+ pepContext.setState({ nameOfPEP: value });
190
+ }}
191
+ validators={[
192
+ new RequiredValidator(
193
+ intl.formatMessage(colleagueNameMessages.required)
194
+ ),
195
+ ]}
196
+ />
197
+ </React.Fragment>
198
+ ) : null}
199
+ </Card>
200
+ <PrimaryButton block type="submit">
196
201
  <FormattedMessage
197
202
  id="pep.relation.next"
198
203
  description="Next button"
package/src/pages/RolePage/RolePage.tsx CHANGED
@@ -12,6 +12,7 @@ import {
12
12
  RequiredValidator,
13
13
  TextInput,
14
14
  Select,
15
+ Card,
15
16
  } from "@lysaab/ui-2";
16
17
  import {
17
18
  PepContext,
@@ -70,37 +71,9 @@ export const RolePage: FunctionComponent<Props> = ({ next }) => {
70
71
 
71
72
  return (
72
73
  <Form onSubmit={() => nextPage()} lysaFormRef={formRef}>
73
- <Select
74
- label={intl.formatMessage(roleMessages.header, {
75
- entityType,
76
- pepType: type,
77
- relation:
78
- pepContext.state.type === PepType.COLLEAGUE
79
- ? pepContext.state.businessRelation
80
- : pepContext.state.relationToPEP,
81
- name: pepContext.state.ownerName,
82
- possessiveName: formatPossessive(
83
- pepContext.state.ownerName,
84
- intl.locale
85
- ),
86
- })}
87
- placeholder={intl.formatMessage(roleMessages.placeholder)}
88
- alternatives={roleAlternatives}
89
- value={roleAlternatives.find(
90
- (alt) => alt.value === pepContext.state.role
91
- )}
92
- onChange={(event) => {
93
- pepContext.setState({ role: event.value as Role });
94
- resetRoleFields();
95
- }}
96
- validators={[
97
- new RequiredValidator(intl.formatMessage(roleMessages.required)),
98
- ]}
99
- />
100
-
101
- {pepContext.state.role && pepContext.state.role === Role.AMBASSADOR ? (
102
- <CountrySelect
103
- label={intl.formatMessage(ambassadorMessages.header, {
74
+ <Card>
75
+ <Select
76
+ label={intl.formatMessage(roleMessages.header, {
104
77
  entityType,
105
78
  pepType: type,
106
79
  relation:
@@ -108,28 +81,28 @@ export const RolePage: FunctionComponent<Props> = ({ next }) => {
108
81
  ? pepContext.state.businessRelation
109
82
  : pepContext.state.relationToPEP,
110
83
  name: pepContext.state.ownerName,
84
+ possessiveName: formatPossessive(
85
+ pepContext.state.ownerName,
86
+ intl.locale
87
+ ),
111
88
  })}
112
- onChange={(event) =>
113
- pepContext.setState({
114
- ambassadorCountry: event.value
115
- ? event.value.toString()
116
- : undefined,
117
- })
118
- }
119
- value={pepContext.state.ambassadorCountry}
89
+ placeholder={intl.formatMessage(roleMessages.placeholder)}
90
+ alternatives={roleAlternatives}
91
+ value={roleAlternatives.find(
92
+ (alt) => alt.value === pepContext.state.role
93
+ )}
94
+ onChange={(event) => {
95
+ pepContext.setState({ role: event.value as Role });
96
+ resetRoleFields();
97
+ }}
120
98
  validators={[
121
- new RequiredValidator(
122
- intl.formatMessage(ambassadorMessages.required)
123
- ),
99
+ new RequiredValidator(intl.formatMessage(roleMessages.required)),
124
100
  ]}
125
101
  />
126
- ) : null}
127
102
 
128
- {pepContext.state.role &&
129
- pepContext.state.role === Role.GOVERNMENT_COMPANY ? (
130
- <React.Fragment>
131
- <TextInput
132
- label={intl.formatMessage(governmentCompanyMessages.nameHeader, {
103
+ {pepContext.state.role && pepContext.state.role === Role.AMBASSADOR ? (
104
+ <CountrySelect
105
+ label={intl.formatMessage(ambassadorMessages.header, {
133
106
  entityType,
134
107
  pepType: type,
135
108
  relation:
@@ -138,47 +111,123 @@ export const RolePage: FunctionComponent<Props> = ({ next }) => {
138
111
  : pepContext.state.relationToPEP,
139
112
  name: pepContext.state.ownerName,
140
113
  })}
141
- value={pepContext.state.governmentCompany || ""}
142
- onChange={(value) => {
143
- pepContext.setState({ governmentCompany: value });
144
- }}
145
- validators={[
146
- new RequiredValidator(
147
- intl.formatMessage(governmentCompanyMessages.nameRequired)
148
- ),
149
- ]}
150
- />
151
- <TextInput
152
- label={intl.formatMessage(governmentCompanyMessages.roleHeader, {
153
- entityType,
154
- pepType: type,
155
- relation:
156
- pepContext.state.type === PepType.COLLEAGUE
157
- ? pepContext.state.businessRelation
158
- : pepContext.state.relationToPEP,
159
- name: pepContext.state.ownerName,
160
- })}
161
- value={pepContext.state.governmentCompanyRole || ""}
162
- onChange={(value) => {
114
+ onChange={(event) =>
163
115
  pepContext.setState({
164
- governmentCompanyRole: value,
165
- });
166
- }}
116
+ ambassadorCountry: event.value
117
+ ? event.value.toString()
118
+ : undefined,
119
+ })
120
+ }
121
+ value={pepContext.state.ambassadorCountry}
167
122
  validators={[
168
123
  new RequiredValidator(
169
- intl.formatMessage(governmentCompanyMessages.roleRequired)
124
+ intl.formatMessage(ambassadorMessages.required)
170
125
  ),
171
126
  ]}
172
127
  />
173
- </React.Fragment>
174
- ) : null}
128
+ ) : null}
129
+
130
+ {pepContext.state.role &&
131
+ pepContext.state.role === Role.GOVERNMENT_COMPANY ? (
132
+ <React.Fragment>
133
+ <TextInput
134
+ label={intl.formatMessage(governmentCompanyMessages.nameHeader, {
135
+ entityType,
136
+ pepType: type,
137
+ relation:
138
+ pepContext.state.type === PepType.COLLEAGUE
139
+ ? pepContext.state.businessRelation
140
+ : pepContext.state.relationToPEP,
141
+ name: pepContext.state.ownerName,
142
+ })}
143
+ value={pepContext.state.governmentCompany || ""}
144
+ onChange={(value) => {
145
+ pepContext.setState({ governmentCompany: value });
146
+ }}
147
+ validators={[
148
+ new RequiredValidator(
149
+ intl.formatMessage(governmentCompanyMessages.nameRequired)
150
+ ),
151
+ ]}
152
+ />
153
+ <TextInput
154
+ label={intl.formatMessage(governmentCompanyMessages.roleHeader, {
155
+ entityType,
156
+ pepType: type,
157
+ relation:
158
+ pepContext.state.type === PepType.COLLEAGUE
159
+ ? pepContext.state.businessRelation
160
+ : pepContext.state.relationToPEP,
161
+ name: pepContext.state.ownerName,
162
+ })}
163
+ value={pepContext.state.governmentCompanyRole || ""}
164
+ onChange={(value) => {
165
+ pepContext.setState({
166
+ governmentCompanyRole: value,
167
+ });
168
+ }}
169
+ validators={[
170
+ new RequiredValidator(
171
+ intl.formatMessage(governmentCompanyMessages.roleRequired)
172
+ ),
173
+ ]}
174
+ />
175
+ </React.Fragment>
176
+ ) : null}
177
+
178
+ {pepContext.state.role &&
179
+ pepContext.state.role ===
180
+ Role.HIGH_RANKING_POSITION_INTERNALTIONAL_CORP ? (
181
+ <React.Fragment>
182
+ <TextInput
183
+ label={intl.formatMessage(intCompanyMessages.nameHeader, {
184
+ entityType,
185
+ pepType: type,
186
+ relation:
187
+ pepContext.state.type === PepType.COLLEAGUE
188
+ ? pepContext.state.businessRelation
189
+ : pepContext.state.relationToPEP,
190
+ name: pepContext.state.ownerName,
191
+ })}
192
+ value={pepContext.state.internationalOrganisation || ""}
193
+ onChange={(value) => {
194
+ pepContext.setState({ internationalOrganisation: value });
195
+ }}
196
+ validators={[
197
+ new RequiredValidator(
198
+ intl.formatMessage(intCompanyMessages.nameRequired)
199
+ ),
200
+ ]}
201
+ />
202
+ <TextInput
203
+ label={intl.formatMessage(intCompanyMessages.roleHeader, {
204
+ entityType,
205
+ pepType: type,
206
+ relation:
207
+ pepContext.state.type === PepType.COLLEAGUE
208
+ ? pepContext.state.businessRelation
209
+ : pepContext.state.relationToPEP,
210
+ name: pepContext.state.ownerName,
211
+ })}
212
+ value={pepContext.state.internationalOrganisationRole || ""}
213
+ onChange={(value) => {
214
+ pepContext.setState({
215
+ internationalOrganisationRole: value,
216
+ });
217
+ }}
218
+ validators={[
219
+ new RequiredValidator(
220
+ intl.formatMessage(intCompanyMessages.roleRequired)
221
+ ),
222
+ ]}
223
+ />
224
+ </React.Fragment>
225
+ ) : null}
175
226
 
176
- {pepContext.state.role &&
177
- pepContext.state.role ===
178
- Role.HIGH_RANKING_POSITION_INTERNALTIONAL_CORP ? (
179
- <React.Fragment>
180
- <TextInput
181
- label={intl.formatMessage(intCompanyMessages.nameHeader, {
227
+ {pepContext.state.role &&
228
+ pepContext.state.role === Role.MILITARY_OFFICER ? (
229
+ <Select
230
+ label={intl.formatMessage(militaryMessages.header, {
182
231
  entityType,
183
232
  pepType: type,
184
233
  relation:
@@ -186,75 +235,31 @@ export const RolePage: FunctionComponent<Props> = ({ next }) => {
186
235
  ? pepContext.state.businessRelation
187
236
  : pepContext.state.relationToPEP,
188
237
  name: pepContext.state.ownerName,
189
- })}
190
- value={pepContext.state.internationalOrganisation || ""}
191
- onChange={(value) => {
192
- pepContext.setState({ internationalOrganisation: value });
193
- }}
194
- validators={[
195
- new RequiredValidator(
196
- intl.formatMessage(intCompanyMessages.nameRequired)
238
+ possessiveName: formatPossessive(
239
+ pepContext.state.ownerName,
240
+ intl.locale
197
241
  ),
198
- ]}
199
- />
200
- <TextInput
201
- label={intl.formatMessage(intCompanyMessages.roleHeader, {
202
- entityType,
203
- pepType: type,
204
- relation:
205
- pepContext.state.type === PepType.COLLEAGUE
206
- ? pepContext.state.businessRelation
207
- : pepContext.state.relationToPEP,
208
- name: pepContext.state.ownerName,
209
242
  })}
210
- value={pepContext.state.internationalOrganisationRole || ""}
211
- onChange={(value) => {
243
+ placeholder={intl.formatMessage(militaryMessages.placeholder)}
244
+ alternatives={militaryAlternatives}
245
+ value={militaryAlternatives.find(
246
+ (alt) => alt.value === pepContext.state.militaryRank
247
+ )}
248
+ onChange={(event) => {
212
249
  pepContext.setState({
213
- internationalOrganisationRole: value,
250
+ militaryRank: event.value as MilitaryRank,
214
251
  });
215
252
  }}
216
253
  validators={[
217
254
  new RequiredValidator(
218
- intl.formatMessage(intCompanyMessages.roleRequired)
255
+ intl.formatMessage(militaryMessages.required)
219
256
  ),
220
257
  ]}
221
258
  />
222
- </React.Fragment>
223
- ) : null}
224
-
225
- {pepContext.state.role &&
226
- pepContext.state.role === Role.MILITARY_OFFICER ? (
227
- <Select
228
- label={intl.formatMessage(militaryMessages.header, {
229
- entityType,
230
- pepType: type,
231
- relation:
232
- pepContext.state.type === PepType.COLLEAGUE
233
- ? pepContext.state.businessRelation
234
- : pepContext.state.relationToPEP,
235
- name: pepContext.state.ownerName,
236
- possessiveName: formatPossessive(
237
- pepContext.state.ownerName,
238
- intl.locale
239
- ),
240
- })}
241
- placeholder={intl.formatMessage(militaryMessages.placeholder)}
242
- alternatives={militaryAlternatives}
243
- value={militaryAlternatives.find(
244
- (alt) => alt.value === pepContext.state.militaryRank
245
- )}
246
- onChange={(event) => {
247
- pepContext.setState({ militaryRank: event.value as MilitaryRank });
248
- }}
249
- validators={[
250
- new RequiredValidator(
251
- intl.formatMessage(militaryMessages.required)
252
- ),
253
- ]}
254
- />
255
- ) : null}
259
+ ) : null}
260
+ </Card>
256
261
 
257
- <PrimaryButton type="submit">
262
+ <PrimaryButton block type="submit">
258
263
  <FormattedMessage
259
264
  id="pep.role.next"
260
265
  description="Next button"
package/src/pages/StatusPage/StatusPage.tsx CHANGED
@@ -11,6 +11,7 @@ import {
11
11
  PrimaryButton,
12
12
  LysaFormRef,
13
13
  Datepicker,
14
+ Card,
14
15
  } from "@lysaab/ui-2";
15
16
  import { Alternative } from "@lysaab/ui-2/components/input/InputAPI";
16
17
  import { PepContext, PepStatus, EntityType, PepType } from "../PepContext";
@@ -74,101 +75,106 @@ export const StatusPage: FunctionComponent<Props> = ({ next }) => {
74
75
  nextPage();
75
76
  }}
76
77
  >
77
- <RadioGroup
78
- alternatives={stateAlternatives}
79
- header={intl.formatMessage(isOngoingMessages.header, {
80
- entityType,
81
- name: pepContext.state.ownerName,
82
- possessiveName: formatPossessive(
83
- pepContext.state.ownerName,
84
- intl.locale
85
- ),
86
- relation:
87
- pepContext.state.type === PepType.COLLEAGUE
88
- ? pepContext.state.businessRelation
89
- : pepContext.state.relationToPEP,
90
- pepType: pepContext.state.type,
91
- })}
92
- onChange={updateIsOngoing}
93
- value={stateAlternatives.find(
94
- (alt) => alt.value === pepContext.state.isOngoing
95
- )}
96
- validators={[
97
- new RequiredValidator(
98
- intl.formatMessage(isOngoingMessages.required)
99
- ),
100
- ]}
101
- />
102
-
103
- {pepContext.state.isOngoing &&
104
- pepContext.state.isOngoing === PepStatus.ENDED ? (
105
- <Datepicker
106
- label={intl.formatMessage(endedMessages.header)}
107
- selected={pepContext.state.ended}
108
- onChange={(event) =>
109
- pepContext.setState({ ended: event || undefined })
110
- }
78
+ <Card>
79
+ <RadioGroup
80
+ alternatives={stateAlternatives}
81
+ header={intl.formatMessage(isOngoingMessages.header, {
82
+ entityType,
83
+ name: pepContext.state.ownerName,
84
+ possessiveName: formatPossessive(
85
+ pepContext.state.ownerName,
86
+ intl.locale
87
+ ),
88
+ relation:
89
+ pepContext.state.type === PepType.COLLEAGUE
90
+ ? pepContext.state.businessRelation
91
+ : pepContext.state.relationToPEP,
92
+ pepType: pepContext.state.type,
93
+ })}
94
+ onChange={updateIsOngoing}
95
+ value={stateAlternatives.find(
96
+ (alt) => alt.value === pepContext.state.isOngoing
97
+ )}
111
98
  validators={[
112
99
  new RequiredValidator(
113
100
  intl.formatMessage(isOngoingMessages.required)
114
101
  ),
115
102
  ]}
116
- showMonthYearPicker
117
- dateFormat="yyyy-MM"
118
- maxDate={new Date()}
119
103
  />
120
- ) : null}
121
104
 
122
- <RadioGroup
123
- alternatives={isSwedenAlternatives}
124
- header={intl.formatMessage(isLocalCountryMessages.header, {
125
- possessiveName: formatPossessive(
126
- pepContext.state.ownerName,
127
- intl.locale
128
- ),
129
- })}
130
- onChange={updateIsSweden}
131
- value={isSwedenAlternatives.find(
132
- (alt) => alt.value === pepContext.state.isSweden
133
- )}
134
- validators={[
135
- new RequiredValidator(
136
- intl.formatMessage(isLocalCountryMessages.required)
137
- ),
138
- ]}
139
- />
105
+ {pepContext.state.isOngoing &&
106
+ pepContext.state.isOngoing === PepStatus.ENDED ? (
107
+ <Datepicker
108
+ label={intl.formatMessage(endedMessages.header)}
109
+ selected={pepContext.state.ended}
110
+ onChange={(event) =>
111
+ pepContext.setState({ ended: event || undefined })
112
+ }
113
+ validators={[
114
+ new RequiredValidator(
115
+ intl.formatMessage(isOngoingMessages.required)
116
+ ),
117
+ ]}
118
+ showMonthYearPicker
119
+ dateFormat="yyyy-MM"
120
+ maxDate={new Date()}
121
+ />
122
+ ) : null}
123
+ </Card>
140
124
 
141
- {pepContext.state.isSweden && pepContext.state.isSweden === "other" ? (
142
- <CountrySelect
143
- label={intl.formatMessage(countrySelectionMessages.header, {
144
- entityType,
145
- name: pepContext.state.ownerName,
125
+ <Card>
126
+ <RadioGroup
127
+ alternatives={isSwedenAlternatives}
128
+ header={intl.formatMessage(isLocalCountryMessages.header, {
146
129
  possessiveName: formatPossessive(
147
130
  pepContext.state.ownerName,
148
131
  intl.locale
149
132
  ),
150
- relation:
151
- pepContext.state.type === PepType.COLLEAGUE
152
- ? pepContext.state.businessRelation
153
- : pepContext.state.relationToPEP,
154
- pepType: pepContext.state.type,
155
133
  })}
156
- onChange={(event) =>
157
- pepContext.setState({
158
- country: event.value ? event.value.toString() : undefined,
159
- })
160
- }
134
+ onChange={updateIsSweden}
135
+ value={isSwedenAlternatives.find(
136
+ (alt) => alt.value === pepContext.state.isSweden
137
+ )}
161
138
  validators={[
162
139
  new RequiredValidator(
163
- intl.formatMessage(countrySelectionMessages.required)
140
+ intl.formatMessage(isLocalCountryMessages.required)
164
141
  ),
165
142
  ]}
166
- value={pepContext.state.country}
167
- omitCountries={["SE"]}
168
143
  />
169
- ) : null}
170
144
 
171
- <PrimaryButton type="submit">
145
+ {pepContext.state.isSweden &&
146
+ pepContext.state.isSweden === "other" ? (
147
+ <CountrySelect
148
+ label={intl.formatMessage(countrySelectionMessages.header, {
149
+ entityType,
150
+ name: pepContext.state.ownerName,
151
+ possessiveName: formatPossessive(
152
+ pepContext.state.ownerName,
153
+ intl.locale
154
+ ),
155
+ relation:
156
+ pepContext.state.type === PepType.COLLEAGUE
157
+ ? pepContext.state.businessRelation
158
+ : pepContext.state.relationToPEP,
159
+ pepType: pepContext.state.type,
160
+ })}
161
+ onChange={(event) =>
162
+ pepContext.setState({
163
+ country: event.value ? event.value.toString() : undefined,
164
+ })
165
+ }
166
+ validators={[
167
+ new RequiredValidator(
168
+ intl.formatMessage(countrySelectionMessages.required)
169
+ ),
170
+ ]}
171
+ value={pepContext.state.country}
172
+ omitCountries={["SE"]}
173
+ />
174
+ ) : null}
175
+ </Card>
176
+
177
+ <PrimaryButton block type="submit">
172
178
  <FormattedMessage
173
179
  id="pep.status.next"
174
180
  description="Next button"