diff --git a/src/components/common/CheckoutCollapse/CheckoutCollapse.tsx b/src/components/common/CheckoutCollapse/CheckoutCollapse.tsx index 0c9bcee9a..38314c8cc 100644 --- a/src/components/common/CheckoutCollapse/CheckoutCollapse.tsx +++ b/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) } diff --git a/src/components/modules/checkout/CheckoutBill/FormPromotionCode/FormPromotionCode.tsx b/src/components/modules/checkout/CheckoutBill/FormPromotionCode/FormPromotionCode.tsx index 5fc3c95ee..aaf8f6b32 100644 --- a/src/components/modules/checkout/CheckoutBill/FormPromotionCode/FormPromotionCode.tsx +++ b/src/components/modules/checkout/CheckoutBill/FormPromotionCode/FormPromotionCode.tsx @@ -66,7 +66,7 @@ const FormPromotionCode = () => { { name={item.name} price={item.price} currency={currency} + isActive={selectedValue?.id === item.id} onSelect={onChange} />)} diff --git a/src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethodItem/ShippingMethodItem.module.scss b/src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethodItem/ShippingMethodItem.module.scss index 4aa06484c..9d8526629 100644 --- a/src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethodItem/ShippingMethodItem.module.scss +++ b/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; - width: 100%; + @apply w-full flex justify-between items-center cursor-pointer transition-all duration-200; 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); diff --git a/src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethodItem/ShippingMethodItem.tsx b/src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethodItem/ShippingMethodItem.tsx index 43685e3db..30651168d 100644 --- a/src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethodItem/ShippingMethodItem.tsx +++ b/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 (
  • -
    - {name} +
    +
    + +
    +
    + {name} +
    {price ? `${price / 100} ${currency}` : "Free"}