@opexa/portal-components 0.0.541 → 0.0.543
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.
|
@@ -1,7 +1,21 @@
|
|
|
1
|
-
|
|
1
|
+
interface BranchCode<T extends string = string> {
|
|
2
|
+
code: T;
|
|
3
|
+
name: string;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
}
|
|
6
|
+
interface BaseAccountInfoProps {
|
|
2
7
|
className?: string;
|
|
3
8
|
googleSso?: boolean;
|
|
4
9
|
facebookSso?: boolean;
|
|
5
|
-
shouldShowBranchCode?: boolean;
|
|
6
10
|
}
|
|
11
|
+
interface WithoutBranchCode extends BaseAccountInfoProps {
|
|
12
|
+
shouldShowBranchCode?: false;
|
|
13
|
+
branchCodes?: undefined;
|
|
14
|
+
}
|
|
15
|
+
interface WithBranchCode extends BaseAccountInfoProps {
|
|
16
|
+
shouldShowBranchCode: true;
|
|
17
|
+
branchCodes: BranchCode[];
|
|
18
|
+
}
|
|
19
|
+
export type AccountInfoProps = WithoutBranchCode | WithBranchCode;
|
|
7
20
|
export declare function AccountInfo(props: AccountInfoProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export {};
|
|
@@ -41,7 +41,7 @@ const accountSchema = z.object({
|
|
|
41
41
|
.regex(/^[a-zA-Z0-9]+$/, 'Username can only contain letters and numbers'),
|
|
42
42
|
});
|
|
43
43
|
export function AccountInfo(props) {
|
|
44
|
-
return (_jsxs("div", { className: twMerge('space-y-3xl', props.className), children: [_jsx(ProfileInfo, {}), _jsx(ContactInfo, {}), _jsx(PersonalInfo, { shouldShowBranchCode: props.shouldShowBranchCode }), _jsx(SSO, { google: props.googleSso, facebook: props.facebookSso })] }));
|
|
44
|
+
return (_jsxs("div", { className: twMerge('space-y-3xl', props.className), children: [_jsx(ProfileInfo, {}), _jsx(ContactInfo, {}), _jsx(PersonalInfo, { shouldShowBranchCode: props.shouldShowBranchCode, branchCodes: props.branchCodes }), _jsx(SSO, { google: props.googleSso, facebook: props.facebookSso })] }));
|
|
45
45
|
}
|
|
46
46
|
function ProfileInfo() {
|
|
47
47
|
const [edit, setEdit] = useState(false);
|
|
@@ -84,7 +84,7 @@ function ProfileInfo() {
|
|
|
84
84
|
form.reset();
|
|
85
85
|
}, children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || isPending, children: "Save Changes" })] })] })) : (_jsxs("div", { className: "mt-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "font-semibold text-lg text-text-secondary-700 leading-tight", children: account?.name }), _jsx("button", { type: "button", onClick: () => setEdit(true), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "#cecfd2", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M11 4H6.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C2 6.28 2 7.12 2 8.8v8.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C4.28 22 5.12 22 6.8 22h8.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C20 19.72 20 18.88 20 17.2V13M8 16h1.675c.489 0 .733 0 .963-.055.204-.05.4-.13.579-.24.201-.123.374-.296.72-.642L21.5 5.5a2.121 2.121 0 0 0-3-3l-9.563 9.563c-.346.346-.519.519-.642.72a2 2 0 0 0-.24.579c-.055.23-.055.474-.055.963z" }) }) })] }), _jsx("p", { className: "text-text-tertiary-600 leading-tight", children: account?.id })] }))] }) }) })] }));
|
|
86
86
|
}
|
|
87
|
-
function PersonalInfo(
|
|
87
|
+
function PersonalInfo(props) {
|
|
88
88
|
const accountQuery = useAccountQuery();
|
|
89
89
|
const account = accountQuery.data;
|
|
90
90
|
const updateAccountMutation = useUpdateAccountMutation({
|
|
@@ -136,6 +136,8 @@ function PersonalInfo({ shouldShowBranchCode, }) {
|
|
|
136
136
|
});
|
|
137
137
|
}
|
|
138
138
|
}, [account, form]);
|
|
139
|
+
const branchName = props.branchCodes?.find((branch) => branch.code === account?.branchCode);
|
|
140
|
+
const displayBranchName = `${branchName?.code} - ${branchName?.name}`;
|
|
139
141
|
return (_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Personal Data" }), _jsxs("form", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt shadow-xs", onSubmit: form.handleSubmit((data) => {
|
|
140
142
|
updateAccountMutation.mutate({
|
|
141
143
|
realName: data.realName && account?.realName !== data.realName
|
|
@@ -145,7 +147,7 @@ function PersonalInfo({ shouldShowBranchCode, }) {
|
|
|
145
147
|
? data.birthDay
|
|
146
148
|
: undefined,
|
|
147
149
|
});
|
|
148
|
-
}), children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!account?.realName, children: [_jsx(Field.Label, { children: "Full name" }), _jsx(Field.Input, { ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] }), shouldShowBranchCode && (_jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Branch Code" }), _jsx(Field.Input, { type: "text", disabled: true, value: account?.branchCode ?? '' })] }))] }), form.formState.isDirty && (_jsxs("div", { className: "flex justify-end gap-lg border-border-secondary border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
|
|
150
|
+
}), children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!account?.realName, children: [_jsx(Field.Label, { children: "Full name" }), _jsx(Field.Input, { ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] }), props.shouldShowBranchCode && (_jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Branch Code" }), _jsx(Field.Input, { type: "text", disabled: true, value: displayBranchName ?? account?.branchCode ?? '' })] }))] }), form.formState.isDirty && (_jsxs("div", { className: "flex justify-end gap-lg border-border-secondary border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
|
|
149
151
|
}
|
|
150
152
|
function ContactInfo() {
|
|
151
153
|
const localeInfo = useLocaleInfo();
|