🎨 styles: shipping method

:%s

src/components/common/CheckoutCollapse/CheckoutCollapse.tsx

@@ -8,7 +8,7 @@ interface CheckoutCollapseProps {
   children: React.ReactNode
   title: string
   isEdit: boolean
-  onClose?: (id: number) => void
+  onClose: (id: number) => void
   onOpen?: (id: number) => void
   onEditClick?: (id: number) => void
   note?: string
@@ -29,7 +29,7 @@ const CheckoutCollapse = ({
 }: CheckoutCollapseProps) => {
   const handleToggle = () => {
     if (visible) {
-      onClose && onClose(id)
+      isEdit && onClose(id)
     } else if (!disableEdit) {
       isEdit && onEditClick && onEditClick(id)
     }

src/components/modules/checkout/CheckoutBill/FormPromotionCode/FormPromotionCode.tsx

@@ -66,7 +66,7 @@ const FormPromotionCode = () => {
 
                                     <InputFiledInForm
                                         name="couponCode"
-                                        placeholder="Coupon code"
+                                        placeholder="Promotion code"
                                         error={
                                             touched.couponCode && errors.couponCode
                                                 ? errors.couponCode.toString()

src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethod.tsx

@@ -62,6 +62,7 @@ const ShippingMethod = memo(({ currency, onConfirm }: Props) => {
             name={item.name}
             price={item.price}
             currency={currency}
+            isActive={selectedValue?.id === item.id}
             onSelect={onChange}
           />)}
         </ul>

src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethodItem/ShippingMethodItem.module.scss

@@ -1,12 +1,18 @@
 .shippingMethodItem {
-    @apply flex justify-between items-center cursor-pointer transition-all duration-200;
+    @apply w-full flex justify-between items-center cursor-pointer transition-all duration-200;
-    width: 100%;
     padding: 1.6rem;
     &:hover {
         @apply bg-gray;
     }
     .left {
         @apply flex;
+        .icon {
+            @apply transition-all duration-200;
+            opacity: 0;
+            &.show {
+                opacity: 1;
+            }
+        }
         .name {
             margin-left: 1.6rem;
             color: var(--text-active);

src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethodItem/ShippingMethodItem.tsx

@@ -1,4 +1,6 @@
+import classNames from 'classnames'
 import React, { memo } from 'react'
+import { IconCheck } from 'src/components/icons'
 import s from './ShippingMethodItem.module.scss'
 
 interface Props {
@@ -7,16 +9,23 @@ interface Props {
   price: number
   currency: string
   onSelect: (id: string) => void
+  isActive: boolean
+
 }
 
-const ShippingMethodItem = memo(({ id, name, price, currency, onSelect }: Props) => {
+const ShippingMethodItem = memo(({ id, name, price, currency, isActive, onSelect }: Props) => {
   const handleSelect = () => {
     onSelect(id)
   }
   return (
     <li className={s.shippingMethodItem} key={id} onClick={handleSelect}>
-      <div className={s.name}>
+      <div className={s.left}>
-        {name}
+        <div className={classNames(s.icon, { [s.show]: isActive })}>
+          <IconCheck />
+        </div>
+        <div className={s.name}>
+          {name}
+        </div>
       </div>
       <div className={s.price}>
         {price ? `${price / 100} ${currency}` : "Free"}