From 6577bfadcfbf9be21af07190ccc3e2936f1eae64 Mon Sep 17 00:00:00 2001
From: toririm <longtimedragon@icloud.com>
Date: Mon, 30 Sep 2024 14:21:28 +0900
Subject: [PATCH] =?UTF-8?q?OrderItemView=20=E5=88=87=E3=82=8A=E5=87=BA?=
 =?UTF-8?q?=E3=81=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/organisms/OrderItemView.tsx | 50 ++++++++++++++++++++++
 app/routes/cashier-v2.tsx                  | 32 ++++----------
 2 files changed, 59 insertions(+), 23 deletions(-)
 create mode 100644 app/components/organisms/OrderItemView.tsx

diff --git a/app/components/organisms/OrderItemView.tsx b/app/components/organisms/OrderItemView.tsx
new file mode 100644
index 00000000..5b6b7c7f
--- /dev/null
+++ b/app/components/organisms/OrderItemView.tsx
@@ -0,0 +1,50 @@
+import type { WithId } from "~/lib/typeguard";
+import type { ItemEntity } from "~/models/item";
+import type { OrderEntity } from "~/models/order";
+import { ItemAssign } from "./ItemAssign";
+
+type props = {
+  order: OrderEntity;
+  setOrderItems: React.Dispatch<React.SetStateAction<WithId<ItemEntity>[]>>;
+  inputStatus: "items" | "discount" | "received" | "description" | "submit";
+  itemFocus: number;
+  setItemFocus: React.Dispatch<React.SetStateAction<number>>;
+  discountOrder: boolean;
+};
+
+const OrderItemView = ({
+  inputStatus,
+  discountOrder,
+  setOrderItems,
+  itemFocus,
+  order,
+}: props) => {
+  return (
+    <>
+      {inputStatus === "items" && (
+        <>
+          <p>商品を追加: キーボードの a, s, d, f, g, h, j, k, l, ;</p>
+          <p>↑・↓でアイテムのフォーカスを移動</p>
+          <p>Enterで指名の入力欄を開く</p>
+        </>
+      )}
+      {order.items.map((item, idx) => (
+        <ItemAssign
+          key={`${idx}-${item.id}`}
+          item={item}
+          idx={idx}
+          setOrderItems={setOrderItems}
+          focus={idx === itemFocus}
+        />
+      ))}
+      {discountOrder && (
+        <div className="grid grid-cols-2">
+          <p className="font-bold text-lg">割引</p>
+          <div>-&yen;{order.discountInfo.discount}</div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export { OrderItemView };
diff --git a/app/routes/cashier-v2.tsx b/app/routes/cashier-v2.tsx
index 777ea1af..ef7ab96a 100644
--- a/app/routes/cashier-v2.tsx
+++ b/app/routes/cashier-v2.tsx
@@ -4,8 +4,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useSWRSubscription from "swr/subscription";
 import { z } from "zod";
 import { DiscountInput } from "~/components/organisms/DiscountInput";
-import { ItemAssign } from "~/components/organisms/ItemAssign";
 import { OrderAlertDialog } from "~/components/organisms/OrderAlertDialog";
+import { OrderItemView } from "~/components/organisms/OrderItemView";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { itemConverter, orderConverter } from "~/firebase/converter";
@@ -265,28 +265,14 @@ export default function Cashier() {
         </div>
         <div>
           <p>入力ステータス: {inputStatus}</p>
-          {inputStatus === "items" && (
-            <>
-              <p>商品を追加: キーボードの a, s, d, f, g, h, j, k, l, ;</p>
-              <p>↑・↓でアイテムのフォーカスを移動</p>
-              <p>Enterで指名の入力欄を開く</p>
-            </>
-          )}
-          {orderItems.map((item, idx) => (
-            <ItemAssign
-              key={`${idx}-${item.id}`}
-              item={item}
-              idx={idx}
-              setOrderItems={setOrderItems}
-              focus={idx === itemFocus}
-            />
-          ))}
-          {discountOrder && (
-            <div className="grid grid-cols-2">
-              <p className="font-bold text-lg">割引</p>
-              <div>-&yen;{newOrder.discountInfo.discount}</div>
-            </div>
-          )}
+          <OrderItemView
+            order={newOrder}
+            setOrderItems={setOrderItems}
+            inputStatus={inputStatus}
+            itemFocus={itemFocus}
+            setItemFocus={setItemFocus}
+            discountOrder={Boolean(discountOrder)}
+          />
         </div>
       </div>
       <OrderAlertDialog