@dotss/tictoccroc 0.6.3 → 0.7.1

package/dist/shared/components/ChatKit/BotMessage/BotMessage.d.ts

@@ -1,15 +1,27 @@
 import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
-export type BotMessageType = 'MATCHING_SUCCEEDED' | 'TEACHER_INQUIRED' | 'PARENT_CHANGED_OFFER_SCHEDULE' | 'PARENT_CHANGED_MATCHING_SCHEDULE' | 'TEACHER_APPLIED' | 'PARENT_SENT_OFFER' | 'KOK_MATCHING_SUCCEEDED' | 'APPLICATION_MATCHING_SUCCEEDED' | 'ASSIGNMENT_MATCHING_SUCCEEDED' | 'PARENT_REJECTED_APPLICATION' | 'TEACHER_REFUSED_OFFER' | 'PARENT_CANCELED_MATCHING' | 'TEACHER_CANCELED_MATCHING' | 'TEACHER_COMPLETED_CARE' | 'ADMIN_CANCELED_MATCHING';
+export type BotMessageType = 'TEACHER_INQUIRED' | 'PARENT_CHANGED_OFFER_SCHEDULE' | 'PARENT_CHANGED_MATCHING_SCHEDULE' | 'TEACHER_APPLIED' | 'PARENT_SENT_OFFER' | 'KOK_MATCHING_SUCCEEDED' | 'APPLICATION_MATCHING_SUCCEEDED' | 'ASSIGNMENT_MATCHING_SUCCEEDED' | 'PARENT_REJECTED_APPLICATION' | 'TEACHER_REFUSED_OFFER' | 'PARENT_CANCELED_MATCHING' | 'TEACHER_CANCELED_MATCHING' | 'TEACHER_COMPLETED_CARE' | 'ADMIN_CANCELED_MATCHING' | 'AUTO_MATCHING_SUCCEEDED' | 'PLAY_CONTENT_RECOMMENDED' | 'PARENT_REQUESTED_MATCHING_SCHEDULE_CHANGE' | 'TEACHER_ACCEPTED_MATCHING_SCHEDULE_CHANGE' | 'TEACHER_REFUSED_MATCHING_SCHEDULE_CHANGE' | 'MATCHING_SCHEDULE_CHANGE_EXPIRED' | 'ADMIN_CANCELED_OFFER';
 export type BotMessageCtaType = 'MY_CLASS_CHECK' | 'OFFER_CHECK' | 'CHANGE_INFO_CHECK' | 'MY_APPLICATION_INFO_VIEW' | 'CARE_NOTE_CHECK' | 'TEACHER_SELECTION' | 'PLAY_CONTENT_EXPLORE';
 export type BotMessageCtaTargetTable = 'OFFER' | 'MATCHING';
 export type BotMessageSubCtaTargetTable = 'OFFER' | 'MATCHING';
 export interface BotMessageOffer {
     careStartDate: string;
     careStartTime: string;
-    careEndTime: string;
     firstCareType: string;
     secondCareType: string;
     totalCareCount: number;
+    representativeChildName?: string | null;
+    childCount?: number | null;
+}
+export interface BotMessageMatching {
+    careStartDate?: string | null;
+    careStartTime?: string | null;
+    changeReqDate?: string | null;
+    changeReqStartTime?: string | null;
+    changeReqEndTime?: string | null;
+    firstCareType?: string | null;
+    secondCareType?: string | null;
+    representativeChildName?: string | null;
+    childCount?: number | null;
 }
 export interface BotMessageProps extends Omit<FlexboxProps, 'id' | 'title'> {
     id: string | number;
@@ -21,10 +33,12 @@ export interface BotMessageProps extends Omit<FlexboxProps, 'id' | 'title'> {
     subCtaTargetId?: number | null;
     mine: boolean;
     avatarUrl?: string;
-    title: string;
+    title?: string | null;
     content: string;
     unreadUserCount: number;
-    offer: object | null;
+    offer: BotMessageOffer | null;
+    matchings?: BotMessageMatching[] | null;
+    botMessageHeaderImageUrl?: string | null;
     regDatetime: string;
     onAction?: (params: {
         botMessageType: BotMessageType;
@@ -36,5 +50,5 @@ export interface BotMessageProps extends Omit<FlexboxProps, 'id' | 'title'> {
     }) => void;
     onView?: () => void;
 }
-declare function BotMessage({ id, botMessageType, ctaType, ctaTargetId, ctaTargetTable, subCtaTargetTable, subCtaTargetId, mine, avatarUrl, title, content, unreadUserCount, offer, regDatetime, onAction, onView, inlineCSS, ...props }: BotMessageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BotMessage({ id, botMessageType, ctaType, ctaTargetId, ctaTargetTable, subCtaTargetTable, subCtaTargetId, mine, avatarUrl, title, content, unreadUserCount, offer, matchings, botMessageHeaderImageUrl, regDatetime, onAction, onView, inlineCSS, ...props }: BotMessageProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default BotMessage;

package/dist/shared/components/ChatKit/BotMessage/BotMessage.mjs

@@ -1,152 +1,142 @@
 import e from "../../../hooks/useInView/index.mjs";
 import t from "../../Image/index.mjs";
-import n from "../../../utils/getCareTypeLabel/index.mjs";
-import { getClassInfo as r, getCtaButtonText as i } from "./BotMessage.utils.mjs";
-import { useEffect as a, useRef as o } from "react";
-import { Button as s, Flexbox as c, Typography as l } from "@dotss/ui";
-import u from "@dotss/ui/core/useTheme";
-import d from "dayjs";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { getClassInfo as n, getCtaButtonText as r } from "./BotMessage.utils.mjs";
+import { useEffect as i, useRef as a } from "react";
+import { Button as o, Flexbox as s, Typography as c } from "@dotss/ui";
+import l from "@dotss/ui/core/useTheme";
+import u from "dayjs";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region shared/components/ChatKit/BotMessage/BotMessage.tsx
-function m({ id: m, botMessageType: h, ctaType: g, ctaTargetId: _, ctaTargetTable: v, subCtaTargetTable: y, subCtaTargetId: b, mine: x, avatarUrl: S, title: C, content: w, unreadUserCount: T, offer: E, regDatetime: D, onAction: O, onView: k, inlineCSS: A, ...j }) {
-	let { palette: { brand: M, grey: N, background: P }, spacing: F } = u(), I = o(null), { isInView: L } = e(I), R = i(g), z = E, B = [n(z?.firstCareType), n(z?.secondCareType)].filter(Boolean).filter((e) => e !== "-").join("+"), V = r(z), H = () => O?.({
-		botMessageType: h,
-		ctaType: g,
-		ctaTargetId: _,
-		ctaTargetTable: v,
-		subCtaTargetTable: y,
-		subCtaTargetId: b
+function p({ id: p, botMessageType: m, ctaType: h, ctaTargetId: g, ctaTargetTable: _, subCtaTargetTable: v, subCtaTargetId: y, mine: b, avatarUrl: x, title: S, content: C, unreadUserCount: w, offer: T, matchings: E, botMessageHeaderImageUrl: D, regDatetime: O, onAction: k, onView: A, inlineCSS: j, ...M }) {
+	let { palette: { brand: N, grey: P }, spacing: F } = l(), I = a(null), { isInView: L } = e(I), R = r(h), z = n({
+		offer: T,
+		matchings: E,
+		botMessageType: m
+	}), B = () => k?.({
+		botMessageType: m,
+		ctaType: h,
+		ctaTargetId: g,
+		ctaTargetTable: _,
+		subCtaTargetTable: v,
+		subCtaTargetId: y
 	});
-	return a(() => {
-		L && k?.();
-	}, [L, k]), /* @__PURE__ */ p(c, {
+	return i(() => {
+		L && A?.();
+	}, [L, A]), /* @__PURE__ */ f(s, {
 		ref: I,
 		alignItems: "flex-end",
 		justifyContent: "flex-end",
 		gap: 1,
 		pl: 4,
 		pr: 4,
-		flexDirection: x ? "row" : "row-reverse",
-		...j,
+		flexDirection: b ? "row" : "row-reverse",
+		...M,
 		inlineCSS: {
 			overflowAnchor: "none",
-			...A
+			...j
 		},
 		children: [
-			/* @__PURE__ */ f(l, {
+			/* @__PURE__ */ d(c, {
 				visuallyHidden: !0,
 				children: "안내"
 			}),
-			/* @__PURE__ */ p(c, {
+			/* @__PURE__ */ f(s, {
 				flexDirection: "column",
-				alignItems: x ? "flex-end" : "flex-start",
+				alignItems: b ? "flex-end" : "flex-start",
 				inlineCSS: { whiteSpace: "nowrap" },
-				children: [x && T > 0 && /* @__PURE__ */ f(l, {
+				children: [b && w > 0 && /* @__PURE__ */ d(c, {
 					tag: "span",
 					variant: "c5B",
 					"aria-hidden": !0,
-					inlineCSS: { color: M.primary.text },
-					children: T
-				}), /* @__PURE__ */ f(l, {
+					inlineCSS: { color: N.primary.text },
+					children: w
+				}), /* @__PURE__ */ d(c, {
 					tag: "span",
 					variant: "c5R",
 					color: "etc.dimmed01",
 					"aria-hidden": !0,
 					inlineCSS: { whiteSpace: "nowrap" },
-					children: d(D).format("A h:mm")
+					children: u(O).format("A h:mm")
 				})]
 			}),
-			/* @__PURE__ */ p(c, {
+			/* @__PURE__ */ f(s, {
 				alignItems: "flex-start",
-				flexDirection: x ? "row-reverse" : "row",
-				gap: 3,
-				p: 4,
+				gap: 2,
 				"aria-hidden": !0,
-				inlineCSS: {
-					backgroundColor: N.white,
-					borderRadius: 12,
-					border: `1px solid ${N[20]}`
-				},
-				children: [S && /* @__PURE__ */ f(t, {
-					src: S,
+				children: [x && /* @__PURE__ */ d(t, {
+					src: x,
 					width: 32,
 					height: 32,
 					alt: "째깍악어 선생님 심볼",
 					role: "presentation"
-				}), /* @__PURE__ */ p(c, {
+				}), /* @__PURE__ */ f(s, {
 					flexDirection: "column",
-					children: [
-						/* @__PURE__ */ f(l, {
-							tag: "p",
-							variant: "h4B",
-							children: C
-						}),
-						w && /* @__PURE__ */ f(l, {
-							tag: "p",
-							variant: "b3R",
-							inlineCSS: { marginTop: F.content(1) },
-							children: w
-						}),
-						V && /* @__PURE__ */ p(c, {
-							mt: 2,
-							p: 2,
-							flexDirection: "column",
-							inlineCSS: {
-								borderRadius: F.content(2),
-								backgroundColor: P.primary
-							},
-							children: [
-								/* @__PURE__ */ p(l, {
-									tag: "dl",
-									children: [/* @__PURE__ */ f(l, {
+					inlineCSS: {
+						width: 240,
+						backgroundColor: P.white,
+						borderRadius: 12,
+						border: `1px solid ${P[20]}`,
+						overflow: "hidden"
+					},
+					children: [D && /* @__PURE__ */ d(t, {
+						src: D,
+						width: 240,
+						height: 120,
+						withIntrinsicRatio: !0,
+						disabledResizing: !0,
+						enableFallback: !0,
+						alt: "봇 메시지 안내 이미지",
+						role: "presentation"
+					}), /* @__PURE__ */ f(s, {
+						p: 4,
+						flexDirection: "column",
+						children: [
+							S && /* @__PURE__ */ d(c, {
+								tag: "p",
+								variant: "h4B",
+								children: S
+							}),
+							C && /* @__PURE__ */ d(c, {
+								tag: "p",
+								variant: "b2R",
+								inlineCSS: { marginTop: S ? F.content(1) : void 0 },
+								children: C
+							}),
+							z.length > 0 && /* @__PURE__ */ d(c, {
+								tag: "dl",
+								inlineCSS: { marginTop: F.content(6) },
+								children: z.map((e) => /* @__PURE__ */ f(c, {
+									tag: "div",
+									variant: "b2R",
+									children: [/* @__PURE__ */ d(c, {
 										tag: "dt",
-										visuallyHidden: !0,
-										children: "날짜"
-									}), /* @__PURE__ */ f(l, {
+										visuallyHidden: e.hideLabel,
+										inlineCSS: { display: "inline" },
+										children: e.hideLabel ? e.label : `■ ${e.label} : `
+									}), /* @__PURE__ */ d(c, {
 										tag: "dd",
-										variant: "b4M",
-										children: V.dateRangeText
+										inlineCSS: { display: "inline" },
+										children: e.hideLabel ? `■ ${e.value}` : e.value
 									})]
-								}),
-								/* @__PURE__ */ p(l, {
-									tag: "dl",
-									children: [/* @__PURE__ */ f(l, {
-										tag: "dt",
-										visuallyHidden: !0,
-										children: "시간"
-									}), /* @__PURE__ */ f(l, {
-										tag: "dd",
-										variant: "b4R",
-										color: "grey.70",
-										children: V.timeRangeText
-									})]
-								}),
-								/* @__PURE__ */ p(l, {
-									tag: "dl",
-									children: [/* @__PURE__ */ f(l, {
-										tag: "dt",
-										visuallyHidden: !0,
-										children: "돌봄 유형"
-									}), /* @__PURE__ */ f(l, {
-										tag: "dd",
-										variant: "b4R",
-										color: "grey.70",
-										children: B
-									})]
-								})
-							]
-						}),
-						R && /* @__PURE__ */ f(s, {
-							color: "secondary",
-							onClick: H,
-							inlineCSS: { marginTop: F.content(2) },
-							children: R
-						})
-					]
+								}, e.label))
+							}),
+							R && /* @__PURE__ */ d(o, {
+								onClick: B,
+								inlineCSS: {
+									marginTop: F.content(4),
+									backgroundColor: P[10],
+									color: P[100],
+									"&:hover:not([aria-disabled=\"true\"])": { backgroundColor: P[10] },
+									"&:active:not([aria-disabled=\"true\"])": { backgroundColor: P[10] }
+								},
+								children: R
+							})
+						]
+					})]
 				})]
 			})
 		]
 	});
 }
 //#endregion
-export { m as default };
+export { p as default };

package/dist/shared/components/ChatKit/BotMessage/BotMessage.utils.d.ts

@@ -1,8 +1,13 @@
-import { BotMessageCtaType, BotMessageProps } from '.';
-export declare function getCtaButtonText(ctaType?: BotMessageCtaType | null): "" | "내 수업 확인하기" | "공고 확인하기" | "변경내용 확인하기" | "나의 지원 내역 보러가기" | "돌봄노트 확인하기" | "선생님 선택하러 가기" | "놀이콘텐츠 둘러보기";
-export declare function getClassInfo(offer: object): {
-    dateRangeText: string;
-    timeRangeText: string;
-    careType: string;
-} | null;
-export declare function getBotMessageLabel({ title, content, offer, regDatetime }: Pick<BotMessageProps, 'title' | 'content' | 'offer' | 'regDatetime'>): string;
+import { BotMessageCtaType, BotMessageMatching, BotMessageOffer, BotMessageProps, BotMessageType } from '.';
+export declare function getCtaButtonText(ctaType?: BotMessageCtaType | null): "" | "내 수업 확인하기" | "공고 확인하기" | "변경 내용 확인하기" | "나의 지원 내역 보러가기" | "돌봄노트 확인하기" | "선생님 선택하러 가기" | "놀이콘텐츠 둘러보기";
+export interface ClassInfoLine {
+    label: string;
+    value: string;
+    hideLabel?: boolean;
+}
+export declare function getClassInfo({ offer, matchings, botMessageType }: {
+    offer?: BotMessageOffer | null;
+    matchings?: BotMessageMatching[] | null;
+    botMessageType?: BotMessageType;
+}): ClassInfoLine[];
+export declare function getBotMessageLabel({ title, content, offer, matchings, botMessageType, regDatetime }: Pick<BotMessageProps, 'title' | 'content' | 'offer' | 'matchings' | 'botMessageType' | 'regDatetime'>): string;

package/dist/shared/components/ChatKit/BotMessage/BotMessage.utils.mjs

@@ -1,11 +1,22 @@
 import e from "../../../utils/getCareTypeLabel/index.mjs";
 import t from "dayjs";
 //#region shared/components/ChatKit/BotMessage/BotMessage.utils.ts
-function n(e) {
+var n = "아이이름", r = "돌봄종류", i = "방문일시", a = "기존 수업시간", o = "변경 수업시간", s = {
+	TEACHER_APPLIED: "NONE",
+	PARENT_SENT_OFFER: "NONE",
+	PLAY_CONTENT_RECOMMENDED: "NONE",
+	PARENT_REJECTED_APPLICATION: "NONE",
+	TEACHER_REFUSED_OFFER: "NONE",
+	PARENT_REQUESTED_MATCHING_SCHEDULE_CHANGE: "NONE",
+	TEACHER_REFUSED_MATCHING_SCHEDULE_CHANGE: "ORIGINAL_ONLY",
+	MATCHING_SCHEDULE_CHANGE_EXPIRED: "ORIGINAL_ONLY",
+	TEACHER_ACCEPTED_MATCHING_SCHEDULE_CHANGE: "ORIGINAL_AND_CHANGED"
+};
+function c(e) {
 	switch (e) {
 		case "MY_CLASS_CHECK": return "내 수업 확인하기";
 		case "OFFER_CHECK": return "공고 확인하기";
-		case "CHANGE_INFO_CHECK": return "변경내용 확인하기";
+		case "CHANGE_INFO_CHECK": return "변경 내용 확인하기";
 		case "MY_APPLICATION_INFO_VIEW": return "나의 지원 내역 보러가기";
 		case "CARE_NOTE_CHECK": return "돌봄노트 확인하기";
 		case "TEACHER_SELECTION": return "선생님 선택하러 가기";
@@ -13,21 +24,59 @@ function n(e) {
 		default: return "";
 	}
 }
-function r(n) {
-	let r = n;
-	if (!r) return null;
-	let i;
-	i = r.totalCareCount > 1 ? `${t(r.careStartDate).format("M월 D일(ddd)")}부터 / 총 ${r.totalCareCount}회` : t(r.careStartDate).format("M월 D일(ddd)");
-	let a = t(`${r.careStartDate} ${r.careStartTime}`).format("A h:mm"), o = t(`${r.careStartDate} ${r.careEndTime}`).format("A h:mm");
-	return {
-		dateRangeText: i,
-		timeRangeText: `${a} ~ ${o}`,
-		careType: e(r.firstCareType)
-	};
+function l({ offer: t, matchings: a, botMessageType: o }) {
+	let c = a?.[0] ?? t ?? null;
+	if (!c) return [];
+	let l = o ? s[o] : void 0;
+	if (l === "NONE") return [];
+	if (l === "ORIGINAL_ONLY") return u(c);
+	if (l === "ORIGINAL_AND_CHANGED") return d(c);
+	let f = a?.length ? a.length : t?.totalCareCount ?? 1, m = [];
+	if (c.careStartDate && c.careStartTime) {
+		let e = p(c.careStartDate, c.careStartTime), t = f > 1 ? ` 외 ${f - 1}건` : "";
+		m.push({
+			label: i,
+			value: `${e}${t}`
+		});
+	}
+	if (c.representativeChildName) {
+		let e = c.childCount ?? 1, t = e > 1 ? ` 외 ${e - 1}명` : "";
+		m.push({
+			label: n,
+			value: `${c.representativeChildName}${t}`
+		});
+	}
+	let h = [e(c.firstCareType), e(c.secondCareType)].filter(Boolean).join("+");
+	return h && m.push({
+		label: r,
+		value: h,
+		hideLabel: !0
+	}), m;
 }
-function i({ title: e, content: n, offer: i, regDatetime: a }) {
-	let o = r(i);
-	return `안내, ${e}, ${n ? `${n}, ` : ""}${o ? `${o.dateRangeText}, ${o.timeRangeText}, ${o.careType}, ` : ""}${t(a).format("YYYY년 MM월 DD일 A h:mm")}`;
+var u = (e) => {
+	let t = [];
+	return f(t, a, e.careStartDate, e.careStartTime), t;
+}, d = (e) => {
+	let t = [];
+	return f(t, a, e.changeReqDate, e.changeReqStartTime), f(t, o, e.careStartDate, e.careStartTime), t;
+}, f = (e, t, n, r) => {
+	n && r && e.push({
+		label: t,
+		value: p(n, r)
+	});
+}, p = (e, n) => t(`${e} ${n}`).format("YYYY-MM-DD HH:mm");
+function m({ title: e, content: n, offer: r, matchings: i, botMessageType: a, regDatetime: o }) {
+	return [
+		"안내",
+		e,
+		n,
+		l({
+			offer: r,
+			matchings: i,
+			botMessageType: a
+		}).map((e) => `${e.label} ${e.value}`).join(", "),
+		t(o).format("YYYY년 MM월 DD일 A h:mm")
+	].filter(Boolean).join(", ");
 }
 //#endregion
-export { i as getBotMessageLabel, r as getClassInfo, n as getCtaButtonText };
+export { m as getBotMessageLabel, l as getClassInfo, c as getCtaButtonText };

package/dist/shared/components/ChatKit/BotMessage/BotMessage.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/shared/components/ChatKit/BotMessage/index.d.ts

@@ -1,4 +1,4 @@
-import { default as BotMessage, BotMessageCtaTargetTable, BotMessageCtaType, BotMessageOffer, BotMessageProps, BotMessageSubCtaTargetTable, BotMessageType } from './BotMessage';
+import { default as BotMessage, BotMessageCtaTargetTable, BotMessageCtaType, BotMessageMatching, BotMessageOffer, BotMessageProps, BotMessageSubCtaTargetTable, BotMessageType } from './BotMessage';
 export { getClassInfo, getCtaButtonText, getBotMessageLabel } from './BotMessage.utils';
-export type { BotMessageProps, BotMessageCtaType, BotMessageType, BotMessageOffer, BotMessageSubCtaTargetTable, BotMessageCtaTargetTable };
+export type { BotMessageProps, BotMessageCtaType, BotMessageType, BotMessageOffer, BotMessageMatching, BotMessageSubCtaTargetTable, BotMessageCtaTargetTable };
 export default BotMessage;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotss/tictoccroc",
   "type": "module",
-  "version": "0.6.3",
+  "version": "0.7.1",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",