DiscountInput 切り出し

app/components/organisms/DiscountInput.tsx

@@ -0,0 +1,38 @@
+import type { OrderEntity } from "~/models/order";
+import { ThreeDigitsInput } from "../molecules/ThreeDigitsInput";
+
+type props = {
+  id: string;
+  value: string;
+  onChange: (value: string) => void;
+  disabled: boolean;
+  discountOrder?: OrderEntity;
+  lastPurchasedCups: number;
+};
+
+const DiscountInput = ({
+  id,
+  value,
+  onChange,
+  disabled,
+  discountOrder,
+  lastPurchasedCups,
+}: props) => {
+  return (
+    <div>
+      <p>割引券番号</p>
+      <ThreeDigitsInput
+        id={id}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+      />
+      <p>
+        {discountOrder === undefined ? "見つかりません" : null}
+        {discountOrder && `有効杯数: ${lastPurchasedCups}`}
+      </p>
+    </div>
+  );
+};
+
+export { DiscountInput };

app/routes/cashier-v2.tsx

@@ -3,7 +3,7 @@ import { type ClientActionFunction, useSubmit } from "@remix-run/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useSWRSubscription from "swr/subscription";
 import { z } from "zod";
-import { ThreeDigitsInput } from "~/components/molecules/ThreeDigitsInput";
+import { DiscountInput } from "~/components/organisms/DiscountInput";
 import { ItemAssign } from "~/components/organisms/ItemAssign";
 import { OrderAlertDialog } from "~/components/organisms/OrderAlertDialog";
 import { Button } from "~/components/ui/button";
@@ -237,19 +237,14 @@ export default function Cashier() {
             <p>合計金額</p>
             <p>{newOrder.billingAmount}</p>
           </div>
-          <div>
-            <p>割引券番号</p>
-            <ThreeDigitsInput
-              id="discountOrderId"
-              value={discountOrderId}
-              onChange={(value) => setDiscountOrderId(value)}
-              disabled={inputStatus !== "discount"}
-            />
-            <p>
-              {discountOrder === undefined ? "見つかりません" : null}
-              {discountOrder && `有効杯数: ${lastPurchasedCups}`}
-            </p>
-          </div>
+          <DiscountInput
+            id="discountOrderId"
+            value={discountOrderId}
+            onChange={(value) => setDiscountOrderId(value)}
+            disabled={inputStatus !== "discount"}
+            discountOrder={discountOrder}
+            lastPurchasedCups={lastPurchasedCups}
+          />
           <Input
             type="number"
             value={received}