From d96a3db1a47836eec5bfd45598d23828bebc543d Mon Sep 17 00:00:00 2001
From: toririm <longtimedragon@icloud.com>
Date: Sun, 6 Oct 2024 15:29:54 +0900
Subject: [PATCH] =?UTF-8?q?pos=20/cashier-v2=20=E5=89=B2=E5=BC=95=E5=85=A5?=
 =?UTF-8?q?=E5=8A=9B=E6=99=82=E3=81=AB=E5=89=8D=E5=9B=9E=E3=81=AE=E6=B3=A8?=
 =?UTF-8?q?=E6=96=87=E5=86=85=E5=AE=B9=E3=82=92=E8=A1=A8=E7=A4=BA=E3=81=99?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/organisms/DiscountInput.tsx | 35 ++++++++++++++++------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/app/components/organisms/DiscountInput.tsx b/app/components/organisms/DiscountInput.tsx
index 62ed4078..b8501f3a 100644
--- a/app/components/organisms/DiscountInput.tsx
+++ b/app/components/organisms/DiscountInput.tsx
@@ -6,6 +6,7 @@ import {
   useState,
 } from "react";
 import type { WithId } from "~/lib/typeguard";
+import { cn } from "~/lib/utils";
 import { OrderEntity } from "~/models/order";
 import { useFocusRef } from "../functional/useFocusRef";
 import { ThreeDigitsInput } from "../molecules/ThreeDigitsInput";
@@ -74,7 +75,7 @@ const DiscountInput = ({
           />
         </div>
       </div>
-      <p>
+      <div className="flex flex-col items-center gap-5">
         {!isComplete && (
           <div className="flex items-center">
             {/* <ExclamationTriangleIcon className="mr-1 stroke-stone-400" /> */}
@@ -83,20 +84,36 @@ const DiscountInput = ({
         )}
         {isComplete &&
           (discountOrder instanceof OrderEntity ? (
-            <div className="flex items-center">
-              <CheckCircledIcon className="mr-1 h-5 w-5 stroke-green-700" />
-              <p className="flex items-center">
-                <span className="mr-1 text-lg">{lastPurchasedCups}</span>
-                杯分
-              </p>
-            </div>
+            <>
+              <div className="flex items-center">
+                <CheckCircledIcon className="mr-1 h-5 w-5 stroke-green-700" />
+                <p className="flex items-center">
+                  <span className="mr-1 text-lg">{lastPurchasedCups}</span>
+                  杯分
+                </p>
+              </div>
+              <ul className="list-disc pl-4">
+                {discountOrder.items.map((item, idx) => (
+                  <li
+                    key={`${idx}-${item.id}`}
+                    className={cn(
+                      "text-sm text-stone-600",
+                      (item.type === "milk" || item.type === "others") &&
+                        "text-stone-400",
+                    )}
+                  >
+                    {item.name}
+                  </li>
+                ))}
+              </ul>
+            </>
           ) : (
             <div className="flex items-center">
               <CrossCircledIcon className="mr-1 h-5 w-5 stroke-red-700" />
               <p className="flex items-center">無効な番号</p>
             </div>
           ))}
-      </p>
+      </div>
     </div>
   );
 };