loyalty points

web/app/cart/page.js

@@ -74,7 +74,7 @@ function PaymentForm({ clientSecret, totalAmount, onSuccess, onCancel }) {
 }
 
 export default function CartPage() {
-  const { user, loading: authLoading } = useAuth();
+  const { user, loading: authLoading, refreshUser } = useAuth();
   const {
     cart,
     cartLoading,
@@ -373,6 +373,12 @@ export default function CartPage() {
               </div>
             )}
 
+            {user?.role === "CUSTOMER" && (
+              <div className="cart-points-estimate">
+                ⭐ Earn <strong>{Math.floor(parseFloat(cart.totalAmount ?? 0))}</strong> loyalty point{Math.floor(parseFloat(cart.totalAmount ?? 0)) !== 1 ? "s" : ""} with this purchase
+              </div>
+            )}
+
             <div className="cart-coupon-section">
               {cart.couponCode && (
                 <div className="cart-coupon-applied">
@@ -444,6 +450,7 @@ export default function CartPage() {
                   onSuccess={() => {
                     setClientSecret(null);
                     setConfirmed(true);
+                    refreshUser().catch(() => {});
                   }}
                   onCancel={async () => {
                     await cancelCheckout().catch(() => {});

web/app/globals.css

@@ -2413,6 +2413,16 @@ body {
   text-align: center;
 }
 
+.cart-points-estimate {
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  color: #92400e;
+  border-radius: 8px;
+  padding: 0.5rem 0.85rem;
+  font-size: 0.85rem;
+  text-align: center;
+}
+
 .cart-coupon-section {
   display: flex;
   flex-direction: column;

web/app/profile/page.js

@@ -396,6 +396,7 @@ export default function ProfilePage() {
     {label: "Email", value: user.email},
     {label: "Phone", value: user.phone || "N/A"},
     ...(user.storeName ? [{ label: "Store", value: user.storeName }] : []),
+    ...(user.role === "CUSTOMER" ? [{ label: "Loyalty Points", value: user.loyaltyPoints ?? 0 }] : []),
   ];
 
   return (