All files / src/sections/PayBuilder/views/events/components AssignSeatingSection.tsx

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
 
 
 
 
 
 
 
 
 
 
 
45x
73x
69x
 
69x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Divider, Stack } from "@mui/material";
import { CouchIcon } from "@phosphor-icons/react";
import GiveSwitch from "@shared/Switch/GiveSwitch";
import GiveText from "@shared/Text/GiveText";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import SeatingConfigEditor from "./SeatingConfigEditor";
 
// PAY Builder 031 — Assign Seating lives at the top of the Tickets tab. The toggle
// value persists on the builder form at DateLocation.assignSeating (product PATCH);
// the row config (Row / First Seat / Last Seat / Label) is revealed when the toggle is on and
// persists with the normal form Save.
const AssignSeatingSection = () => {
  const { methods } = usePayBuilderForm();
  const assignSeating = methods.watch("DateLocation.assignSeating") ?? false;
 
  return (
    <Stack gap="16px">
      <Stack direction="row" alignItems="center" gap="12px" pb="16px">
        <CouchIcon size={24} />
        <Stack flex={1} gap="4px">
          <GiveText variant="bodyL">Assign Seating</GiveText>
          <GiveText variant="bodyS" color="secondary">
            Enable this option to add rows, seats to your ticket
          </GiveText>
        </Stack>
        <GiveSwitch
          inputProps={{ "aria-label": "Assign seating" }}
          checked={assignSeating}
          onChange={(_, checked) =>
            methods.setValue("DateLocation.assignSeating", checked, {
              shouldDirty: true,
            })
          }
        />
      </Stack>
      <Divider />
      {assignSeating && <SeatingConfigEditor />}
    </Stack>
  );
};
 
export default AssignSeatingSection;