@appcorp/app-corp-vista 0.3.16 → 0.3.18

package/atoms/vista-banner-v1/vista-banner-v1.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { VistaBannerV1Props } from '../../type/vista-banner-type';
+export declare const VistaBannerV1: FC<VistaBannerV1Props>;

package/atoms/vista-banner-v1/vista-banner-v1.js

@@ -0,0 +1,32 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaBannerV1 = void 0;
+var react_1 = __importDefault(require("react"));
+var outline_1 = require("@heroicons/react/24/outline");
+var VistaBannerV1 = function (_a) {
+    var ctaLabel = _a.ctaLabel, description = _a.description, heading = _a.heading, handleCtaOnClick = _a.handleCtaOnClick, handleCrossOnClick = _a.handleCrossOnClick;
+    return (react_1.default.createElement("div", { className: "relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2.5 sm:px-3.5 sm:before:flex-1 dark:bg-gray-800/50 dark:after:pointer-events-none dark:after:absolute dark:after:inset-x-0 dark:after:bottom-0 dark:after:h-px dark:after:bg-white/10" },
+        react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute top-1/2 left-[max(-7rem,calc(50%-52rem))] -z-10 -translate-y-1/2 transform-gpu blur-2xl" },
+            react_1.default.createElement("div", { style: {
+                    clipPath: 'polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)',
+                }, className: "aspect-577/310 w-144.25 bg-linear-to-r from-[#ff80b5] to-[#9089fc] opacity-30 dark:opacity-40" })),
+        react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute top-1/2 left-[max(45rem,calc(50%+8rem))] -z-10 -translate-y-1/2 transform-gpu blur-2xl" },
+            react_1.default.createElement("div", { style: {
+                    clipPath: 'polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)',
+                }, className: "aspect-577/310 w-144.25 bg-linear-to-r from-[#ff80b5] to-[#9089fc] opacity-30 dark:opacity-40" })),
+        react_1.default.createElement("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2" },
+            react_1.default.createElement("p", { className: "text-sm/6 text-gray-900 dark:text-gray-100" },
+                react_1.default.createElement("strong", { className: "font-semibold" }, heading),
+                react_1.default.createElement("svg", { viewBox: "0 0 2 2", "aria-hidden": "true", className: "mx-2 inline size-0.5 fill-current" },
+                    react_1.default.createElement("circle", { r: 1, cx: 1, cy: 1 })),
+                description),
+            ctaLabel && (react_1.default.createElement("button", { onClick: handleCtaOnClick, className: "flex-none rounded-full bg-primary px-3.5 py-1 text-sm font-semibold text-white shadow-xs hover:bg-primary/70 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:bg-white/10 dark:inset-ring-white/20 dark:hover:bg-white/15 dark:focus-visible:outline-white" }, ctaLabel))),
+        react_1.default.createElement("div", { className: "flex flex-1 justify-end" }, handleCrossOnClick && (react_1.default.createElement("button", { type: "button", className: "-m-3 p-3 focus-visible:-outline-offset-4", onClick: handleCrossOnClick },
+            react_1.default.createElement("span", { className: "sr-only" }, "Dismiss"),
+            react_1.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "size-5 text-gray-900 dark:text-gray-100" }))))));
+};
+exports.VistaBannerV1 = VistaBannerV1;

package/data/vista-chat-props.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.vistaChatV2Props = exports.vistaChatV1Props = exports.messages = exports.chats = void 0;
-var react_1 = __importDefault(require("react"));
+// import React from 'react';
 var vista_button_type_1 = require("../type/vista-button-type");
 var vista_chat_type_1 = require("../type/vista-chat-type");
 exports.chats = [
@@ -117,8 +114,6 @@ exports.vistaChatV2Props = {
     chatValue: '',
     containerClassName: '',
     handleChatOnChange: function () { return void 0; },
-    sideBarHeading: 'Psychic Tools',
-    sideBarNode: react_1.default.createElement("p", null, "Hello World"),
     name: 'John Doe',
     timer: '00:20',
     estimatedBalance: '30.00',
@@ -200,4 +195,7 @@ exports.vistaChatV2Props = {
     handlePayment: function () { return void 0; },
     isBalanceLow: false,
     typing: 'Username is typing...',
+    bannerHeading: 'Your session has started.',
+    bannerDescription: 'Enjoy your conversation.',
+    showBanner: true,
 };

package/molecules/vista-chat-bubble-v1/vista-chat-bubble-v1.js

@@ -65,7 +65,7 @@ var VistaChatBubbleV1 = function (_a) {
                 react_1.default.createElement("p", { className: "px-4 pt-2" }, message),
                 react_1.default.createElement("div", { className: "flex items-center px-4 py-2 text-xs justify-between ".concat(isUser ? 'text-right' : 'text-left') },
                     react_1.default.createElement("span", { className: "mr-2" }, (0, format_timestamp_1.formatTimestamp)(createdAt)))),
-            isUser && (react_1.default.createElement("p", { className: "text-xs font-semibold text-end" }, messageStatus))),
+            isUser && (react_1.default.createElement("p", { className: "text-xs text-end" }, messageStatus.toLowerCase()))),
         react_1.default.createElement("div", { className: "order-1 min-w-10" },
             react_1.default.createElement(vista_avatar_v1_1.VistaAvatarV1, { alt: isUser ? user.avatarAlt : psychic.avatarAlt, src: isUser ? user.avatarUrl : psychic.avatarUrl }))));
 };

