feat: 놀 파트너 쿠폰 신규 추가

packages/tds-widget/src/chat/bubble/bubble.stories.tsx

@@ -18,6 +18,8 @@ import {
   RichBubble,
   TextBubble,
   NolCouponContentBubble,
+  NolCouponButtonBubble,
+  NolCouponContentPartnerBubble,
 } from './index'
 
 export default {
@@ -114,7 +116,67 @@ export const NolCouponContent = {
       type: 'random',
     },
     id: 'coupon_bubble',
-    onDownloadClick: (coupon: CouponItem) => {
+    onClick: (coupon: CouponItem) => {
+      alert(`쿠폰 코드 ${coupon.code} 다운로드`)
+    },
+  },
+}
+
+export const NolCouponButton = {
+  render: (args: CouponBubbleProp) => (
+    <NolThemeProvider theme={NOL_COLOR}>
+      <NolCouponButtonBubble {...args} />
+    </NolThemeProvider>
+  ),
+  args: {
+    coupon: {
+      name: '빨리 예약하세요~ 오늘까지만 사용 가능한 쿠폰~',
+      discount: {
+        type: 'AMOUNT',
+        value: 5000,
+        maxDiscountAmount: 5000,
+      },
+      period: {
+        startAt: '2025-05-23T00:00:00+09:00',
+        endAt: '2035-05-24T00:00:00+09:00',
+      },
+      code: 'X9XWCGGM58N9A499',
+      propertyId: '10003136',
+      propertyName: '오즈 모텔',
+      type: 'random',
+    },
+    id: 'coupon_bubble',
+    onClick: (coupon: CouponItem) => {
+      alert(`쿠폰 코드 ${coupon.code} 다운로드`)
+    },
+  },
+}
+
+export const NolCouponPartnerContent = {
+  render: (args: CouponBubbleProp) => (
+    <NolThemeProvider theme={NOL_COLOR}>
+      <NolCouponContentPartnerBubble {...args} />
+    </NolThemeProvider>
+  ),
+  args: {
+    coupon: {
+      name: '신규 고객 쿠폰',
+      discount: {
+        type: 'AMOUNT',
+        value: 5000,
+        maxDiscountAmount: 5000,
+      },
+      period: {
+        startAt: '2025-05-23T00:00:00+09:00',
+        endAt: '2035-05-24T00:00:00+09:00',
+      },
+      code: 'X9XWCGGM58N9A499',
+      propertyId: '10003136',
+      propertyName: 'NOL 호텔',
+      type: 'partner',
+    },
+    id: 'coupon_bubble',
+    onClick: (coupon: CouponItem) => {
       alert(`쿠폰 코드 ${coupon.code} 다운로드`)
     },
   },

packages/tds-widget/src/chat/bubble/index.ts

@@ -2,7 +2,11 @@ export { ImageBubble } from './image'
 export { TextBubble } from './text'
 export { RichBubble } from './rich'
 export { ProductBubble } from './product'
-export { NolCouponContentBubble } from './nol/coupon'
+export {
+  NolCouponContentBubble,
+  NolCouponButtonBubble,
+  NolCouponContentPartnerBubble,
+} from './nol/coupon'
 export { Badge, ProductName, ProductImage, ProductHr } from './elements'
 export { default as BubbleUI } from './bubble-ui'
 export { ALTERNATIVE_TEXT_MESSAGE } from './constants'

packages/tds-widget/src/chat/bubble/nol/bubble-ui.tsx

@@ -1,11 +1,16 @@
 import { CouponBubbleProp } from '../type'
 import { BubbleUIPropBase, BubbleUIProps } from '../bubble-ui'
 
-import { NolCouponButtonBubble, NolCouponContentBubble } from './coupon'
+import {
+  NolCouponButtonBubble,
+  NolCouponContentBubble,
+  NolCouponContentPartnerBubble,
+} from './coupon'
 
 export const NolBubbleTypeArray = [
   'nol-coupon-content',
   'nol-coupon-button',
+  'nol-coupon-content-partner',
 ] as const
 
 export type NolBubbleType = (typeof NolBubbleTypeArray)[number]
@@ -20,9 +25,15 @@ export interface NolCouponButtonBubbleUIProp extends BubbleUIPropBase {
   value: Pick<CouponBubbleProp, 'coupon'>
 }
 
+export interface NolCouponContentPartnerBubbleUIProp extends BubbleUIPropBase {
+  type: 'nol-coupon-content-partner'
+  value: Pick<CouponBubbleProp, 'coupon'>
+}
+
 export type NolBubbleUIProps =
   | NolCouponContentBubbleUIProp
   | NolCouponButtonBubbleUIProp
+  | NolCouponContentPartnerBubbleUIProp
 
 export function isNolBubbleType(type: string): type is NolBubbleType {
   return NolBubbleTypeArray.includes(type as NolBubbleType)
@@ -57,6 +68,16 @@ export default function NolBubbleUI({
           {...props}
         />
       )
+    case 'nol-coupon-content-partner':
+      return (
+        <NolCouponContentPartnerBubble
+          id={id}
+          my={my}
+          coupon={value.coupon}
+          onClick={onCouponBubbleClick}
+          {...props}
+        />
+      )
     default:
       throw new Error('지원하지 않는 메시지 타입입니다.')
   }

packages/tds-widget/src/chat/bubble/nol/coupon.tsx

@@ -1,11 +1,13 @@
 import { styled } from 'styled-components'
 import { format, isAfter, subMinutes } from 'date-fns'
 import { formatNumber } from '@titicaca/view-utilities'
-import { Button, Text } from '@titicaca/tds-ui'
+import { Button, FlexBox, Text } from '@titicaca/tds-ui'
 
 import { CouponBubbleProp } from '../type'
 import { ButtonBubble } from '../button'
 
+import { nolBackgroundColor } from './styles'
+
 const CouponContainer = styled.div<{ valid: boolean }>`
   display: inline-flex;
   border-radius: 14px;
@@ -75,6 +77,75 @@ const Badge = styled.div<{ valid: boolean }>`
     valid ? '#F5F6FF' : 'rgba(0, 0, 0, 0.2)'};
 `
 
+const PartnerBadge = styled(Badge)<{ valid: boolean }>`
+  margin-bottom: 0;
+  font-size: 10px;
+  line-height: 20px;
+  color: #6e6f73;
+  background-color: #f2f3f7;
+  opacity: ${({ valid }) => (valid ? 1 : 0.5)};
+`
+
+const CouponTitle = styled(Text).attrs({
+  size: 13,
+  bold: true,
+  lineHeight: '16px',
+})`
+  color: #1b1c1f;
+`
+
+const CouponPrice = styled(Text).attrs({
+  size: 32,
+  bold: true,
+  lineHeight: '38px',
+  margin: { bottom: 12 },
+})`
+  color: #1b1c1f;
+`
+
+const CouponPropertyText = styled(Text).attrs({
+  size: 12,
+  lineHeight: '14px',
+})`
+  color: #6e6f73;
+  font-weight: 400;
+`
+
+const CouponContainerWithNotch = styled.button<{ valid: boolean }>`
+  --border-color: ${({ valid }) => (valid ? '#dfe2ff' : '#e9eaef')};
+
+  width: 254px;
+  height: 142px;
+  background: white;
+  border-radius: 20px;
+  border: 2px solid var(--border-color);
+  text-align: left;
+  position: relative;
+
+  &::before {
+    content: '';
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: 50%;
+    right: -22px;
+    transform: translate(-50%, -50%) rotate(225deg);
+    border-radius: 50%;
+    border: 2px solid transparent;
+    border-top-color: var(--border-color);
+    border-right-color: var(--border-color);
+    background-color: ${nolBackgroundColor};
+  }
+
+  > div {
+    padding: 18px;
+  }
+
+  ${CouponTitle}, ${CouponPrice}, ${CouponPropertyText} {
+    color: ${({ valid }) => !valid && 'rgba(0, 0, 0, 0.30)'};
+  }
+`
+
 export function NolCouponContentBubble({ coupon, onClick }: CouponBubbleProp) {
   const valid = isAfter(new Date(coupon.period.endAt), new Date())
   return (
@@ -162,3 +233,41 @@ export function NolCouponButtonBubble({
     />
   )
 }
+
+export function NolCouponContentPartnerBubble({
+  coupon,
+  onClick,
+}: CouponBubbleProp) {
+  const valid = isAfter(new Date(coupon.period.endAt), new Date())
+
+  return (
+    <CouponContainerWithNotch
+      valid={valid}
+      onClick={() => valid && onClick?.(coupon, 'download')}
+    >
+      <div>
+        <FlexBox
+          flex
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <CouponTitle>{coupon.name}</CouponTitle>
+          <PartnerBadge valid={valid}>중복사용가능</PartnerBadge>
+        </FlexBox>
+        <CouponPrice>{formatNumber(coupon.discount.value)}원</CouponPrice>
+        <CouponPropertyText css={{ marginBottom: '4px' }}>
+          {valid
+            ? `${format(
+                subMinutes(new Date(coupon.period.endAt), 1),
+                'yyyy.MM.dd(HH:mm)',
+              )}까지 사용`
+            : '사용 기간 만료'}
+        </CouponPropertyText>
+        <CouponPropertyText maxLines={1}>
+          {coupon.propertyName}
+        </CouponPropertyText>
+      </div>
+    </CouponContainerWithNotch>
+  )
+}

packages/tds-widget/src/chat/chat/chat-room-messages/messages.tsx

@@ -113,6 +113,15 @@ function bubbleMessageConverter<T = UserType>(
       },
     ]
   }
+
+  if (message.type === 'coupon' && message.value.coupon.type === 'partner') {
+    return [
+      {
+        ...message,
+        type: 'nol-coupon-content-partner',
+      },
+    ]
+  }
 }
 
 function convertMessages<T = UserType>(