Skip to content

Commit 5cc7ba7

Browse files
jzongkerjzongker
committed
Fixed church settings format
1 parent 14d83a6 commit 5cc7ba7

4 files changed

Lines changed: 143 additions & 79 deletions

File tree

‎public/locales/en.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -838,7 +838,9 @@
838838
"noNameMsg": "Church name cannot be blank.",
839839
"noSubMsg": "Subdomain cannot be blank.",
840840
"subdom": "Subdomain",
841-
"general": "General"
841+
"general": "General",
842+
"churchInfo": "Church Information",
843+
"churchSettings": "Church Settings"
842844
},
843845
"domainSettingsEdit": {
844846
"act": "Action",

‎src/settings/ManageChurch.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -183,15 +183,17 @@ export const ManageChurch = () => {
183183
</Stack>
184184
</Box>
185185

186-
{/* Tab Content */}
187-
{selectedTab === "roles" && <Box sx={{ p: 3 }}>{getCurrentTab()}</Box>}
188-
189186
{/* Church Settings Modal/Component */}
190187
{showChurchSettings && (
191188
<Box sx={{ p: 3 }}>
192189
<ChurchSettingsEdit church={church} updatedFunction={() => { loadData(); setShowChurchSettings(false); }} />
193190
</Box>
194191
)}
192+
193+
{/* Tab Content */}
194+
{selectedTab === "roles" && <Box sx={{ p: 3 }}>{getCurrentTab()}</Box>}
195+
196+
195197
</>
196198
);
197199
};

‎src/settings/components/ChurchSettingsEdit.tsx‎

Lines changed: 131 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { ApiHelper, type ChurchInterface, InputBox, ErrorMessages, UserHelper, Permissions, Locale } from "@churchapps/apphelper";
33
import { GivingSettingsEdit } from "./GivingSettingsEdit";
4-
import { TextField, Grid, Divider, Chip } from "@mui/material";
4+
import { TextField, Grid, Divider, Chip, Box, Typography } from "@mui/material";
55
import { DomainSettingsEdit } from "./DomainSettingsEdit";
66
import { DirectoryApproveSettingsEdit } from "./DirectoryApproveSettingsEdit";
77
import { SupportContactSettingsEdit } from "./SupportContactSettingsEdit";
@@ -32,72 +32,88 @@ export const ChurchSettingsEdit: React.FC<Props> = (props) => {
3232
handleSave();
3333
}
3434
};
35+
3536
const validate = () => {
3637
const errors = [];
37-
if (church.name === "") errors.push(Locale.label("settings.churchSettingsEdit.noNameMsg"));
38-
if (church.subDomain === "") errors.push(Locale.label("settings.churchSettingsEdit.noSubMsg"));
38+
if (!church.name?.trim()) errors.push(Locale.label("settings.churchSettingsEdit.noNameMsg"));
39+
if (!church.subDomain?.trim()) errors.push(Locale.label("settings.churchSettingsEdit.noSubMsg"));
3940
setErrors(errors);
4041
return errors.length === 0;
4142
};
4243

4344
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
44-
e.preventDefault();
45+
setErrors([]);
4546
const c = { ...church };
46-
switch (e.target.name) {
47+
const { name, value } = e.target;
48+
49+
switch (name) {
4750
case "churchName":
48-
c.name = e.target.value;
51+
c.name = value;
4952
break;
5053
case "address1":
51-
c.address1 = e.target.value;
54+
c.address1 = value;
5255
break;
5356
case "address2":
54-
c.address2 = e.target.value;
57+
c.address2 = value;
5558
break;
5659
case "city":
57-
c.city = e.target.value;
60+
c.city = value;
5861
break;
5962
case "state":
60-
c.state = e.target.value;
63+
c.state = value;
6164
break;
6265
case "zip":
63-
c.zip = e.target.value;
66+
c.zip = value;
6467
break;
6568
case "country":
66-
c.country = e.target.value;
69+
c.country = value;
6770
break;
6871
case "subDomain":
69-
c.subDomain = e.target.value;
72+
c.subDomain = value;
7073
break;
7174
}
72-
7375
setChurch(c);
7476
};
7577

