駐車場コードから駐車場を特定できる機能を追加

src/api/custom/hello-techno/index.ts

@@ -22,6 +22,7 @@ export type HTAdjustData = {
   amount: number;
 };
 
+// 顧客一覧取得 ---------------------
 export type HTCustomersResponse = {
   data: {
     records: HTCustomer[];
@@ -36,6 +37,7 @@ export const getHTCustomers = async (data = {}) => {
   return res;
 };
 
+// 駐車場一覧取得 ---------------------
 export type HTParkingsRequest = {
   customer_code: string;
 };
@@ -47,7 +49,6 @@ export type HTParkingsResponse = {
 } & APICommonResponse;
 
 export const getHTParkings = async (data: HTParkingsRequest) => {
-  console.log({ data });
   const res = await request<HTParkingsResponse>({
     url: getUrl(ApiId.HT_CUSTOM_PARKINGS),
     method: HttpMethod.GET,
@@ -56,6 +57,25 @@ export const getHTParkings = async (data: HTParkingsRequest) => {
   return res;
 };
 
+// 駐車場情報取得（駐車場管理コードのみ指定） ---------------------
+export type HTParkingRequest = {
+  parking_management_code: string;
+};
+
+export type HTParkingResponse = {
+  data: HTParking;
+} & APICommonResponse;
+
+export const getHTParking = async (data: HTParkingRequest) => {
+  const res = await request<HTParkingResponse>({
+    url: getUrl(ApiId.HT_CUSTOM_PARKING_BY_CODE),
+    method: HttpMethod.GET,
+    data: new URLSearchParams(data),
+  });
+  return res;
+};
+
+// 精算情報取得 ---------------------
 export type HTAdjustDataRequest = {
   customer_code: string;
   parking_management_code: string;

src/api/index.ts

@@ -46,6 +46,7 @@ export const ApiId = {
   // FOR CUSTOM
   HT_CUSTOM_CUSTOMERS: id++,
   HT_CUSTOM_PARKINGS: id++,
+  HT_CUSTOM_PARKING_BY_CODE: id++,
   HT_CUSTOM_ADJUST_DATA: id++,
   HT_CUSTOM_RECEIPT_ISSUING_ORDERS: id++,
   HT_CUSTOM_RECEIPT_ISSUING_ORDER_CREATE: id++,

src/api/url.ts

@@ -37,6 +37,7 @@ const urls = {
   // FOR CUSTOM
   [A.HT_CUSTOM_CUSTOMERS]: "custom/hello-techno/customers",
   [A.HT_CUSTOM_PARKINGS]: "custom/hello-techno/parkings",
+  [A.HT_CUSTOM_PARKING_BY_CODE]: "custom/hello-techno/parking/by-code",
   [A.HT_CUSTOM_ADJUST_DATA]: "custom/hello-techno/adjust-data",
   [A.HT_CUSTOM_RECEIPT_ISSUING_ORDERS]:
     "custom/hello-techno/receipt-issuing-orders",

src/pages/dashboard/receipt-issuing-order/custom/hello-techno/hooks/useSelectParkingStep.tsx

@@ -1,7 +1,11 @@
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Box, Button, Stack, Typography } from "@mui/material";
+import { Box, Button, Grid, Stack, Typography } from "@mui/material";
 import { HasChildren } from "@types";
-import { getHTCustomers, getHTParkings } from "api/custom/hello-techno";
+import {
+  getHTCustomers,
+  getHTParking,
+  getHTParkings,
+} from "api/custom/hello-techno";
 import {
   FormProvider,
   RHFAutoComplete,
@@ -12,7 +16,8 @@ import {
   AutoCompleteOptionType,
 } from "components/hook-form/RHFAutoComplete";
 import useAPICall from "hooks/useAPICall";
-import { useEffect, useState } from "react";
+import useSnackbarCustom from "hooks/useSnackbarCustom";
+import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import * as Yup from "yup";
 
@@ -32,6 +37,7 @@ type FormProps = {
   customerCode: AutoCompleteOptionType;
   parkingManagementCode: AutoCompleteOptionType;
   adjustSeqNo: string;
+  serachParkingManagementCode: string;
 };
 
 type Props = {
@@ -41,6 +47,8 @@ export default function useSelectParkingStep({ onNext }: Props) {
   const [customers, setCustomers] = useState<AutoCompleteOption[]>([]);
   const [parkings, setParkings] = useState<AutoCompleteOption[]>([]);
 
+  const { error } = useSnackbarCustom();
+
   const customerAPI = useAPICall({
     apiMethod: getHTCustomers,
     backDrop: true,
@@ -73,11 +81,31 @@ export default function useSelectParkingStep({ onNext }: Props) {
     },
   });
 
+  const parkingByCodeAPI = useAPICall({
+    apiMethod: getHTParking,
+    backDrop: true,
+    onSuccess: ({ data }) => {
+      const options: AutoCompleteOption[] = [];
+      options.push({
+        label: data.name,
+        value: data.parking_management_code,
+      });
+      setParkings(options);
+
+      form.setValue("customerCode", data.customer_code);
+    },
+    onFailed: (res) => {
+      error("駐車場の特定に失敗しました");
+      console.log(res);
+    },
+  });
+
   const form = useForm<FormProps>({
     defaultValues: {
       customerCode: null,
       parkingManagementCode: null,
       adjustSeqNo: "",
+      serachParkingManagementCode: "",
     },
     resolver: yupResolver(
       Yup.object().shape({
@@ -94,6 +122,7 @@ export default function useSelectParkingStep({ onNext }: Props) {
   });
 
   const customerCode = form.watch("customerCode.value");
+  const searchParkingManagementCode = form.watch("serachParkingManagementCode");
 
   const handleSubmit = () => {
     if (onNext) {
@@ -101,6 +130,17 @@ export default function useSelectParkingStep({ onNext }: Props) {
     }
   };
 
+  const handleClickSearchParking = () => {
+    parkingByCodeAPI.callAPI({
+      parking_management_code: searchParkingManagementCode,
+    });
+  };
+
+  const canSearchParking = useMemo(() => {
+    const reg = /^[0-9]{5}$/;
+    return reg.test(searchParkingManagementCode);
+  }, [searchParkingManagementCode]);
+
   // 顧客一覧取得
   useEffect(() => {
     customerAPI.callAPI({});
@@ -108,31 +148,63 @@ export default function useSelectParkingStep({ onNext }: Props) {
 
   // 駐車場一覧取得
   useEffect(() => {
-    setParkings([]);
-    form.setValue("parkingManagementCode", null);
+    if (!canSearchParking) {
+      setParkings([]);
+      form.setValue("parkingManagementCode", null);
 
-    if (customerCode) {
-      parkingAPI.callAPI({ customer_code: customerCode });
+      if (customerCode) {
+        parkingAPI.callAPI({ customer_code: customerCode });
+      }
     }
   }, [customerCode]);
 
+  useEffect(() => {
+    if (parkings.length === 1) {
+      const parking = parkings[0];
+      form.setValue("parkingManagementCode", parking);
+    }
+  }, [parkings]);
+
   const element = (
     <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
       <Stack spacing={2} sx={{ p: 1, m: 1 }}>
-        <AreaBox title="運営会社">
-          <RHFAutoComplete
-            name="customerCode"
-            options={customers}
-            size="small"
-          />
-        </AreaBox>
-        <AreaBox title="駐車場">
-          <RHFAutoComplete
-            name="parkingManagementCode"
-            options={parkings}
-            size="small"
-          />
-        </AreaBox>
+        <Grid container spacing={2}>
+          <Grid item xs={12} md={4}>
+            <Stack>
+              <AreaBox title="運営会社">
+                <RHFAutoComplete
+                  name="customerCode"
+                  options={customers}
+                  size="small"
+                />
+              </AreaBox>
+              <AreaBox title="駐車場">
+                <RHFAutoComplete
+                  name="parkingManagementCode"
+                  options={parkings}
+                  size="small"
+                />
+              </AreaBox>
+            </Stack>
+          </Grid>
+          <Grid item xs={12} md={4}>
+            <Stack spacing={3}>
+              <AreaBox title="駐車場管理コード">
+                <RHFTextField name="serachParkingManagementCode" />
+              </AreaBox>
+              <Stack direction="row">
+                <Button
+                  variant="outlined"
+                  color="info"
+                  onClick={handleClickSearchParking}
+                  disabled={!canSearchParking}
+                >
+                  検索
+                </Button>
+              </Stack>
+            </Stack>
+          </Grid>
+        </Grid>
         <AreaBox title="精算連番">
           <RHFTextField name="adjustSeqNo" size="small" />
         </AreaBox>