Skip to content

Commit 7e9708f

Browse files
pull[bot]pull[bot]
authored
Merge pull request #183 from KelvinTegelaar/dev
[pull] dev from KelvinTegelaar:dev
2 parents 0c895ae + d857172 commit 7e9708f

File tree

4 files changed

+163
-126
lines changed

4 files changed

+163
-126
lines changed

‎src/components/CippWizard/CippAddTenantConfirmation.jsx‎

Lines changed: 31 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,38 @@
11
import { useState, useEffect } from "react";
22
import { Grid, Typography, CircularProgress } from "@mui/material";
33
import { CippWizardStepButtons } from "./CippWizardStepButtons";
4+
import { Stack } from "@mui/system";
5+
import { CippPropertyListCard } from "../CippCards/CippPropertyListCard";
6+
import { getCippTranslation } from "../../utils/get-cipp-translation";
47

5-
export const CippAddTenantConfirmation = ({ formData, onSubmit, onBack }) => {
6-
const [domainStatus, setDomainStatus] = useState(null);
7-
const [addressStatus, setAddressStatus] = useState(null);
8-
const [loading, setLoading] = useState(true);
9-
10-
useEffect(() => {
11-
const checkDomainAvailability = async () => {
12-
try {
13-
const response = await fetch("/api/AddTenant", {
14-
method: "POST",
15-
headers: { "Content-Type": "application/json" },
16-
body: JSON.stringify({ Action: "ValidateDomain", TenantName: formData.Domain }),
17-
});
18-
const result = await response.json();
19-
setDomainStatus(result.Status === "Success" ? "Available" : "Unavailable");
20-
} catch {
21-
setDomainStatus("Error");
22-
}
23-
};
24-
25-
const validateAddress = async () => {
26-
try {
27-
const response = await fetch("/api/AddTenant", {
28-
method: "POST",
29-
headers: { "Content-Type": "application/json" },
30-
body: JSON.stringify({
31-
Action: "ValidateAddress",
32-
AddressLine1: formData.AddressLine1,
33-
AddressLine2: formData.AddressLine2,
34-
City: formData.City,
35-
State: formData.State,
36-
PostalCode: formData.PostalCode,
37-
Country: formData.Country,
38-
}),
39-
});
40-
const result = await response.json();
41-
setAddressStatus(result.Status === "Success" ? "Valid" : "Invalid");
42-
} catch {
43-
setAddressStatus("Error");
44-
}
45-
};
46-
47-
const performChecks = async () => {
48-
setLoading(true);
49-
await Promise.all([checkDomainAvailability(), validateAddress()]);
50-
setLoading(false);
51-
};
52-
53-
performChecks();
54-
}, [formData]);
55-
56-
const isReadyToSubmit = domainStatus === "Available" && addressStatus === "Valid";
57-
8+
export const CippAddTenantConfirmation = ({
9+
postUrl,
10+
formControl,
11+
onSubmit,
12+
onPreviousStep,
13+
currentStep,
14+
}) => {
15+
const values = formControl.getValues();
16+
console.log("values", values);
5817
return (
59-
<Grid container spacing={3}>
60-
<Grid item xs={12}>
61-
<Typography variant="h6">Confirmation</Typography>
62-
<Typography>
63-
Please review the results of the domain availability and address validation before submitting.
64-
</Typography>
65-
</Grid>
66-
<Grid item xs={12}>
67-
<Typography>Domain Status: {loading ? <CircularProgress size={20} /> : domainStatus}</Typography>
68-
</Grid>
69-
<Grid item xs={12}>
70-
<Typography>Address Status: {loading ? <CircularProgress size={20} /> : addressStatus}</Typography>
71-
</Grid>
72-
<Grid item xs={12}>
73-
<CippWizardStepButtons onNext={onSubmit} onBack={onBack} nextDisabled={!isReadyToSubmit || loading} />
74-
</Grid>
75-
</Grid>
18+
<Stack spacing={2}>
19+
<Typography variant="h6">Confirmation</Typography>
20+
<CippPropertyListCard
21+
title="Tenant Information"
22+
variant="outlined"
23+
layout="dual"
24+
showDivider={false}
25+
propertyItems={Object.keys(values)?.map((item) => {
26+
return { label: getCippTranslation(item), value: values[item] };
27+
})}
28+
/>
29+
<CippWizardStepButtons
30+
postUrl={postUrl}
31+
formControl={formControl}
32+
currentStep={currentStep}
33+
onPreviousStep={onPreviousStep}
34+
onNextStep={onSubmit}
35+
/>
36+
</Stack>
7637
);
7738
};

‎src/components/CippWizard/CippAddTenantForm.jsx‎

Lines changed: 131 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,86 @@
1-
import { InputAdornment } from "@mui/material";
2-
import { Grid } from "@mui/system";
1+
import { CircularProgress, Divider, InputAdornment, Typography } from "@mui/material";
2+
import { Box, Grid, Stack } from "@mui/system";
33
import CippFormComponent from "../CippComponents/CippFormComponent";
44
import { CippWizardStepButtons } from "./CippWizardStepButtons";
5+
import { ApiGetCall } from "../../api/ApiCall";
6+
import { useWatch } from "react-hook-form";
7+
import debounce from "lodash/debounce";
8+
import React, { useState, useEffect } from "react";
59

610
export const CippAddTenantForm = (props) => {
7-
const { formControl, onPreviousStep, onNextStep, currentStep } = props;
11+
const { formControl, currentStep, onPreviousStep, onNextStep } = props;
12+
13+
const tenantDomain = useWatch({ control: formControl.control, name: "TenantName" });
14+
const [debouncedTenantDomain, setDebouncedTenantDomain] = useState("");
15+
16+
const updateTenantDomain = debounce((value) => {
17+
setDebouncedTenantDomain(value);
18+
}, 500);
19+
20+
useEffect(() => {
21+
updateTenantDomain(tenantDomain);
22+
return () => updateTenantDomain.cancel();
23+
}, [tenantDomain]);
24+
25+
const checkDomain = ApiGetCall({
26+
url: "/api/AddTenant",
27+
data: { action: "ValidateDomain", TenantName: debouncedTenantDomain },
28+
queryKey: `ValidateDomain-${debouncedTenantDomain}`,
29+
waiting: debouncedTenantDomain !== "" && debouncedTenantDomain !== undefined,
30+
});
31+
32+
useEffect(() => {
33+
validateDomain();
34+
}, [checkDomain.data]);
35+
36+
const validateDomain = () => {
37+
if (!tenantDomain) {
38+
// set error state on TenantName form field
39+
formControl.setError("TenantName", { type: "required", message: "Tenant Name is required" });
40+
}
41+
if (checkDomain.isSuccess) {
42+
if (checkDomain.data.Success === true) {
43+
// clear error
44+
formControl.clearErrors("TenantName");
45+
} else {
46+
// set error state on TenantName form field
47+
formControl.setError("TenantName", { type: "validate", message: checkDomain.data.Message });
48+
}
49+
}
50+
if (checkDomain.isError) {
51+
formControl.setError("TenantName", { type: "error", message: "An error occurred" });
52+
}
53+
};
854

955
const fields = [
56+
{
57+
type: "header",
58+
label: "Company Information",
59+
},
1060
{
1161
name: "TenantName",
1262
label: "Tenant Name",
1363
placeholder: "Enter the desired subdomain for the onmicrosoft.com domain",
1464
type: "textField",
1565
required: true,
1666
InputProps: {
17-
endAdornment: <InputAdornment position="end">.onmicrosoft.com</InputAdornment>,
67+
endAdornment: (
68+
<InputAdornment position="end">
69+
.onmicrosoft.com{" "}
70+
{checkDomain.isFetching ? (
71+
<CircularProgress size={20} sx={{ ml: 2 }} />
72+
) : (
73+
<>
74+
{checkDomain.isSuccess && checkDomain.data.Success && (
75+
<Box sx={{ color: "green", ml: 1 }}>✔</Box>
76+
)}
77+
{checkDomain.isSuccess && !checkDomain.data.Success && (
78+
<Box sx={{ color: "red", ml: 1 }}>✘</Box>
79+
)}
80+
</>
81+
)}
82+
</InputAdornment>
83+
),
1884
},
1985
gridSize: 12,
2086
},
@@ -27,32 +93,39 @@ export const CippAddTenantForm = (props) => {
2793
placeholder: "Enter the registered company/organization name",
2894
},
2995
{
30-
name: "FirstName",
31-
label: "First Name",
96+
name: "AddressLine1",
97+
label: "Address Line 1",
3298
type: "textField",
3399
required: true,
34-
placeholder: "Enter the first name of the contact person",
100+
placeholder: "Enter the primary address line",
35101
},
36102
{
37-
name: "LastName",
38-
label: "Last Name",
103+
name: "AddressLine2",
104+
label: "Address Line 2",
105+
type: "textField",
106+
required: false,
107+
placeholder: "Enter the secondary address line (optional)",
108+
},
109+
{
110+
name: "City",
111+
label: "City",
39112
type: "textField",
40113
required: true,
41-
placeholder: "Enter the last name of the contact person",
114+
placeholder: "Enter the city",
42115
},
43116
{
44-
name: "Email",
45-
label: "Email",
46-
type: "email",
117+
name: "State",
118+
label: "State",
119+
type: "textField",
47120
required: true,
48-
placeholder: "Enter the customer's email address",
121+
placeholder: "Enter the state or region",
49122
},
50123
{
51-
name: "PhoneNumber",
52-
label: "Phone Number",
124+
name: "PostalCode",
125+
label: "Postal Code",
53126
type: "textField",
54127
required: true,
55-
placeholder: "Enter the contact phone number",
128+
placeholder: "Enter the postal code",
56129
},
57130
{
58131
name: "Country",
@@ -62,61 +135,66 @@ export const CippAddTenantForm = (props) => {
62135
placeholder: "Enter the country (e.g., US)",
63136
},
64137
{
65-
name: "City",
66-
label: "City",
67-
type: "textField",
68-
required: true,
69-
placeholder: "Enter the city",
138+
type: "header",
139+
label: "Contact Information",
70140
},
71141
{
72-
name: "State",
73-
label: "State",
142+
name: "FirstName",
143+
label: "First Name",
74144
type: "textField",
75145
required: true,
76-
placeholder: "Enter the state or region",
146+
placeholder: "Enter the first name of the contact person",
77147
},
78148
{
79-
name: "AddressLine1",
80-
label: "Address Line 1",
149+
name: "LastName",
150+
label: "Last Name",
81151
type: "textField",
82152
required: true,
83-
placeholder: "Enter the primary address line",
153+
placeholder: "Enter the last name of the contact person",
84154
},
85155
{
86-
name: "AddressLine2",
87-
label: "Address Line 2",
156+
name: "Email",
157+
label: "Email",
88158
type: "textField",
89-
required: false,
90-
placeholder: "Enter the secondary address line (optional)",
159+
required: true,
160+
placeholder: "Enter the customer's email address",
91161
},
92162
{
93-
name: "PostalCode",
94-
label: "Postal Code",
163+
name: "PhoneNumber",
164+
label: "Phone Number",
95165
type: "textField",
96166
required: true,
97-
placeholder: "Enter the postal code",
167+
placeholder: "Enter the contact phone number",
98168
},
99169
];
100170

101171
return (
102-
<Grid container spacing={3}>
103-
{fields.map((field, index) => (
104-
<Grid size={field?.gridSize ?? { xs: 12, md: 6 }} key={index}>
105-
<CippFormComponent
106-
{...field}
107-
formControl={formControl}
108-
/>
109-
</Grid>
110-
))}
111-
<Grid item xs={12}>
112-
<CippWizardStepButtons
113-
currentStep={currentStep}
114-
onPreviousStep={onPreviousStep}
115-
onNextStep={onNextStep}
116-
formControl={formControl}
117-
noSubmitButton={true}
118-
/>
172+
<Stack spacing={2}>
173+
<Grid container spacing={2}>
174+
{fields.map((field, index) => (
175+
<React.Fragment key={index}>
176+
{field.type === "header" ? (
177+
<>
178+
<Grid item size={12}>
179+
<Typography variant="h5">{field.label}</Typography>
180+
<Divider sx={{ mt: 1 }} />
181+
</Grid>
182+
</>
183+
) : (
184+
<Grid item size={field?.gridSize ?? { xs: 12, md: 6 }}>
185+
<CippFormComponent {...field} formControl={formControl} />
186+
</Grid>
187+
)}
188+
</React.Fragment>
189+
))}
119190
</Grid>
120-
</Grid>
191+
<CippWizardStepButtons
192+
postUrl="/api/AddTenant"
193+
currentStep={currentStep}
194+
onPreviousStep={onPreviousStep}
195+
onNextStep={onNextStep}
196+
formControl={formControl}
197+
/>
198+
</Stack>
121199
);
122200
};

‎src/pages/tenant/administration/tenants/add.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,11 @@ const Page = () => {
3535
title: "Step 2",
3636
description: "Enter Tenant Details",
3737
component: CippAddTenantForm,
38-
componentProps: {},
3938
},
4039
{
4140
title: "Step 3",
4241
description: "Confirm and Submit",
4342
component: CippAddTenantConfirmation,
44-
componentProps: {},
4543
},
4644
];
4745

‎src/pages/tenant/administration/tenants/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const Page = () => {
4444
actions={actions}
4545
cardButton={
4646
<Button
47-
variant="contained"
47+
variant="outlined"
4848
color="primary"
4949
size="small"
5050
component={NextLink}

0 commit comments

Comments
 (0)