Create data request form chunks

2026-06-02 23:42:50 -04:00
parent 72d4c7818d
commit 643ae53ea0
2 changed files with 99 additions and 0 deletions
@@ -0,0 +1,41 @@
+import {
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Input,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import { type Dispatch, type SetStateAction } from "react";
+
+export default function (props: {
+  fileStateSet: Dispatch<SetStateAction<FileList | null>>;
+}) {
+  const inputSelectorProps = useMultiStyleConfig("Button", {
+    colorScheme: "blue",
+  });
+  return (
+    <FormControl isRequired>
+      <FormLabel>Proof of Purchase</FormLabel>
+      <Input
+        accept="image/*"
+        border="none"
+        multiple={true}
+        onChange={(e) => {
+          props.fileStateSet(e.target.files);
+        }}
+        sx={{
+          "::file-selector-button": {
+            border: "none",
+            outline: "none",
+            ...inputSelectorProps,
+          },
+        }}
+        type="file"
+      />
+      <FormHelperText>
+        Select both the Roblox transaction entry and proof of you not receiving
+        your purchase.
+      </FormHelperText>
+    </FormControl>
+  );
+}
@@ -0,0 +1,58 @@
+import {
+  FormControl,
+  FormLabel,
+  Input,
+  Radio,
+  RadioGroup,
+  Stack,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import { type Dispatch, type SetStateAction, useState } from "react";
+
+export default function (props: {
+  fileStateSet: Dispatch<SetStateAction<FileList | null>>;
+  isTerminated: boolean;
+  setIsTerminated: Dispatch<SetStateAction<boolean>>;
+}) {
+  const inputSelectorProps = useMultiStyleConfig("Button", {
+    colorScheme: "blue",
+  });
+
+  return (
+    <>
+      <FormControl isRequired>
+        <FormLabel>
+          Is the account you are transferring from terminated?
+        </FormLabel>
+        <RadioGroup
+          onChange={(v) => props.setIsTerminated(JSON.parse(v))}
+          value={JSON.stringify(props.isTerminated)}
+        >
+          <Stack>
+            <Radio value="true">Yes</Radio>
+            <Radio value="false">No</Radio>
+          </Stack>
+        </RadioGroup>
+      </FormControl>
+      {props.isTerminated ? (
+        <FormControl isRequired>
+          <FormLabel>Proof of Termination</FormLabel>
+          <Input
+            accept="image/*"
+            border="none"
+            multiple={true}
+            onChange={(e) => props.fileStateSet(e.target.files)}
+            sx={{
+              "::file-selector-button": {
+                border: "none",
+                outline: "none",
+                ...inputSelectorProps,
+              },
+            }}
+            type="file"
+          />
+        </FormControl>
+      ) : null}
+    </>
+  );
+}