fixed some bugs

features/cart/components/OrderSummary.tsx

@@ -111,7 +111,6 @@ export default function OrderSummary({
     }
 
     const digitsOnly = input.substring(prefix.length).replace(/\D/g, "");
-
     const limitedDigits = digitsOnly.substring(0, 8);
 
     let formattedPhone = prefix;
@@ -134,15 +133,15 @@ export default function OrderSummary({
   };
 
   return (
-    <Card className="w-full md:w-[380px] p-4 md:p-6 rounded-xl h-fit sticky top-20">
+    <Card className="w-full md:w-[420px] p-8 rounded-lg border border-gray-200 shadow-lg h-fit sticky top-20">
       {/* Customer Information */}
-      <div className="mb-6">
-        <h3 className="text-lg font-semibold mb-3">
+      <div className="mb-8">
+        <h3 className="text-xl font-bold mb-5 text-gray-900">
           {t("customer_information")}
         </h3>
         <div className="space-y-5">
           <div>
-            <Label className="text-sm font-medium mb-2 block">
+            <Label className="text-sm font-semibold mb-2 block text-gray-700">
               {t("name")}
             </Label>
             <Input
@@ -150,16 +149,21 @@ export default function OrderSummary({
               value={name}
               onChange={(e) => onNameChange(e.target.value)}
               placeholder={t("name")}
-              className={`rounded-lg ${
-                showValidation && name.trim() === "" ? "border-red-500" : ""
+              className={`rounded-[10px] h-12 border-2 transition-colors ${
+                showValidation && name.trim() === ""                      
+                  ? "border-red-500"
+                  : "border-gray-200 focus:border-gray-900"
               }`}
             />
             {showValidation && name.trim() === "" && (
-              <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
+              <p className="text-xs text-red-500 mt-2 font-medium">
+                {t("requiredField")}
+              </p>
             )}
           </div>
+
           <div>
-            <Label className="text-sm font-medium mb-2 block">
+            <Label className="text-sm font-semibold mb-2 block text-gray-700">
               {t("last_name")}
             </Label>
             <Input
@@ -167,16 +171,21 @@ export default function OrderSummary({
               value={lastName}
               onChange={(e) => onLastNameChange(e.target.value)}
               placeholder={t("last_name")}
-              className={`rounded-lg ${
-                showValidation && lastName.trim() === "" ? "border-red-500" : ""
+              className={`rounded-[10px] h-12 border-2 transition-colors ${
+                showValidation && lastName.trim() === ""
+                  ? "border-red-500"
+                  : "border-gray-200 focus:border-gray-900"
               }`}
             />
             {showValidation && lastName.trim() === "" && (
-              <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
+              <p className="text-xs text-red-500 mt-2 font-medium">
+                {t("requiredField")}
+              </p>
             )}
           </div>
+
           <div>
-            <Label className="text-sm font-medium mb-2 block">
+            <Label className="text-sm font-semibold mb-2 block text-gray-700">
               {t("phone")}
             </Label>
             <Input
@@ -184,20 +193,24 @@ export default function OrderSummary({
               value={phone}
               onChange={handlePhoneChange}
               placeholder="+993 61 097651"
-              className={`rounded-lg ${
-                showValidation && !isPhoneValid ? "border-red-500" : ""
+              className={`rounded-[10px] h-12 border-2 transition-colors ${
+                showValidation && !isPhoneValid
+                  ? "border-red-500"
+                  : "border-gray-200 focus:border-gray-900"
               }`}
             />
             {showValidation && !isPhoneValid && (
-              <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
+              <p className="text-xs text-red-500 mt-2 font-medium">
+                {t("requiredField")}
+              </p>
             )}
           </div>
         </div>
       </div>
 
       {/* Region Selection */}
-      <div className="mb-6">
-        <Label className="text-lg font-semibold mb-3 block">
+      <div className="mb-8">
+        <Label className="text-xl font-bold mb-4 block text-gray-900">
           {t("choose_region")}
         </Label>
         <RadioGroup
@@ -209,19 +222,19 @@ export default function OrderSummary({
           className="flex flex-wrap gap-4"
         >
           {availableRegions.map((regionCode) => (
-            <div key={regionCode} className="flex items-center space-x-2">
+            <div key={regionCode} className="flex items-center space-x-3">
               <RadioGroupItem
                 value={regionCode}
                 id={`region-${regionCode}`}
-                className={`border-2 ${
+                className={`border-2 h-5 w-5 ${
                   showValidation && !selectedRegion
                     ? "border-red-500"
                     : "border-gray-400"
-                } data-[state=checked]:border-[#005bff] data-[state=checked]:bg-white`}
+                } data-[state=checked]:border-gray-900 data-[state=checked]:bg-gray-900`}
               />
               <Label
                 htmlFor={`region-${regionCode}`}
-                className="cursor-pointer uppercase"
+                className="cursor-pointer uppercase font-semibold text-gray-700 hover:text-gray-900 transition-colors"
               >
                 {regionCode}
               </Label>
@@ -229,14 +242,16 @@ export default function OrderSummary({
           ))}
         </RadioGroup>
         {showValidation && !selectedRegion && (
-          <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
+          <p className="text-xs text-red-500 mt-3 font-medium">
+            {t("requiredField")}
+          </p>
         )}
       </div>
 
       {/* Province Selection */}
       {selectedRegion && provincesForSelectedRegion.length > 0 && (
-        <div className="mb-6">
-          <Label className="text-lg font-semibold mb-3 block">
+        <div className="mb-8">
+          <Label className="text-xl font-bold mb-4 block text-gray-900">
             {t("choose_address")}
           </Label>
           <Select
@@ -244,44 +259,54 @@ export default function OrderSummary({
             onValueChange={(value) => onProvinceChange(parseInt(value))}
           >
             <SelectTrigger
-              className={`rounded-lg w-full ${
-                showValidation && !selectedProvince ? "border-red-500" : ""
+              className={`rounded-[10px] h-12 w-full border-2 font-medium ${
+                showValidation && !selectedProvince
+                  ? "border-red-500"
+                  : "border-gray-200 hover:border-gray-900"
               }`}
             >
               <SelectValue placeholder={t("choose_address")} />
             </SelectTrigger>
-            <SelectContent>
+            <SelectContent className="rounded-lg">
               {provincesForSelectedRegion.map((province) => (
-                <SelectItem key={province.id} value={province.id.toString()}>
+                <SelectItem
+                  key={province.id}
+                  value={province.id.toString()}
+                  className="rounded-lg"
+                >
                   {province.name}
                 </SelectItem>
               ))}
             </SelectContent>
           </Select>
           {showValidation && !selectedProvince && (
-            <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
+            <p className="text-xs text-red-500 mt-3 font-medium">
+              {t("requiredField")}
+            </p>
           )}
         </div>
       )}
 
       {/* Note */}
-      <div className="mb-6">
-        <Label className="text-lg font-semibold mb-3 block">{t("note")}</Label>
+      <div className="mb-8">
+        <Label className="text-xl font-bold mb-4 block text-gray-900">
+          {t("note")}
+        </Label>
         <Textarea
           value={note}
           onChange={(e) => onNoteChange(e.target.value)}
-          className="rounded-xl resize-none"
+          className="rounded-[10px] resize-none border-2 border-gray-200 focus:border-gray-900 transition-colors"
           rows={3}
           placeholder={t("note")}
         />
       </div>
 
       {/* Billing */}
-      <div className="space-y-2 mb-4">
+      <div className="space-y-3 mb-6">
         {order.billing.body.map((item, index) => (
           <div
             key={index}
-            className="flex justify-between text-base font-medium"
+            className="flex justify-between text-base font-semibold text-gray-700"
           >
             <span>{item.title}:</span>
             <span>{item.value}</span>
@@ -289,13 +314,13 @@ export default function OrderSummary({
         ))}
       </div>
 
-      <Separator className="my-4" />
+      <Separator className="my-6 bg-gray-200" />
 
-      <div className="flex justify-between items-center mb-6">
-        <span className="text-lg font-semibold">
+      <div className="flex justify-between items-center mb-8">
+        <span className="text-xl font-bold text-gray-900">
           {order.billing.footer.title}:
         </span>
-        <span className="text-lg font-bold text-green-600">
+        <span className="text-2xl font-bold text-emerald-600">
           {order.billing.footer.value}
         </span>
       </div>
@@ -303,10 +328,17 @@ export default function OrderSummary({
       <Button
         onClick={handleCompleteOrderClick}
         disabled={isLoading}
-        className="w-full rounded-lg cursor-pointer bg-[#005bff] hover:bg-[#004dcc] h-12 text-lg font-bold disabled:opacity-50"
+        className="w-full rounded-[10px] cursor-pointer bg-gradient-to-r from-gray-900 to-gray-800 hover:from-gray-800 hover:to-gray-700 h-14 text-lg font-bold disabled:opacity-50 shadow-md hover:shadow-lg transition-all duration-300"
         size="lg"
       >
-        {isLoading ? `${t("order")}...` : t("order")}
+        {isLoading ? (
+          <div className="flex items-center gap-2">
+            <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+            <span>{t("order")}...</span>
+          </div>
+        ) : (
+          t("order")
+        )}
       </Button>
     </Card>
   );