7678
const giveSection = () => {
7779
if (!UserHelper.checkAccess(Permissions.givingApi.settings.edit)) return null;
78-
else return <GivingSettingsEdit churchId={church?.id || ""} saveTrigger={saveTrigger} />;
80+
return <GivingSettingsEdit churchId={church?.id || ""} saveTrigger={saveTrigger} />;
7981
};
8082

8183
React.useEffect(() => setChurch(props.church), [props.church]);
8284

83-
if (church === null || church.id === undefined) return null;
84-
else {
85-
return (
86-
<InputBox id="campusBox" cancelFunction={props.updatedFunction} saveFunction={handleSave} headerText={church.name} headerIcon="church">
87-
<ErrorMessages errors={errors} />
85+
if (!church || !church.id) return null;
86+
87+
return (
88+
<InputBox
89+
id="churchSettingsBox"
90+
cancelFunction={props.updatedFunction}
91+
saveFunction={handleSave}
92+
headerText={Locale.label("settings.churchSettingsEdit.churchSettings")}
93+
headerIcon="business"
94+
>
95+
<ErrorMessages errors={errors} />
96+
97+
{/* Church Information Section */}
98+
<Box sx={{ mb: 3 }}>
99+
<Typography variant="h6" sx={{ mb: 2, fontWeight: 600, color: "primary.main" }}>
100+
{Locale.label("settings.churchSettingsEdit.churchInfo")}
101+
</Typography>
102+
88103
<Grid container spacing={3}>
89-
<Grid xs={6}>
104+
<Grid size={{ xs: 12, md: 6 }}>
90105
<TextField
91106
fullWidth
92107
name="churchName"
93108
label={Locale.label("settings.churchSettingsEdit.churchName")}
94109
value={church?.name || ""}
95110
onChange={handleChange}
111+
onKeyDown={handleKeyDown}
96112
data-testid="church-name-input"
97113
aria-label="Church name"
98114
/>
99115
</Grid>
100-
<Grid xs={6}>
116+
<Grid size={{ xs: 12, md: 6 }}>
101117
<TextField
102118
fullWidth
103119
name="subDomain"
@@ -107,61 +123,105 @@ export const ChurchSettingsEdit: React.FC<Props> = (props) => {
107123
onKeyDown={handleKeyDown}
108124
data-testid="subdomain-input"
109125
aria-label="Subdomain"
126+
helperText="Your church's unique web address"
110127
/>
111128
</Grid>
112129
</Grid>
113130

114-
<Grid container spacing={3}>
115-
<Grid xs={6}>
116-
<TextField
117-
fullWidth
118-
name="address1"
119-
label={Locale.label("settings.churchSettingsEdit.address1")}
120-
value={church?.address1 || ""}
121-
onChange={handleChange}
122-
onKeyDown={handleKeyDown}
123-
data-testid="address1-input"
124-
aria-label="Address line 1"
125-
/>
126-
</Grid>
127-
<Grid xs={6}>
128-
<TextField fullWidth name="address2" label={Locale.label("settings.churchSettingsEdit.address2")} value={church?.address2 || ""} onChange={handleChange} onKeyDown={handleKeyDown} />
129-
</Grid>
130-
</Grid>
131-
132-
<Grid container spacing={3}>
133-
<Grid xs={6}>
134-
<TextField fullWidth name="city" label={Locale.label("person.city")} value={church?.city || ""} onChange={handleChange} onKeyDown={handleKeyDown} />
135-
</Grid>
136-
<Grid xs={3}>
137-
<TextField fullWidth name="state" label={Locale.label("person.state")} value={church?.state || ""} onChange={handleChange} onKeyDown={handleKeyDown} />
131+
<Box sx={{ mt: 3 }}>
132+
<Typography variant="subtitle1" sx={{ mb: 2, fontWeight: 600, color: "text.secondary" }}>
133+
{Locale.label("person.address")}
134+
</Typography>
135+
<Grid container spacing={3}>
136+
<Grid size={{ xs: 12, md: 6 }}>
137+
<TextField
138+
fullWidth
139+
name="address1"
140+
label={Locale.label("settings.churchSettingsEdit.address1")}
141+
value={church?.address1 || ""}
142+
onChange={handleChange}
143+
onKeyDown={handleKeyDown}
144+
data-testid="address1-input"
145+
aria-label="Address line 1"
146+
/>
147+
</Grid>
148+
<Grid size={{ xs: 12, md: 6 }}>
149+
<TextField
150+
fullWidth
151+
name="address2"
152+
label={Locale.label("settings.churchSettingsEdit.address2")}
153+
value={church?.address2 || ""}
154+
onChange={handleChange}
155+
onKeyDown={handleKeyDown}
156+
/>
157+
</Grid>
158+
<Grid size={{ xs: 12, md: 6 }}>
159+
<TextField
160+
fullWidth
161+
name="city"
162+
label={Locale.label("person.city")}
163+
value={church?.city || ""}
164+
onChange={handleChange}
165+
onKeyDown={handleKeyDown}
166+
/>
167+
</Grid>
168+
<Grid size={{ xs: 12, md: 3 }}>
169+
<TextField
170+
fullWidth
171+
name="state"
172+
label={Locale.label("person.state")}
173+
value={church?.state || ""}
174+
onChange={handleChange}
175+
onKeyDown={handleKeyDown}
176+
/>
177+
</Grid>
178+
<Grid size={{ xs: 12, md: 3 }}>
179+
<TextField
180+
fullWidth
181+
name="zip"
182+
label={Locale.label("person.zip")}
183+
value={church?.zip || ""}
184+
onChange={handleChange}
185+
onKeyDown={handleKeyDown}
186+
/>
187+
</Grid>
188+
<Grid size={{ xs: 12 }}>
189+
<TextField
190+
fullWidth
191+
name="country"
192+
label={Locale.label("person.country")}
193+
value={church?.country || ""}
194+
onChange={handleChange}
195+
onKeyDown={handleKeyDown}
196+
/>
197+
</Grid>
138198
</Grid>
139-
<Grid xs={3}>
140-
<TextField fullWidth name="zip" label={Locale.label("person.zip")} value={church?.zip || ""} onChange={handleChange} onKeyDown={handleKeyDown} />
141-
</Grid>
142-
</Grid>
143-
<TextField fullWidth name="country" label={Locale.label("person.country")} value={church?.country || ""} onChange={handleChange} onKeyDown={handleKeyDown} />
199+
</Box>
200+
</Box>
144201

145-
{/* GENERAL SECTION */}
146-
<Divider variant="middle" textAlign="center" sx={{ marginTop: 3, marginBottom: 3 }}>
147-
<Chip label={Locale.label("settings.churchSettingsEdit.general")} size="small" color="primary" sx={{ width: 100 }} />
148-
</Divider>
149-
<SupportContactSettingsEdit churchId={church?.id || ""} saveTrigger={saveTrigger} />
150-
<DirectoryApproveSettingsEdit churchId={church?.id || ""} saveTrigger={saveTrigger} />
151-
<VisbilityPrefSettingsEdit churchId={church?.id || ""} saveTrigger={saveTrigger} />
202+
{/* General Settings Section */}
203+
<Divider variant="middle" textAlign="center" sx={{ marginTop: 3, marginBottom: 3 }}>
204+
<Chip label={Locale.label("settings.churchSettingsEdit.general")} size="small" color="primary" />
205+
</Divider>
206+
<SupportContactSettingsEdit churchId={church?.id || ""} saveTrigger={saveTrigger} />
207+
<DirectoryApproveSettingsEdit churchId={church?.id || ""} saveTrigger={saveTrigger} />
208+
<VisbilityPrefSettingsEdit churchId={church?.id || ""} saveTrigger={saveTrigger} />
152209

153-
{/* GIVING SECTION */}
154-
<Divider variant="middle" textAlign="center" sx={{ marginTop: 3, marginBottom: 3 }}>
155-
<Chip label={Locale.label("settings.givingSettingsEdit.giving")} size="small" color="primary" sx={{ width: 100 }} />
156-
</Divider>
157-
{giveSection()}
210+
{/* Giving Settings Section */}
211+
{UserHelper.checkAccess(Permissions.givingApi.settings.edit) && (
212+
<>
213+
<Divider variant="middle" textAlign="center" sx={{ marginTop: 3, marginBottom: 3 }}>
214+
<Chip label={Locale.label("settings.givingSettingsEdit.giving")} size="small" color="primary" />
215+
</Divider>
216+
{giveSection()}
217+
</>
218+
)}
158219

159-
{/* DOMAINS SECTION */}
160-
<Divider variant="middle" textAlign="center" sx={{ marginTop: 3, marginBottom: 3 }}>
161-
<Chip label={Locale.label("settings.domainSettingsEdit.domains")} size="small" color="primary" sx={{ width: 100 }} />
162-
</Divider>
163-
<DomainSettingsEdit churchId={church?.id || ""} saveTrigger={saveTrigger} />
164-
</InputBox>
165-
);
166-
}
220+
{/* Domains Section */}
221+
<Divider variant="middle" textAlign="center" sx={{ marginTop: 3, marginBottom: 3 }}>
222+
<Chip label={Locale.label("settings.domainSettingsEdit.domains")} size="small" color="primary" />
223+
</Divider>
224+
<DomainSettingsEdit churchId={church?.id || ""} saveTrigger={saveTrigger} />
225+
</InputBox>
226+
);
167227
};

