/cashier-v2 割引への対応

.vscode/settings.json

@@ -4,7 +4,7 @@
   "editor.formatOnSaveMode": "file",
   "editor.codeActionsOnSave": {
     "source.organizeImports.biome": "explicit",
-    "source.fixAll.biome": "explicit",
+    "source.fixAll.biome": "always",
     "source.addMissingImports.ts": "explicit"
   },
   "editor.tabSize": 2,

app/components/ui/input-otp.tsx

@@ -0,0 +1,71 @@
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Dot } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName,
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+));
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+));
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  // biome-ignore lint/a11y/useSemanticElements: <explanation>
+  // biome-ignore lint/a11y/useFocusableInteractive: <explanation>
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

app/models/order.ts

@@ -93,6 +93,22 @@ export class OrderEntity implements Order {
     ) as WithId<OrderEntity>;
   }
 
+  static fromOrderWOId(order: Order): OrderEntity {
+    return new OrderEntity(
+      undefined,
+      order.orderId,
+      order.createdAt,
+      order.servedAt,
+      order.items,
+      order.total,
+      order.orderReady,
+      order.description,
+      order.billingAmount,
+      order.received,
+      DiscountInfoEntity.fromDiscountInfo(order.discountInfo),
+    );
+  }
+
   // --------------------------------------------------
   // getter / setter
   // --------------------------------------------------

app/routes/cashier-v2.tsx

@@ -1,10 +1,16 @@
 import { parseWithZod } from "@conform-to/zod";
 import { type ClientActionFunction, useSubmit } from "@remix-run/react";
+import { REGEXP_ONLY_DIGITS } from "input-otp";
 import { useEffect, useState } from "react";
 import useSWRSubscription from "swr/subscription";
 import { z } from "zod";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "~/components/ui/input-otp";
 import { itemConverter, orderConverter } from "~/firebase/converter";
 import { collectionSub } from "~/firebase/subscription";
 import { stringToJSONSchema } from "~/lib/custom-zod";
@@ -24,17 +30,28 @@ export default function Cashier() {
     "orders",
     collectionSub({ converter: orderConverter }),
   );
-  const [orderItems, setOrderItems] = useState<WithId<ItemEntity>[]>([]);
   const submit = useSubmit();
-  console.log("orders", orders);
+  const [orderItems, setOrderItems] = useState<WithId<ItemEntity>[]>([]);
+  const [received, setReceived] = useState("");
+  const [discountOrderId, setDiscountOrderId] = useState("");
+
+  const discountOrderIdNum = Number(discountOrderId);
+  const discountOrder = orders?.find(
+    (order) => order.orderId === discountOrderIdNum,
+  );
+  const lastPurchasedCups = discountOrder?._getCoffeeCount() ?? 0;
 
   const curOrderId =
     orders?.reduce((acc, cur) => Math.max(acc, cur.orderId), 0) ?? 0;
   const nextOrderId = curOrderId + 1;
   const newOrder = OrderEntity.createNew({ orderId: nextOrderId });
+  const receivedNum = Number(received);
   newOrder.items = orderItems;
-  const [received, setReceived] = useState("");
-  const charge = Number(received) - newOrder.total;
+  newOrder.received = receivedNum;
+  if (discountOrder) {
+    newOrder.applyDiscount(discountOrder);
+  }
+  const charge = newOrder.received - newOrder.billingAmount;
   const chargeView: string | number = charge < 0 ? "不足しています" : charge;
 
   const submitOrder = () => {
@@ -50,6 +67,7 @@ export default function Cashier() {
     );
     setOrderItems([]);
     setReceived("");
+    setDiscountOrderId("");
   };
 
   useEffect(() => {
@@ -78,6 +96,8 @@ export default function Cashier() {
     const handler = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
         setOrderItems([]);
+        setReceived("");
+        setDiscountOrderId("");
       }
     };
     window.addEventListener("keydown", handler);
@@ -118,7 +138,25 @@ export default function Cashier() {
           <h1 className="text-lg">{`No. ${nextOrderId}`}</h1>
           <div className="border-8">
             <p>合計金額</p>
-            <p>{newOrder.total}</p>
+            <p>{newOrder.billingAmount}</p>
+          </div>
+          <div>
+            <p>割引券番号</p>
+            <InputOTP
+              maxLength={3}
+              pattern={REGEXP_ONLY_DIGITS}
+              value={discountOrderId}
+              onChange={(value) => setDiscountOrderId(value)}
+            >
+              <InputOTPGroup />
+              <InputOTPSlot index={0} />
+              <InputOTPSlot index={1} />
+              <InputOTPSlot index={2} />
+            </InputOTP>
+            <p>
+              {discountOrder === undefined ? "見つかりません" : null}
+              {discountOrder && `有効杯数: ${lastPurchasedCups}`}
+            </p>
           </div>
           <Input
             type="number"
@@ -137,6 +175,12 @@ export default function Cashier() {
               </div>
             </div>
           ))}
+          {discountOrder && (
+            <div className="grid grid-cols-2">
+              <p className="font-bold text-lg">割引</p>
+              <div>-&yen;{newOrder.discountInfo.discount}</div>
+            </div>
+          )}
         </div>
       </div>
     </>
@@ -159,8 +203,7 @@ export const clientAction: ClientActionFunction = async ({ request }) => {
   }
 
   const { newOrder } = submission.value;
-  const order = OrderEntity.createNew({ orderId: newOrder.orderId });
-  order.items = newOrder.items;
+  const order = OrderEntity.fromOrderWOId(newOrder);
 
   const savedOrder = await orderRepository.save(order);
 

package.json

@@ -27,6 +27,7 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "firebase": "^10.13.2",
+    "input-otp": "^1.2.4",
     "lodash": "^4.17.21",
     "lucide-react": "0.441.0",
     "react": "^18.3.1",

tailwind.config.js

@@ -66,10 +66,17 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        keyframes: {
+          "caret-blink": {
+            "0%,70%,100%": { opacity: "1" },
+            "20%,50%": { opacity: "0" },
+          },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "caret-blink": "caret-blink 1.25s ease-out infinite",
       },
     },
   },