# 購物車
## Notification 公告(API)/競標入口/資訊/返回大車

Interface

Notification.propTypes = {
  GA: PropTypes.string,
  notificationType:PropTypes.oneOf(['button', 'a']).isRequired,
  notificationColor:PropTypes.oneOf(['grayLighter']),
  startIcon:PropTypes.oneOf(ICON_NAME),
  text:PropTypes.string,
  link:PropTypes.string,
  endIcon:PropTypes.oneOf(ICON_NAME),
  target:PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
  handleClick:PropTypes.func,
}

Render

<New.Notification
  startIcon=" "
  text="前往競標商品獨立結帳頁面"
  endIcon="arrowLineRight" />

<New.Notification
  startIcon="graphicMegaphone"
  text="24h購物 到貨說明更新公告"
  link="http://"
  endIcon="arrowLineRight"
  isSwiper />

### Notification.js

<a
  id={GA}
  href={link}
  target={target}
  className={('c-notification', { [`c-notification--${notificationColor}`]: false })}
  >
  {startIcon ? <IconFonts variant={startIcon} /> : null}
  <div className="c-notification__text">{text}</div>
  {isSwiper ? (
    // loop items
    <div className="c-notification__list">
      <div className="c-notification__text">{text}</div>
    </div>
  ):(<div className="c-notification__text">{text}</div>) }
  {endIcon ? <IconFonts variant={endIcon} /> : null}
</a>

Events 觸發事件

const handelBiddingButtonClick = () => void

## CheckoutDelivery 配送方式 / 運費

Interface

CheckoutDelivery.propTypes = {
  GA: PropTypes.string,
  children:PropTypes.node,
  handleClick:PropTypes.func,
  text: PropTypes.string,
  link:PropTypes.string,
}

Render
### CheckoutDelivery.js

<New.CheckoutDelivery>
  
  <ListTitle isCheckbox title="配送方式 / 運費" isShowButton={true} buttonText="使用規則" btnType="button" handleClick={handelUseButtonClick}  />
  
  <New.TabList>
    // loop items
    <New.Tab />
  </New.TabList>
  
  <div classname="c-checkoutDelivery__info">
    <ul classname="c-checkoutDelivery__list">
      // loop items
      <map.CheckoutDeliveryItem />
    </ul>
    <div classname="c-checkoutDelivery__notification">
       // loop items
      <New.Notification notificationType="a" notificationColor="grayLighter" startIcon="graphicVender" text={text} link={link} endIcon="arrowLineRight" />
    <div>
  </div>
  
</New.CheckoutDelivery>
    

Interface

CheckoutDeliveryItem.propTypes = {
  GA: PropTypes.string,
  shippingFee: PropTypes.string,
  shippingcost:PropTypes.string,
  addShippingCost:PropTypes.string,
}

Render
### CheckoutDeliveryItem.js

<li classname="c-checkoutDelivery__item">
  <InputLabel>
    <Radio />
    <span classname="c-checkoutDelivery__shippingFee">{shippingFee}</span>
    <span classname="c-checkoutDelivery__shippingcost">{shippingcost}</span>
    <span classname="c-checkoutDelivery__addShippingCost">{addShippingCost}</span>
  </InputLabel>
</li>

### TabList.js

<div classname="o-tabList">
  // loop items
  <New.Tab />
</div>

### tab.js

<a classname="o-tab">{text}</a>

Events 觸發事件

const handelBiddingButtonClick = () => void