@messenger-box/property-ext-browser 0.0.1-alpha.187 → 0.0.1-alpha.198

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.0.1-alpha.198](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.197...v0.0.1-alpha.198) (2022-07-30)
+
+**Note:** Version bump only for package @messenger-box/property-ext-browser
+
+
+
+
+
+## [0.0.1-alpha.194](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.193...v0.0.1-alpha.194) (2022-07-16)
+
+**Note:** Version bump only for package @messenger-box/property-ext-browser
+
+
+
+
+
+## [0.0.1-alpha.192](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.191...v0.0.1-alpha.192) (2022-07-15)
+
+
+### Features
+
+* add proeprty ext module with fills based on property types ([9728317](https://github.com/cdmbase/messenger-box/commit/97283176059dca7e4bd78ad4de7bc26ae0492387))
+
+
+
+
+
 ## [0.0.1-alpha.187](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.186...v0.0.1-alpha.187) (2022-07-05)
 
 **Note:** Version bump only for package @messenger-box/property-ext-browser

package/lib/components/InboxMessage/MessageWidgets/MessageAlert.d.ts

@@ -0,0 +1,7 @@
+import { IPost } from '@messenger-box/core';
+export interface IPropertyMessageWidgetProps {
+    message: IPost;
+    index: number;
+}
+export declare const MessageAlert: (props: IPropertyMessageWidgetProps) => JSX.Element;
+//# sourceMappingURL=MessageAlert.d.ts.map

package/lib/components/InboxMessage/MessageWidgets/MessageAlert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageAlert.d.ts","sourceRoot":"","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageAlert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAG5C,MAAM,WAAW,2BAA2B;IACxC,OAAO,EAAE,KAAK,CAAA;IACd,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,UAAW,2BAA2B,gBAuC9D,CAAA"}

package/lib/components/InboxMessage/MessageWidgets/MessageAlert.js

@@ -0,0 +1,16 @@
+import React from'react';import*as Icons from'@chakra-ui/icons';import parse from'html-react-parser';import {useColorModeValue,Stack,Text,Link}from'@chakra-ui/react';const MessageAlert = (props) => {
+    const { message, index } = props;
+    const { attachment } = message.propsConfiguration.contents;
+    const Icon = Icons[attachment.icon];
+    const color = useColorModeValue('white', 'gray.800');
+    const bgColor = useColorModeValue('gray.800', 'white');
+    return (React.createElement(Stack, { key: `${index}`, mt: "4", mb: "10", bgColor: bgColor, padding: 3, margin: 2, opacity: 0.7, borderRadius: 20, direction: ['column', 'row'] },
+        React.createElement(Icon, { w: 6, h: 6, color: color }),
+        React.createElement(Text, { fontSize: "14px", mt: "5px", mb: "5px", whiteSpace: 'pre-line', color: color }, attachment.isTitleHtml ? parse(attachment.title) : attachment === null || attachment === void 0 ? void 0 : attachment.title),
+        attachment.callToAction && (React.createElement(Link, { color: color, mr: "2", style: {
+                textDecoration: 'underline'
+            }, href: attachment.callToAction.link, isExternal: true },
+            attachment.callToAction.title,
+            " ",
+            React.createElement(Icons.ExternalLinkIcon, { mx: "2px" })))));
+};export{MessageAlert};//# sourceMappingURL=MessageAlert.js.map

package/lib/components/InboxMessage/MessageWidgets/MessageAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageAlert.js","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageAlert.tsx"],"sourcesContent":[null],"names":[],"mappings":"sKAYa,MAAA,YAAY,GAAG,CAAC,KAAkC,KAAI;AAC/D,IAAA,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,kBAAkB,CAAC,QAA4D,CAAC;IAC/G,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,KAAK,GAAG,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,iBAAiB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IACvD,QACI,oBAAC,KAAK,EAAA,EACF,GAAG,EAAE,CAAA,EAAG,KAAK,CAAE,CAAA,EACf,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,IAAI,EACP,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,EACV,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,GAAG,EACZ,YAAY,EAAE,EAAE,EAChB,SAAS,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAA;AAE5B,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAG,CAAA;QACjC,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,QAAQ,EAAC,MAAM,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAA,EACvE,UAAU,CAAC,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,UAAU,KAAV,IAAA,IAAA,UAAU,uBAAV,UAAU,CAAE,KAAK,CAClE;AAEH,QAAA,UAAU,CAAC,YAAY,KACnB,KAAA,CAAA,aAAA,CAAC,IAAI,EACD,EAAA,KAAK,EAAE,KAAK,EACZ,EAAE,EAAC,GAAG,EACN,KAAK,EAAE;AACH,gBAAA,cAAc,EAAE,WAAW;aAC9B,EACD,IAAI,EAAE,UAAU,CAAC,YAAY,CAAC,IAAI,EAClC,UAAU,EAAA,IAAA,EAAA;YAET,UAAU,CAAC,YAAY,CAAC,KAAK;;AAAE,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAgB,EAAA,EAAC,EAAE,EAAC,KAAK,EAAA,CAAE,CAC/D,CACV,CAED,EACX;AACL"}

package/lib/components/InboxMessage/MessageWidgets/MessageCard.d.ts

@@ -0,0 +1,7 @@
+import { IPost } from '@messenger-box/core';
+export interface IPropertyCardProps {
+    message: IPost;
+    index: number;
+}
+export declare const MessageCard: (props: IPropertyCardProps) => JSX.Element;
+//# sourceMappingURL=MessageCard.d.ts.map

package/lib/components/InboxMessage/MessageWidgets/MessageCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageCard.d.ts","sourceRoot":"","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageCard.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAG5C,MAAM,WAAW,kBAAkB;IAC/B,OAAO,EAAE,KAAK,CAAA;IACd,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,UAAW,kBAAkB,gBA8HpD,CAAA"}

package/lib/components/InboxMessage/MessageWidgets/MessageCard.js

@@ -0,0 +1,44 @@
+import React from'react';import {startCase}from'lodash';import parse from'html-react-parser';import {useColorModeValue,Box,Image,Heading,Badge,Spacer,Text,Link}from'@chakra-ui/react';import {StarIcon,ExternalLinkIcon}from'@chakra-ui/icons';const MessageCard = (props) => {
+    var _a;
+    const { message, index } = props;
+    const color = useColorModeValue('gray.800', 'white');
+    const { attachment, } = (_a = message.propsConfiguration) === null || _a === void 0 ? void 0 : _a.contents;
+    const { property } = attachment;
+    return (React.createElement(Box, { _hover: {
+            cursor: 'pointer'
+        }, margin: 5, maxW: "xs", borderWidth: "1px", borderRadius: "lg", overflow: "hidden", key: `${index}` },
+        React.createElement(Image, { width: "100%", src: attachment.image, alt: attachment.title }),
+        React.createElement(Box, { marginTop: 4, margin: 2, m: "3" },
+            React.createElement(Box, { mt: "3", lineHeight: "tight", noOfLines: 1 },
+                React.createElement(Heading, { color: color, fontSize: "14px", fontWeight: "semibold", as: "h3" }, attachment.isTitleHtml ? parse(attachment.title) : attachment.title)),
+            property && (React.createElement(Box, { mt: "3", display: "flex" },
+                (property === null || property === void 0 ? void 0 : property.type) && (React.createElement(Box, null,
+                    React.createElement(Badge, { borderRadius: "full", px: "2", colorScheme: "teal" }, startCase(property.type)))),
+                React.createElement(Spacer, null),
+                (property === null || property === void 0 ? void 0 : property.maxPeople) && (React.createElement(Box, { color: "gray.500", fontWeight: "semibold", letterSpacing: "wide", fontSize: "xs", textTransform: "uppercase", ml: "2" },
+                    property.maxPeople,
+                    " Max People")))),
+            React.createElement(Box, { display: "flex", mt: "4", mb: "3", alignItems: "center" }, attachment.isDescriptionHtml ? parse(attachment.description) : (React.createElement(Text, null, attachment.description))),
+            property && (React.createElement(Box, { display: "flex", mb: "4" },
+                (property === null || property === void 0 ? void 0 : property.price) && (React.createElement(Box, { mt: 2 },
+                    property.price,
+                    React.createElement(Box, { as: "span", color: "gray.600", fontSize: "sm" },
+                        "\u00A0/ ",
+                        startCase(property.priceType)))),
+                React.createElement(Spacer, null),
+                React.createElement(Box, { mt: "2", alignItems: "center" },
+                    (property === null || property === void 0 ? void 0 : property.totalReview) && (React.createElement(Box, { as: "span", ml: "2", color: "gray.600", fontSize: "sm", mr: "2" },
+                        property.totalReview,
+                        " reviews")),
+                    (property === null || property === void 0 ? void 0 : property.totalStar) && Array(5)
+                        .fill('')
+                        .map((_, i) => (React.createElement(StarIcon, { key: i, color: i < property.totalStar ? 'teal.500' : 'gray.300' })))))),
+            attachment.callToAction && (React.createElement(Link, { href: attachment.callToAction.link, style: {
+                    cursor: 'pointer'
+                }, _hover: {
+                    cursor: 'pointer'
+                }, isExternal: true },
+                attachment.callToAction.title,
+                " ",
+                React.createElement(ExternalLinkIcon, { mx: "2px" }))))));
+};export{MessageCard};//# sourceMappingURL=MessageCard.js.map

package/lib/components/InboxMessage/MessageWidgets/MessageCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageCard.js","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageCard.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/lib/components/InboxMessage/MessageWidgets/index.d.ts

@@ -0,0 +1,3 @@
+export { MessageCard } from './MessageCard';
+export { MessageAlert } from './MessageAlert';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/InboxMessage/MessageWidgets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/InboxMessage/MessageWidgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/InboxMessage/index.d.ts

@@ -0,0 +1,2 @@
+export { MessageAlert, MessageCard } from './MessageWidgets';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/InboxMessage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InboxMessage/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/index.d.ts

@@ -0,0 +1,2 @@
+export { MessageCard, MessageAlert } from './InboxMessage';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/index.d.ts

@@ -1 +1,2 @@
+export { feature as default } from './module';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/lib/index.js

@@ -1 +1 @@
-//# sourceMappingURL=index.js.map
+export{feature as default}from'./module.js';//# sourceMappingURL=index.js.map

package/lib/interfaces/index.d.ts

@@ -0,0 +1,2 @@
+export { CardMessageAttachmentsInterface, AlertMessageAttachmentsInterface } from './message-widgets.interface';
+//# sourceMappingURL=index.d.ts.map

package/lib/interfaces/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/interfaces/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,+BAA+B,EAAE,gCAAgC,EAAE,MAAM,6BAA6B,CAAC"}

package/lib/interfaces/message-widgets.interface.d.ts

@@ -0,0 +1,13 @@
+import { CardMessageAttachmentsInterface as BaseCardMessageAttachmentsInterface } from '@messenger-box/chakra-ui-inbox';
+export { AlertMessageAttachmentsInterface } from '@messenger-box/chakra-ui-inbox';
+export interface CardMessageAttachmentsInterface extends BaseCardMessageAttachmentsInterface {
+    property: {
+        price: number;
+        priceType: string;
+        type: string;
+        totalStar: number;
+        maxPeople: number;
+        totalReview: number;
+    };
+}
+//# sourceMappingURL=message-widgets.interface.d.ts.map

package/lib/interfaces/message-widgets.interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-widgets.interface.d.ts","sourceRoot":"","sources":["../../src/interfaces/message-widgets.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,+BAA+B,IAAI,mCAAmC,EAAE,MAAM,gCAAgC,CAAC;AAExH,OAAO,EAAE,gCAAgC,EAAE,MAAM,gCAAgC,CAAC;AAElF,MAAM,WAAW,+BAAgC,SAAQ,mCAAmC;IACxF,QAAQ,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,MAAM,CAAC;KACvB,CAAC;CACL"}

package/lib/module.d.ts

@@ -0,0 +1,3 @@
+import { Feature } from '@common-stack/client-react';
+export declare const feature: Feature;
+//# sourceMappingURL=module.d.ts.map

package/lib/module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAIrD,eAAO,MAAM,OAAO,SAWlB,CAAC"}

package/lib/module.js

@@ -0,0 +1,12 @@
+import {Feature}from'@common-stack/client-react';import {IPostTypeEnum}from'@messenger-box/property-ext-core';import {MessageAlertFill}from'./slot-fill/message-alert-fill.js';import {MessageCardFill}from'./slot-fill/message-card-fill.js';const feature = new Feature({
+    componentFillPlugins: [
+        {
+            name: IPostTypeEnum.ALERT.toLowerCase(),
+            render: MessageAlertFill,
+        },
+        {
+            name: IPostTypeEnum.CARD.toLowerCase(),
+            render: MessageCardFill,
+        },
+    ],
+});export{feature};//# sourceMappingURL=module.js.map

package/lib/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sources":["../src/module.ts"],"sourcesContent":[null],"names":[],"mappings":"8OAIa,MAAA,OAAO,GAAG,IAAI,OAAO,CAAC;AAC/B,IAAA,oBAAoB,EAAE;AAClB,QAAA;AACI,YAAA,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,WAAW,EAAE;AACvC,YAAA,MAAM,EAAE,gBAAgB;AAC3B,SAAA;AACD,QAAA;AACI,YAAA,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,WAAW,EAAE;AACtC,YAAA,MAAM,EAAE,eAAe;AAC1B,SAAA;AACJ,KAAA;AACJ,CAAA"}

package/lib/slot-fill/index.d.ts

@@ -0,0 +1,3 @@
+export { MessageAlertFill } from './message-alert-fill';
+export { MessageCardFill } from './message-card-fill';
+//# sourceMappingURL=index.d.ts.map

package/lib/slot-fill/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slot-fill/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/slot-fill/message-alert-fill.d.ts

@@ -0,0 +1,2 @@
+export declare const MessageAlertFill: () => JSX.Element;
+//# sourceMappingURL=message-alert-fill.d.ts.map

package/lib/slot-fill/message-alert-fill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-alert-fill.d.ts","sourceRoot":"","sources":["../../src/slot-fill/message-alert-fill.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,mBAa5B,CAAA"}

package/lib/slot-fill/message-alert-fill.js

@@ -0,0 +1,8 @@
+import React from'react';import {Fill}from'@common-stack/components-pro';import {IPostTypeEnum}from'@messenger-box/property-ext-core';import'lodash';import'html-react-parser';import'@chakra-ui/react';import'@chakra-ui/icons';import {MessageAlert}from'../components/InboxMessage/MessageWidgets/MessageAlert.js';const MessageAlertFill = () => {
+    return (React.createElement(Fill, { name: IPostTypeEnum.ALERT.toLowerCase() }, (props) => {
+        if (props.active) {
+            return (React.createElement(MessageAlert, Object.assign({}, props)));
+        }
+        return null;
+    }));
+};export{MessageAlertFill};//# sourceMappingURL=message-alert-fill.js.map

package/lib/slot-fill/message-alert-fill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-alert-fill.js","sources":["../../src/slot-fill/message-alert-fill.tsx"],"sourcesContent":[null],"names":[],"mappings":"sTAMO,MAAM,gBAAgB,GAAG,MAAK;AACjC,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,WAAW,EAAE,EAAA,EAErC,CAAC,KAAwD,KAAI;QACzD,IAAI,KAAK,CAAC,MAAM,EAAE;AACd,YAAA,QAAQ,KAAC,CAAA,aAAA,CAAA,YAAY,oBAAK,KAAK,CAAA,CAAG,EAAE;AACvC,SAAA;AACD,QAAA,OAAO,IAAI,CAAC;KACf,CAEF,EACV;AACL"}

package/lib/slot-fill/message-card-fill.d.ts

@@ -0,0 +1,2 @@
+export declare const MessageCardFill: () => JSX.Element;
+//# sourceMappingURL=message-card-fill.d.ts.map

package/lib/slot-fill/message-card-fill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-card-fill.d.ts","sourceRoot":"","sources":["../../src/slot-fill/message-card-fill.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,mBAa3B,CAAA"}

package/lib/slot-fill/message-card-fill.js

@@ -0,0 +1,8 @@
+import React from'react';import {Fill}from'@common-stack/components-pro';import {MessageCard}from'../components/InboxMessage/MessageWidgets/MessageCard.js';import'@chakra-ui/icons';import'html-react-parser';import'@chakra-ui/react';import {IPostTypeEnum}from'@messenger-box/property-ext-core';const MessageCardFill = () => {
+    return (React.createElement(Fill, { name: IPostTypeEnum.CARD.toLowerCase() }, (props) => {
+        if (props.active) {
+            return (React.createElement(MessageCard, Object.assign({}, props)));
+        }
+        return null;
+    }));
+};export{MessageCardFill};//# sourceMappingURL=message-card-fill.js.map

package/lib/slot-fill/message-card-fill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-card-fill.js","sources":["../../src/slot-fill/message-card-fill.tsx"],"sourcesContent":[null],"names":[],"mappings":"qSAMO,MAAM,eAAe,GAAG,MAAK;AAChC,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,WAAW,EAAE,EAAA,EAEpC,CAAC,KAA+C,KAAI;QAChD,IAAI,KAAK,CAAC,MAAM,EAAE;AACd,YAAA,QAAQ,KAAC,CAAA,aAAA,CAAA,WAAW,oBAAK,KAAK,CAAA,CAAG,EAAE;AACtC,SAAA;AACD,QAAA,OAAO,IAAI,CAAC;KACf,CAEF,EACV;AACL"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@messenger-box/property-ext-browser",
-  "version": "0.0.1-alpha.187",
+  "version": "0.0.1-alpha.198",
   "description": "Extention to Messenger to support property on browser",
   "license": "ISC",
   "author": "CDMBase LLC",
@@ -41,11 +41,13 @@
   "dependencies": {
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "@messenger-box/core": "link:../../messenger-core",
-    "@messenger-box/platform-client": "link:../client",
+    "@messenger-box/chakra-ui-inbox": "0.0.1-alpha.198",
+    "@messenger-box/core": "0.0.1-alpha.198",
+    "@messenger-box/property-ext-core": "0.0.1-alpha.198",
     "date-fns": "^2.28.0",
     "date-fns-tz": "^1.3.3",
     "emoji-mart": "^3.0.1",
+    "html-react-parser": "^3.0.1",
     "javascript-time-ago": "^2.3.13",
     "react-icons": "~4.3.1"
   },
@@ -74,5 +76,5 @@
   "typescript": {
     "definition": "lib/index.d.ts"
   },
-  "gitHead": "39bc32e3b633bc595485c66f0f5a55b0cd0bebd9"
+  "gitHead": "3c92df614eed54e8dc4b34e1a1384f4e45502861"
 }

package/src/components/InboxMessage/MessageWidgets/MessageAlert.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import * as Icons from '@chakra-ui/icons';
+import parse from 'html-react-parser';
+import { Link, Stack, Text, useColorModeValue } from '@chakra-ui/react';
+import { IPost } from '@messenger-box/core';
+import { AlertMessageAttachmentsInterface } from '../../../interfaces';
+
+export interface IPropertyMessageWidgetProps {
+    message: IPost
+    index: number,
+}
+
+export const MessageAlert = (props: IPropertyMessageWidgetProps) => {
+    const { message, index } = props;
+    const { attachment } = message.propsConfiguration.contents as { attachment: AlertMessageAttachmentsInterface };
+    const Icon = Icons[attachment.icon];
+    const color = useColorModeValue('white', 'gray.800');
+    const bgColor = useColorModeValue('gray.800', 'white');
+    return (
+        <Stack
+            key={`${index}`}
+            mt="4"
+            mb="10"
+            bgColor={bgColor}
+            padding={3}
+            margin={2}
+            opacity={0.7}
+            borderRadius={20}
+            direction={['column', 'row']}
+        >
+            <Icon w={6} h={6} color={color}/>
+            <Text fontSize="14px" mt="5px" mb="5px" whiteSpace={'pre-line'} color={color}>
+                {attachment.isTitleHtml ? parse(attachment.title) : attachment?.title}
+            </Text>
+            {
+                attachment.callToAction && (
+                    <Link
+                        color={color}
+                        mr="2"
+                        style={{
+                            textDecoration: 'underline'
+                        }}
+                        href={attachment.callToAction.link}
+                        isExternal
+                    >
+                        {attachment.callToAction.title} <Icons.ExternalLinkIcon mx="2px"/>
+                    </Link>
+                )
+            }
+        </Stack>
+    )
+}

package/src/components/InboxMessage/MessageWidgets/MessageCard.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { startCase } from 'lodash';
+import parse from 'html-react-parser';
+import { Badge, Box, Heading, Image, Link, Spacer, Text, useColorModeValue } from '@chakra-ui/react';
+import { ExternalLinkIcon, StarIcon } from '@chakra-ui/icons'
+import { IPost } from '@messenger-box/core';
+import { CardMessageAttachmentsInterface } from '../../../interfaces';
+
+export interface IPropertyCardProps {
+    message: IPost
+    index: number;
+}
+
+export const MessageCard = (props: IPropertyCardProps) => {
+    const { message, index } = props;
+    const color = useColorModeValue('gray.800', 'white');
+    const {
+        attachment,
+    } = message.propsConfiguration?.contents as { attachment: CardMessageAttachmentsInterface, refId: string };
+    const { property } = attachment;
+    return (
+        <Box
+            _hover={{
+                cursor: 'pointer'
+            }}
+            margin={5}
+            maxW="xs"
+            borderWidth="1px"
+            borderRadius="lg"
+            overflow="hidden"
+            key={`${index}`}
+        >
+            <Image
+                width="100%"
+                src={attachment.image}
+                alt={attachment.title}
+            />
+            <Box marginTop={4} margin={2} m="3">
+                <Box
+                    mt="3"
+                    lineHeight="tight"
+                    noOfLines={1}
+                >
+                    <Heading
+                        color={color}
+                        fontSize="14px"
+                        fontWeight="semibold"
+                        as="h3"
+                    >
+                        {attachment.isTitleHtml ? parse(attachment.title) : attachment.title}
+                    </Heading>
+                </Box>
+                {
+                    property && (
+                        <Box mt="3" display="flex">
+                            {
+                                property?.type && (
+                                    <Box>
+                                        <Badge borderRadius="full" px="2" colorScheme="teal">
+                                            {startCase(property.type)}
+                                        </Badge>
+                                    </Box>
+                                )
+                            }
+                            <Spacer/>
+                            {
+                                property?.maxPeople && (
+                                    <Box
+                                        color="gray.500"
+                                        fontWeight="semibold"
+                                        letterSpacing="wide"
+                                        fontSize="xs"
+                                        textTransform="uppercase"
+                                        ml="2"
+                                    >
+                                        {property.maxPeople} Max People
+                                    </Box>
+                                )
+                            }
+                        </Box>
+                    )
+                }
+                <Box display="flex" mt="4" mb="3" alignItems="center">
+                    {attachment.isDescriptionHtml ? parse(attachment.description) : (
+                        <Text>{attachment.description}</Text>)}
+                </Box>
+                {
+                    property && (
+                        <Box display="flex" mb="4">
+                            {
+                                property?.price && (
+                                    <Box mt={2}>
+                                        {property.price}
+                                        <Box as="span" color="gray.600" fontSize="sm">
+                                            &nbsp;/ {startCase(property.priceType)}
+                                        </Box>
+                                    </Box>
+                                )
+                            }
+                            <Spacer/>
+                            <Box mt="2" alignItems="center">
+                                {
+                                    property?.totalReview && (
+                                        <Box as="span" ml="2" color="gray.600" fontSize="sm" mr="2">
+                                            {property.totalReview} reviews
+                                        </Box>
+                                    )
+                                }
+                                {property?.totalStar && Array(5)
+                                    .fill('')
+                                    .map((_, i) => (
+                                        <StarIcon
+                                            key={i}
+                                            color={i < property.totalStar ? 'teal.500' : 'gray.300'}
+                                        />
+                                    ))}
+                            </Box>
+                        </Box>
+                    )
+                }
+                {
+                    attachment.callToAction && (
+                        <Link
+                            href={attachment.callToAction.link}
+                            style={{
+                                cursor: 'pointer'
+                            }}
+                            _hover={{
+                                cursor: 'pointer'
+                            }}
+                            isExternal
+                        >
+                            {attachment.callToAction.title} <ExternalLinkIcon mx="2px"/>
+                        </Link>
+                    )
+                }
+            </Box>
+        </Box>
+    )
+}

package/src/components/InboxMessage/MessageWidgets/index.ts

@@ -0,0 +1,2 @@
+export { MessageCard } from './MessageCard';
+export { MessageAlert } from './MessageAlert';

package/src/components/InboxMessage/index.ts

@@ -0,0 +1 @@
+export { MessageAlert, MessageCard } from './MessageWidgets';

package/src/components/index.ts

@@ -0,0 +1 @@
+export { MessageCard, MessageAlert } from './InboxMessage';

package/src/index.ts

@@ -0,0 +1 @@
+export { feature as default } from './module';

package/src/interfaces/index.ts

@@ -0,0 +1 @@
+export { CardMessageAttachmentsInterface, AlertMessageAttachmentsInterface } from './message-widgets.interface';

package/src/interfaces/message-widgets.interface.ts

@@ -0,0 +1,14 @@
+import { CardMessageAttachmentsInterface as BaseCardMessageAttachmentsInterface } from '@messenger-box/chakra-ui-inbox';
+
+export { AlertMessageAttachmentsInterface } from '@messenger-box/chakra-ui-inbox';
+
+export interface CardMessageAttachmentsInterface extends BaseCardMessageAttachmentsInterface {
+    property: {
+        price: number;
+        priceType: string;
+        type: string;
+        totalStar: number;
+        maxPeople: number;
+        totalReview: number;
+    };
+}

package/src/module.ts

@@ -0,0 +1,16 @@
+import { Feature } from '@common-stack/client-react';
+import { IPostTypeEnum } from '@messenger-box/property-ext-core';
+import { MessageAlertFill, MessageCardFill } from './slot-fill';
+
+export const feature = new Feature({
+    componentFillPlugins: [
+        {
+            name: IPostTypeEnum.ALERT.toLowerCase(),
+            render: MessageAlertFill,
+        },
+        {
+            name: IPostTypeEnum.CARD.toLowerCase(),
+            render: MessageCardFill,
+        },
+    ],
+});

package/src/slot-fill/index.ts

@@ -0,0 +1,2 @@
+export { MessageAlertFill } from './message-alert-fill';
+export { MessageCardFill } from './message-card-fill';

package/src/slot-fill/message-alert-fill.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Fill } from '@common-stack/components-pro';
+import { IPostTypeEnum } from '@messenger-box/property-ext-core';
+import { MessageAlert } from '../components';
+import { IPropertyMessageWidgetProps } from '../components/InboxMessage/MessageWidgets/MessageAlert';
+
+export const MessageAlertFill = () => {
+    return (
+        <Fill name={IPostTypeEnum.ALERT.toLowerCase()}>
+            {
+                (props: IPropertyMessageWidgetProps & { active: boolean }) => {
+                    if (props.active) {
+                        return (<MessageAlert {...props}/>);
+                    }
+                    return null;
+                }
+            }
+        </Fill>
+    )
+}

package/src/slot-fill/message-card-fill.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Fill } from '@common-stack/components-pro';
+import { MessageCard } from '../components';
+import { IPropertyCardProps } from '../components/InboxMessage/MessageWidgets/MessageCard';
+import { IPostTypeEnum } from '@messenger-box/property-ext-core';
+
+export const MessageCardFill = () => {
+    return (
+        <Fill name={IPostTypeEnum.CARD.toLowerCase()}>
+            {
+                (props: IPropertyCardProps & { active: boolean }) => {
+                    if (props.active) {
+                        return (<MessageCard {...props}/>);
+                    }
+                    return null;
+                }
+            }
+        </Fill>
+    )
+}

package/webpack.config.js

@@ -49,12 +49,7 @@ const webpackOpts = {
         rules: [
             {
                 test: /\.(tsx)?$/,
-                loaders: 'ts-loader',
-                options: {
-                    compilerOptions: {
-                        outDir: path.join(),
-                    },
-                },
+                use: 'ts-loader',
             },
             {
                 test: /\.mjs$/,