package/molecules/vista-chat-side-bar-v2/vista-chat-side-bar-v2.d.ts

@@ -1,3 +0,0 @@
-import { FC } from 'react';
-import { VistaChatV2Props } from '../../type/vista-chat-type';
-export declare const VistaChatSideBarV2: FC<Pick<VistaChatV2Props, 'sideBarHeading' | 'sideBarNode'>>;

package/molecules/vista-chat-side-bar-v2/vista-chat-side-bar-v2.js

@@ -1,15 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VistaChatSideBarV2 = void 0;
-var react_1 = __importDefault(require("react"));
-var vista_chat_heading_v1_1 = require("../vista-chat-heading-v1/vista-chat-heading-v1");
-var VistaChatSideBarV2 = function (_a) {
-    var sideBarHeading = _a.sideBarHeading, sideBarNode = _a.sideBarNode;
-    return (react_1.default.createElement("div", { className: "col-span-3 flex flex-col border-r border-gray-200 shadow-md" },
-        react_1.default.createElement(vista_chat_heading_v1_1.VistaChatHeadingV1, { heading: sideBarHeading }),
-        react_1.default.createElement("div", { className: "divide flex-1 divide-y divide-gray-600 overflow-y-auto" }, sideBarNode)));
-};
-exports.VistaChatSideBarV2 = VistaChatSideBarV2;
+// import React, { FC } from 'react';
+// import { VistaChatHeadingV1 } from '../vista-chat-heading-v1/vista-chat-heading-v1';
+// import { VistaChatV2Props } from '../../type/vista-chat-type';
+// export const VistaChatSideBarV2: FC<
+//   Pick<VistaChatV2Props, 'sideBarHeading' | 'sideBarNode'>
+// > = ({ sideBarHeading, sideBarNode }) => {
+//   return (
+//     <div className="col-span-3 flex flex-col border-r border-gray-200 shadow-md">
+//       <VistaChatHeadingV1 heading={sideBarHeading} />
+//       <div className="divide flex-1 divide-y divide-gray-600 overflow-y-auto">
+//         {sideBarNode}
+//       </div>
+//     </div>
+//   );
+// };

package/organisms/vista-chat-v2/vista-chat-v2.js

@@ -7,15 +7,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VistaChatV2 = void 0;
 var react_1 = __importDefault(require("react"));
 var vista_chat_heading_v1_1 = require("../../molecules/vista-chat-heading-v1/vista-chat-heading-v1");
-var vista_chat_side_bar_v2_1 = require("../../molecules/vista-chat-side-bar-v2/vista-chat-side-bar-v2");
 var vista_text_input_v1_1 = require("../../molecules/vista-text-input-v1");
 var vista_button_v1_1 = require("../../molecules/vista-button-v1/vista-button-v1");
 var vista_button_type_1 = require("../../type/vista-button-type");
 var vista_chat_bubble_v1_1 = require("../../molecules/vista-chat-bubble-v1/vista-chat-bubble-v1");
 var vista_vertical_divider_v1_1 = require("../../molecules/vista-vertical-divider-v1");
 var util_functions_1 = require("@react-pakistan/util-functions");
