✨ feat: Add original price display option and enhance inventory messages in subscription components

apps/user/src/sections/subscribe/billing.tsx

@@ -10,6 +10,7 @@ interface SubscribeBillingProps {
       unit_price: number;
       unit_time: string;
       subscribe_discount: number;
+      show_original_price?: boolean;
     }
   >;
 }
@@ -33,7 +34,19 @@ export function SubscribeBilling({ order }: Readonly<SubscribeBillingProps>) {
               {t(order?.unit_time || "Month", order?.unit_time || "Month")}
             </span>
           </li>
-        )}
+        )}{" "}
+        {order?.show_original_price !== false &&
+          order?.type &&
+          [1, 2].includes(order?.type) && (
+            <li>
+              <span className="text-muted-foreground">
+                {t("billing.originalPrice", "Original Price (Monthly)")}
+              </span>
+              <span>
+                <Display type="currency" value={order?.unit_price} />
+              </span>
+            </li>
+          )}{" "}
         <li>
           <span className="text-muted-foreground">
             {t("billing.price", "Price")}

apps/user/src/sections/subscribe/index.tsx

@@ -122,14 +122,39 @@ export default function Subscribe() {
               </CardContent>
               <Separator />
               <CardFooter className="flex flex-col gap-2">
-                <h2 className="pb-8 font-semibold text-2xl sm:text-3xl">
-                  <Display type="currency" value={item.unit_price} />
-                  <span className="font-medium text-base">
-                    /
-                    {unitTimeMap[item.unit_time!] ||
-                      t(item.unit_time || "Month", item.unit_time || "Month")}
-                  </span>
-                </h2>
+                {(() => {
+                  const hasDiscount = item.discount && item.discount.length > 0;
+                  const shouldShowOriginal = item.show_original_price !== false;
+
+                  const displayPrice =
+                    shouldShowOriginal || !hasDiscount
+                      ? item.unit_price
+                      : Math.round(
+                          item.unit_price *
+                            (item.discount?.[0]?.quantity ?? 1) *
+                            ((item.discount?.[0]?.discount ?? 100) / 100)
+                        );
+
+                  const displayQuantity =
+                    shouldShowOriginal || !hasDiscount
+                      ? 1
+                      : (item.discount?.[0]?.quantity ?? 1);
+
+                  const unitTime =
+                    unitTimeMap[item.unit_time!] ||
+                    t(item.unit_time || "Month", item.unit_time || "Month");
+
+                  return (
+                    <h2 className="pb-8 font-semibold text-2xl sm:text-3xl">
+                      <Display type="currency" value={displayPrice} />
+                      <span className="font-medium text-base">
+                        {displayQuantity === 1
+                          ? `/${unitTime}`
+                          : `/${displayQuantity} ${unitTime}`}
+                      </span>
+                    </h2>
+                  );
+                })()}
                 <Button
                   className="absolute bottom-0 w-full rounded-t-none rounded-b-xl"
                   onClick={() => {

apps/user/src/sections/subscribe/purchase.tsx

@@ -127,6 +127,7 @@ export default function Purchase({
                   ...order,
                   quantity: params.quantity,
                   unit_price: subscribe?.unit_price,
+                  show_original_price: subscribe?.show_original_price,
                 }}
               />
             </CardContent>

apps/user/src/sections/subscribe/renewal.tsx

@@ -126,6 +126,7 @@ export default function Renewal({ id, subscribe }: Readonly<RenewalProps>) {
                   ...order,
                   quantity: params.quantity,
                   unit_price: subscribe?.unit_price,
+                  show_original_price: subscribe?.show_original_price,
                 }}
               />
             </CardContent>