feat: add DiscountWidget component for applying and validating discount codes

src/components/Componentes/discount-widget.tsx

@@ -97,7 +97,7 @@ export function DiscountWidget({
       <button
         type="button"
         onClick={() => setIsExpanded((prev) => !prev)}
-        className="flex w-full items-center justify-between py-3.5 text-left transition-colors cursor-pointer select-none"
+        className="flex w-full items-center justify-between py-3.5 text-start transition-colors cursor-pointer select-none"
       >
         <div className="flex items-center gap-3">
           {/* Coupon icon */}
@@ -150,11 +150,11 @@ export function DiscountWidget({
       {isExpanded && (
         <div className="pt-1 pb-2 w-full">
           <div
-            className={`flex h-[52px] w-full items-center rounded-[12px] border bg-white px-4 transition-all ${getBorderAndRing()}`}
+            className={`flex h-[52px] w-full items-center gap-3 rounded-[12px] border bg-white px-4 transition-all ${getBorderAndRing()}`}
           >
             <input
               type="text"
-              dir="ltr"
+              dir="auto"
               value={code}
               disabled={discountStatus === "loading" || discountResult !== null}
               onChange={(e) => {
@@ -173,18 +173,18 @@ export function DiscountWidget({
               placeholder={
                 t["Enter discount code..."] || "Enter discount code..."
               }
-              className="h-full flex-1 bg-transparent text-[15px] font-medium text-[#181818] outline-none placeholder:text-[#98A2B3] disabled:opacity-70 min-w-0"
+              className="h-full flex-1 bg-transparent text-[15px] font-medium text-[#181818] outline-none placeholder:text-[#98A2B3] text-start placeholder:text-start disabled:opacity-70 min-w-0"
             />
 
             {discountStatus === "loading" ? (
-              <div className="shrink-0 pl-3">
+              <div className="shrink-0">
                 <div className="size-4.5 animate-spin rounded-full border-2 border-[#F0445B] border-t-transparent" />
               </div>
             ) : discountResult !== null ? (
               <button
                 type="button"
                 onClick={handleClear}
-                className="shrink-0 pl-3 text-[15px] font-semibold text-[#F0445B] hover:opacity-80 transition-opacity cursor-pointer"
+                className="shrink-0 text-[15px] font-semibold text-[#F0445B] hover:opacity-80 transition-opacity cursor-pointer"
               >
                 {t["Clear"] || "Clear"}
               </button>
@@ -192,7 +192,7 @@ export function DiscountWidget({
               <button
                 type="button"
                 onClick={handleApply}
-                className="shrink-0 pl-3 text-[15px] font-semibold text-[#F0445B] hover:opacity-80 transition-opacity cursor-pointer"
+                className="shrink-0 text-[15px] font-semibold text-[#F0445B] hover:opacity-80 transition-opacity cursor-pointer"
               >
                 {t["Apply"] || "Apply"}
               </button>