+var vista_banner_v1_1 = require("../../atoms/vista-banner-v1/vista-banner-v1");
 var VistaChatV2 = function (_a) {
-    var actionItems = _a.actionItems, buttonDenominations = _a.buttonDenominations, chatId = _a.chatId, chatValue = _a.chatValue, _b = _a.containerClassName, containerClassName = _b === void 0 ? '' : _b, _c = _a.estimatedBalance, estimatedBalance = _c === void 0 ? '' : _c, handleChatOnChange = _a.handleChatOnChange, handleOnBlur = _a.handleOnBlur, handleOnFocus = _a.handleOnFocus, handlePayment = _a.handlePayment, isBalanceLow = _a.isBalanceLow, messages = _a.messages, name = _a.name, paymentLoading = _a.paymentLoading, psychic = _a.psychic, sideBarHeading = _a.sideBarHeading, sideBarNode = _a.sideBarNode, timer = _a.timer, typing = _a.typing, user = _a.user;
+    var actionItems = _a.actionItems, bannerDescription = _a.bannerDescription, bannerHeading = _a.bannerHeading, buttonDenominations = _a.buttonDenominations, chatId = _a.chatId, chatValue = _a.chatValue, _b = _a.containerClassName, containerClassName = _b === void 0 ? '' : _b, _c = _a.estimatedBalance, estimatedBalance = _c === void 0 ? '' : _c, handleChatOnChange = _a.handleChatOnChange, handleOnBlur = _a.handleOnBlur, handleOnFocus = _a.handleOnFocus, handlePayment = _a.handlePayment, isBalanceLow = _a.isBalanceLow, messages = _a.messages, name = _a.name, paymentLoading = _a.paymentLoading, psychic = _a.psychic, showBanner = _a.showBanner, timer = _a.timer, typing = _a.typing, user = _a.user;
     var renderChatMessages = function () {
         var lastDate = '';
         return (react_1.default.createElement("div", { className: "overflow-y-scroll" }, messages.map(function (_a, ind) {
@@ -36,10 +36,10 @@ var VistaChatV2 = function (_a) {
             actionItems[0].handleOnClick();
         }
     };
-    return (react_1.default.createElement("div", { className: "relative h-screen grid grid-cols-12 grid-rows-1 overflow-hidden ".concat(containerClassName) },
-        react_1.default.createElement(vista_chat_side_bar_v2_1.VistaChatSideBarV2, { sideBarHeading: sideBarHeading, sideBarNode: sideBarNode }),
-        react_1.default.createElement("section", { className: "col-span-9 flex flex-col" },
-            react_1.default.createElement(vista_chat_heading_v1_1.VistaChatHeadingV1, { heading: name, timer: timer, estimatedBalance: estimatedBalance }),
+    return (react_1.default.createElement("div", { className: "relative h-screen overflow-hidden max-w-7xl mx-auto ".concat(containerClassName) },
+        react_1.default.createElement("section", { className: "flex flex-col h-full" },
+            react_1.default.createElement(vista_chat_heading_v1_1.VistaChatHeadingV1, { estimatedBalance: estimatedBalance, heading: name, timer: timer }),
+            showBanner && (react_1.default.createElement(vista_banner_v1_1.VistaBannerV1, { description: bannerDescription, heading: bannerHeading })),
             react_1.default.createElement("div", { className: "overflow-y-auto h-full flex flex-col justify-end p-4" }, renderChatMessages()),
             isBalanceLow && (react_1.default.createElement("div", { className: "grid grid-cols-5 m-4 p-4 border-2 border-primary border-dashed rounded-md justify-between items-center bg-cyan-200" },
                 react_1.default.createElement("div", { className: "col-span-2" },
@@ -51,7 +51,7 @@ var VistaChatV2 = function (_a) {
             react_1.default.createElement("div", { className: "pl-4" }, typing && (react_1.default.createElement("p", { className: "text-xs italic pb-1 text-primary" }, typing))),
             react_1.default.createElement("div", { className: "flex flex-row items-center gap-4 border-t border-gray-200 p-4" },
                 react_1.default.createElement("div", { className: "w-full" },
-                    react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnBlur: handleOnBlur, handleOnChange: handleChatOnChange, handleOnFocus: handleOnFocus, handleOnKeyDown: handleOnKeyDown, id: chatId, placeholder: "Enter message...", value: chatValue })),
+                    react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnBlur: handleOnBlur, handleOnChange: handleChatOnChange, handleOnFocus: handleOnFocus, handleOnKeyDown: handleOnKeyDown, id: chatId, placeholder: "Message ".concat(name, "..."), value: chatValue })),
                 actionItems
                     .slice(0, 2)
                     .filter(function (_a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/app-corp-vista",
-  "version": "0.3.16",
+  "version": "0.3.18",
   "scripts": {
     "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib && cp yarn.lock lib",
     "build:next": "next build",

package/type/vista-banner-type.d.ts

@@ -0,0 +1,7 @@
+export interface VistaBannerV1Props {
+    ctaLabel?: string;
+    description?: string;
+    handleCrossOnClick?: () => void;
+    handleCtaOnClick?: () => void;
+    heading?: string;
+}

package/type/vista-banner-type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/type/vista-chat-type.d.ts

@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 import { VISTA_BUTTON_VARIANT } from './vista-button-type';
 export declare enum VISTA_CHAT_BUBBLE_TYPES {
     PSYCHIC = "PSYCHIC",
@@ -42,6 +41,8 @@ export interface ButtonDenomination {
 }
 export interface VistaChatV2Props {
     actionItems: VistaChatV2ActionItem[];
+    bannerDescription: string;
+    bannerHeading: string;
     buttonDenominations: ButtonDenomination[];
     chatId: string;
     chatValue: string;
@@ -56,8 +57,7 @@ export interface VistaChatV2Props {
     name: string;
     paymentLoading: string;
     psychic: VistaChatV2Psychic;
-    sideBarHeading: string;
-    sideBarNode: ReactNode;
+    showBanner: boolean;
     timer: string;
     typing?: string;
     user: VistaChatV2User;