Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | 1x 2x 2x 2x 2x 2x 1x 597x 2x 1x 597x 2x 2x 6x | import { Box, Grid } from "@mui/material";
import { useFormContext } from "react-hook-form";
import GiveSelect from "@shared/GiveInputs/GiveSelect";
import GiveMotionWrapper from "@shared/Motion/GiveMotionWrapper";
import { useMemo, useState } from "react";
import { getFullTimeZonesMomentAll, PLATFORM_TIMEZONE } from "@utils/timezones";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
const AccountAccessibility = () => {
const { isMobileView } = useCustomThemeV2();
const [searchValue, setSearchValue] = useState("");
const { watch, setValue } = useFormContext();
const contextualMenuProps = {
searchBarProps: {
handleChange: (val: string) => setSearchValue(val),
value: searchValue,
},
onCloseEmptyState: () => setSearchValue(""),
emptySection: "empty-search",
anchorOrigin: {
vertical: 45,
horizontal: "left",
},
...(!isMobileView
? {
color: "tertiary",
texture: "blurred",
menuWidth: 371,
}
: {}),
};
const timezoneOptions = useMemo(() => {
const timezones = getFullTimeZonesMomentAll();
return timezones?.map((item, key) => ({
label: `GMT${item.gmt} ${item.timezone}`,
id: key,
value: item.timezone.toLowerCase(),
}));
}, []);
const filteredOptions = useMemo(
() =>
timezoneOptions.filter((item) =>
item?.label?.toLowerCase().includes(searchValue.toLowerCase()),
),
[searchValue],
);
const nodeList = [
{
node: (
<GiveSelect
disabled
name="currency"
defaultValue="usd"
label="Currency"
data-testid="currency"
options={[
{
value: "usd",
label: "US Dollar (USD)",
},
]}
/>
),
},
{
node: (
<GiveSelect
defaultValue="eng"
disabled
name="language"
label="Language"
data-testid="language"
options={[
{
value: "eng",
label: "English",
},
]}
/>
),
},
{
node: (
// Timezone is locked to Eastern Time platform-wide. Selector is kept
// for future use but disabled — value is not user-editable.
<GiveSelect
useContextualMenu
contextualMenuProps={contextualMenuProps as any}
placeholder="Timezone"
label="Timezone"
options={filteredOptions}
fullWidth
disabled
value={PLATFORM_TIMEZONE.toLowerCase()}
// onChange={(e) =>
// setValue("timezone", e.target.value, { shouldDirty: true })
// }
/>
),
},
];
return (
<Box sx={{ width: "100%" }}>
<Grid container rowSpacing="24px">
{nodeList.map(({ node }, index) => (
<Grid key={index} item xs={12}>
<GiveMotionWrapper type="fadeInUp" delay={100 + 50 * (index + 1)}>
{node}
</GiveMotionWrapper>
</Grid>
))}
</Grid>
</Box>
);
};
export default AccountAccessibility;
|