‎src/settings/components/VisibilityPrefSettingsEdit.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ApiHelper, type GenericSettingInterface, Locale, UniqueIdHelper, type VisibilityPreferenceInterface } from "@churchapps/apphelper";
22
import {
3-
FormControl, Grid, Icon, InputLabel, MenuItem, Select, Stack, Tooltip, Typography, type SelectChangeEvent
3+
FormControl, Grid, Icon, InputLabel, MenuItem, Select, Stack, Tooltip, Typography, type SelectChangeEvent
44
} from "@mui/material";
55
import React, { useState } from "react";
66

@@ -89,7 +89,7 @@ export const VisbilityPrefSettingsEdit: React.FC<Props> = (props) => {
8989
</Tooltip>
9090
</Stack>
9191
<Grid container spacing={{ xs: 0, sm: 1, md: 2 }}>
92-
<Grid xs={12} sm={6} md={4}>
92+
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
9393
<FormControl fullWidth>
9494
<InputLabel id="address">{Locale.label("settings.visibilityPrefSettingsEdit.address")}</InputLabel>
9595
<Select fullWidth labelId="address" label={Locale.label("settings.visibilityPrefSettingsEdit.address")} name="address" value={pref.address} defaultValue="" onChange={handlePrefChange}>
@@ -99,7 +99,7 @@ export const VisbilityPrefSettingsEdit: React.FC<Props> = (props) => {
9999
</Select>
100100
</FormControl>
101101
</Grid>
102-
<Grid xs={12} sm={6} md={4}>
102+
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
103103
<FormControl fullWidth>
104104
<InputLabel id="phone">{Locale.label("settings.visibilityPrefSettingsEdit.phoneNum")}</InputLabel>
105105
<Select
@@ -117,7 +117,7 @@ export const VisbilityPrefSettingsEdit: React.FC<Props> = (props) => {
117117
</Select>
118118
</FormControl>
119119
</Grid>
120-
<Grid xs={12} sm={12} md={4}>
120+
<Grid size={{ xs: 12, sm: 12, md: 4 }}>
121121
<FormControl fullWidth>
122122
<InputLabel id="email">{Locale.label("settings.visibilityPrefSettingsEdit.email")}</InputLabel>
123123
<Select fullWidth labelId="email" label={Locale.label("settings.visibilityPrefSettingsEdit.email")} name="email" value={pref.email} defaultValue="" onChange={handlePrefChange}>

0 commit comments

Comments
 (0)