@lendi/navbar 7.21.2 → 7.22.1

package/dist/declarations/src/shared/components/ChatBubble/index.d.ts

@@ -0,0 +1,4 @@
+declare const ChatBubble: ({ onClick }: {
+    onClick: () => void;
+}) => JSX.Element;
+export default ChatBubble;

package/dist/declarations/src/shared/components/ChatBubble/style.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isContracted: boolean;
+}, never>;
+export declare const BubbleBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const Dot: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/dist/navbar.cjs.dev.js

@@ -710,7 +710,7 @@ var RenderMobileAction = _ref => {
     isTransparent
   } = NavbarBase.useNavbarBaseContext();
   var needToContinue = () => isAuthenticated && showContinueAction;
-  var needToSignIn = () => !isAuthenticated;
+  var needToSignIn = () => !isAuthenticated && showContinueAction;
   var brand = lalaUtils.getBrandFromHostname();
   var env = getEnvFromHostname((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname);
   var signInURL = getSignInURL(brand, env, (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$location = _window2.location) === null || _window2$location === void 0 ? void 0 : _window2$location.href);
@@ -1544,6 +1544,66 @@ var SlideoutMenuBase = _ref3 => {
   });
 };
 
+var StyledWrapper = styled__default["default"].div.withConfig({
+  displayName: "style__StyledWrapper",
+  componentId: "lui__sc-1hl3v3a-0"
+})(["position:fixed;right:52px;bottom:30px;padding:14px;align-items:center;gap:10px;border-radius:40px;color:#fff;background-color:", ";cursor:pointer;box-shadow:0px 0px 2px 0px rgba(0,0,0,0.12),0px 2px 2px 0px rgba(0,0,0,0.12),0px 1px 3px 0px rgba(0,0,0,0.14);transition:width 600ms ease-in-out;width:", ";&:hover{width:143px;}"], getColour.getColour('interaction', 'main'), _ref => {
+  var {
+    isContracted
+  } = _ref;
+  return isContracted ? '50px' : '143px';
+});
+var BubbleBody = styled__default["default"].div.withConfig({
+  displayName: "style__BubbleBody",
+  componentId: "lui__sc-1hl3v3a-1"
+})(["display:flex;flex-direction:row;gap:10px;align-items:center;position:relative;"]);
+var Label$1 = styled__default["default"].span.withConfig({
+  displayName: "style__Label",
+  componentId: "lui__sc-1hl3v3a-2"
+})(["color:#fff;text-align:center;font-size:14px;font-style:normal;font-weight:700;line-height:20px;&.hidden{display:none;}"]);
+var Dot = styled__default["default"].span.withConfig({
+  displayName: "style__Dot",
+  componentId: "lui__sc-1hl3v3a-3"
+})(["width:24px;height:24px;border-radius:40px;background-color:#e52c64;position:absolute;top:-21px;right:-19px;"]);
+
+var ChatBubble = _ref => {
+  var {
+    onClick
+  } = _ref;
+  var [isContracted, setContracted] = React.useState(false);
+  var [showLabel, setShowLabel] = React.useState(true);
+  React.useEffect(() => {
+    var timeout = setTimeout(() => {
+      setContracted(true);
+      setShowLabel(false);
+    }, 2000);
+    return () => clearTimeout(timeout);
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledWrapper, {
+    isContracted: isContracted,
+    onClick: onClick,
+    onMouseEnter: () => {
+      setContracted(false);
+      setTimeout(() => {
+        setShowLabel(true);
+      }, 650);
+    },
+    onMouseLeave: () => {
+      setContracted(true);
+      setShowLabel(false);
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs(BubbleBody, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Chat__default["default"], {
+        width: "24px",
+        height: "24px"
+      }), showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$1, {
+        children: "Chat online"
+      }), /*#__PURE__*/jsxRuntime.jsx(Dot, {})]
+    })
+  });
+};
+var ChatBubble$1 = ChatBubble;
+
 var _templateObject$7;
 var CommPanelWrapper = styled__default["default"](SlideoutMenuBase).withConfig({
   displayName: "CommPanelProvider__CommPanelWrapper",
@@ -1572,19 +1632,33 @@ props => {
   var {
     onException
   } = useError();
+  var {
+    chatBubble
+  } = launchdarkly.useFlags();
   var {
     isCommPanelOpen,
     openCommPanel,
     closeCommPanel,
     channelId,
-    customerOwner
+    customerOwner,
+    openChat
   } = chat.useBootstrappedChatState();
   var [hasUnread, setHasUnread] = React__default["default"].useState(false);
   var [isOtherUserOnline, setIsOtherUserOnline] = React__default["default"].useState(false);
   var [breakpoint$1, setBreakpoint] = React__default["default"].useState();
+  var [renderChatBubble, setRenderChatBubble] = React.useState(false);
   breakpoint.useBreakpoint(setBreakpoint);
   var theme = utils$1.getThemeName();
   var shouldFullScreen = theme === 'aussie' || breakpoint$1 === 'mobile';
+  React.useEffect(() => {
+    var timeout;
+    if (chatBubble) {
+      timeout = setTimeout(() => {
+        setRenderChatBubble(true);
+      }, 1000);
+    }
+    return () => clearTimeout(timeout);
+  }, [chatBubble]);
   return /*#__PURE__*/jsxRuntime.jsxs(chat.ChatDataExposureContext.Provider, {
     value: {
       setHasUnReadMessage: hasUnreadMessages => setHasUnread(hasUnreadMessages),
@@ -1608,7 +1682,9 @@ props => {
         isOtherUserOnline: isOtherUserOnline,
         onException: onException
       })
-    }))]
+    })), renderChatBubble && /*#__PURE__*/jsxRuntime.jsx(ChatBubble$1, {
+      onClick: openChat
+    })]
   });
 };
 var withCommPanel = Component => chat.withCustomerChatProvider(withCommPanelWrapper(Component));

package/dist/navbar.cjs.prod.js

@@ -451,7 +451,7 @@ var _templateObject$c, _templateObject$b, _templateObject$a, _templateObject$9,
       }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: primaryLabel
       })
-    }), !isAuthenticated && jsxRuntime.jsx(SecondaryActionMobile, {
+    }), !isAuthenticated && showContinueAction && jsxRuntime.jsx(SecondaryActionMobile, {
       size: "sm",
       variant: isAuthenticated ? "emphasis" : "primary",
       href: signInURL,
@@ -984,7 +984,49 @@ var _templateObject$8, _templateObject2$3, _templateObject$7, _templateObject$6,
       children: children
     })) ]
   });
-}, CommPanelWrapper = styled__default.default(SlideoutMenuBase).withConfig({
+}, StyledWrapper = styled__default.default.div.withConfig({
+  displayName: "style__StyledWrapper",
+  componentId: "lui__sc-1hl3v3a-0"
+})([ "position:fixed;right:52px;bottom:30px;padding:14px;align-items:center;gap:10px;border-radius:40px;color:#fff;background-color:", ";cursor:pointer;box-shadow:0px 0px 2px 0px rgba(0,0,0,0.12),0px 2px 2px 0px rgba(0,0,0,0.12),0px 1px 3px 0px rgba(0,0,0,0.14);transition:width 600ms ease-in-out;width:", ";&:hover{width:143px;}" ], getColour.getColour("interaction", "main"), (_ref => {
+  var {isContracted: isContracted} = _ref;
+  return isContracted ? "50px" : "143px";
+})), BubbleBody = styled__default.default.div.withConfig({
+  displayName: "style__BubbleBody",
+  componentId: "lui__sc-1hl3v3a-1"
+})([ "display:flex;flex-direction:row;gap:10px;align-items:center;position:relative;" ]), Label$1 = styled__default.default.span.withConfig({
+  displayName: "style__Label",
+  componentId: "lui__sc-1hl3v3a-2"
+})([ "color:#fff;text-align:center;font-size:14px;font-style:normal;font-weight:700;line-height:20px;&.hidden{display:none;}" ]), Dot = styled__default.default.span.withConfig({
+  displayName: "style__Dot",
+  componentId: "lui__sc-1hl3v3a-3"
+})([ "width:24px;height:24px;border-radius:40px;background-color:#e52c64;position:absolute;top:-21px;right:-19px;" ]), ChatBubble = _ref => {
+  var {onClick: onClick} = _ref, [isContracted, setContracted] = React.useState(!1), [showLabel, setShowLabel] = React.useState(!0);
+  return React.useEffect((() => {
+    var timeout = setTimeout((() => {
+      setContracted(!0), setShowLabel(!1);
+    }), 2e3);
+    return () => clearTimeout(timeout);
+  }), []), jsxRuntime.jsx(StyledWrapper, {
+    isContracted: isContracted,
+    onClick: onClick,
+    onMouseEnter: () => {
+      setContracted(!1), setTimeout((() => {
+        setShowLabel(!0);
+      }), 650);
+    },
+    onMouseLeave: () => {
+      setContracted(!0), setShowLabel(!1);
+    },
+    children: jsxRuntime.jsxs(BubbleBody, {
+      children: [ jsxRuntime.jsx(Chat__default.default, {
+        width: "24px",
+        height: "24px"
+      }), showLabel && jsxRuntime.jsx(Label$1, {
+        children: "Chat online"
+      }), jsxRuntime.jsx(Dot, {}) ]
+    })
+  });
+}, ChatBubble$1 = ChatBubble, CommPanelWrapper = styled__default.default(SlideoutMenuBase).withConfig({
   displayName: "CommPanelProvider__CommPanelWrapper",
   componentId: "lui__sc-jqofne-0"
 })([ "max-width:", ";background-color:", ";box-shadow:0px 4px 4px 0px ", ";", " ", ";" ], utils$1.pxToRem(375), getColour__default.default("shade", 0), getColour__default.default("shade", 200), (_ref => {
@@ -994,10 +1036,15 @@ var _templateObject$8, _templateObject2$3, _templateObject$7, _templateObject$6,
   var {toTheTop: toTheTop} = _ref2;
   return toTheTop && styled.css([ "top:0;z-index:999;" ]);
 })), withCommPanelWrapper = Component => props => {
-  var {onException: onException} = useError(), {isCommPanelOpen: isCommPanelOpen, openCommPanel: openCommPanel, closeCommPanel: closeCommPanel, channelId: channelId, customerOwner: customerOwner} = chat.useBootstrappedChatState(), [hasUnread, setHasUnread] = React__default.default.useState(!1), [isOtherUserOnline, setIsOtherUserOnline] = React__default.default.useState(!1), [breakpoint$1, setBreakpoint] = React__default.default.useState();
+  var {onException: onException} = useError(), {chatBubble: chatBubble} = launchdarkly.useFlags(), {isCommPanelOpen: isCommPanelOpen, openCommPanel: openCommPanel, closeCommPanel: closeCommPanel, channelId: channelId, customerOwner: customerOwner, openChat: openChat} = chat.useBootstrappedChatState(), [hasUnread, setHasUnread] = React__default.default.useState(!1), [isOtherUserOnline, setIsOtherUserOnline] = React__default.default.useState(!1), [breakpoint$1, setBreakpoint] = React__default.default.useState(), [renderChatBubble, setRenderChatBubble] = React.useState(!1);
   breakpoint.useBreakpoint(setBreakpoint);
   var shouldFullScreen = "aussie" === utils$1.getThemeName() || "mobile" === breakpoint$1;
-  return jsxRuntime.jsxs(chat.ChatDataExposureContext.Provider, {
+  return React.useEffect((() => {
+    var timeout;
+    return chatBubble && (timeout = setTimeout((() => {
+      setRenderChatBubble(!0);
+    }), 1e3)), () => clearTimeout(timeout);
+  }), [ chatBubble ]), jsxRuntime.jsxs(chat.ChatDataExposureContext.Provider, {
     value: {
       setHasUnReadMessage: hasUnreadMessages => setHasUnread(hasUnreadMessages),
       setStatus: status => setIsOtherUserOnline(status)
@@ -1020,7 +1067,9 @@ var _templateObject$8, _templateObject2$3, _templateObject$7, _templateObject$6,
         isOtherUserOnline: isOtherUserOnline,
         onException: onException
       })
-    })) ]
+    })), renderChatBubble && jsxRuntime.jsx(ChatBubble$1, {
+      onClick: openChat
+    }) ]
   });
 }, withCommPanel = Component => chat.withCustomerChatProvider(withCommPanelWrapper(Component)), SimpleNavbarComponent = _ref => {
   var {useTransparent: useTransparent = !1, showBookanAppointmentCta: showBookanAppointmentCta = !0, showTalkToExpertCta: showTalkToExpertCta = !0, homeURL: homeURL, params: params = "", continueURL: continueURL = "/", onLogout: onLogout, showContinueAction: showContinueAction = !1, hideDashboardItem: hideDashboardItem, hideManageApplicationsItem: hideManageApplicationsItem, isCommPanelOpen: isCommPanelOpen, hasUnread: hasUnread, closeCommPanel: closeCommPanel, openCommPanel: _openCommPanel, customerOwner: customerOwner} = _ref, isAuthenticated = lalaReact.useSession().status === lalaReact.Status.Authenticated;

package/dist/navbar.esm.js

@@ -677,7 +677,7 @@ var RenderMobileAction = _ref => {
     isTransparent
   } = useNavbarBaseContext();
   var needToContinue = () => isAuthenticated && showContinueAction;
-  var needToSignIn = () => !isAuthenticated;
+  var needToSignIn = () => !isAuthenticated && showContinueAction;
   var brand = getBrandFromHostname();
   var env = getEnvFromHostname((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname);
   var signInURL = getSignInURL(brand, env, (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$location = _window2.location) === null || _window2$location === void 0 ? void 0 : _window2$location.href);
@@ -1511,6 +1511,66 @@ var SlideoutMenuBase = _ref3 => {
   });
 };
 
+var StyledWrapper = styled.div.withConfig({
+  displayName: "style__StyledWrapper",
+  componentId: "lui__sc-1hl3v3a-0"
+})(["position:fixed;right:52px;bottom:30px;padding:14px;align-items:center;gap:10px;border-radius:40px;color:#fff;background-color:", ";cursor:pointer;box-shadow:0px 0px 2px 0px rgba(0,0,0,0.12),0px 2px 2px 0px rgba(0,0,0,0.12),0px 1px 3px 0px rgba(0,0,0,0.14);transition:width 600ms ease-in-out;width:", ";&:hover{width:143px;}"], getColour$1('interaction', 'main'), _ref => {
+  var {
+    isContracted
+  } = _ref;
+  return isContracted ? '50px' : '143px';
+});
+var BubbleBody = styled.div.withConfig({
+  displayName: "style__BubbleBody",
+  componentId: "lui__sc-1hl3v3a-1"
+})(["display:flex;flex-direction:row;gap:10px;align-items:center;position:relative;"]);
+var Label$1 = styled.span.withConfig({
+  displayName: "style__Label",
+  componentId: "lui__sc-1hl3v3a-2"
+})(["color:#fff;text-align:center;font-size:14px;font-style:normal;font-weight:700;line-height:20px;&.hidden{display:none;}"]);
+var Dot = styled.span.withConfig({
+  displayName: "style__Dot",
+  componentId: "lui__sc-1hl3v3a-3"
+})(["width:24px;height:24px;border-radius:40px;background-color:#e52c64;position:absolute;top:-21px;right:-19px;"]);
+
+var ChatBubble = _ref => {
+  var {
+    onClick
+  } = _ref;
+  var [isContracted, setContracted] = useState(false);
+  var [showLabel, setShowLabel] = useState(true);
+  useEffect(() => {
+    var timeout = setTimeout(() => {
+      setContracted(true);
+      setShowLabel(false);
+    }, 2000);
+    return () => clearTimeout(timeout);
+  }, []);
+  return /*#__PURE__*/jsx(StyledWrapper, {
+    isContracted: isContracted,
+    onClick: onClick,
+    onMouseEnter: () => {
+      setContracted(false);
+      setTimeout(() => {
+        setShowLabel(true);
+      }, 650);
+    },
+    onMouseLeave: () => {
+      setContracted(true);
+      setShowLabel(false);
+    },
+    children: /*#__PURE__*/jsxs(BubbleBody, {
+      children: [/*#__PURE__*/jsx(Chat, {
+        width: "24px",
+        height: "24px"
+      }), showLabel && /*#__PURE__*/jsx(Label$1, {
+        children: "Chat online"
+      }), /*#__PURE__*/jsx(Dot, {})]
+    })
+  });
+};
+var ChatBubble$1 = ChatBubble;
+
 var _templateObject$7;
 var CommPanelWrapper = styled(SlideoutMenuBase).withConfig({
   displayName: "CommPanelProvider__CommPanelWrapper",
@@ -1539,19 +1599,33 @@ props => {
   var {
     onException
   } = useError();
+  var {
+    chatBubble
+  } = useFlags();
   var {
     isCommPanelOpen,
     openCommPanel,
     closeCommPanel,
     channelId,
-    customerOwner
+    customerOwner,
+    openChat
   } = useBootstrappedChatState();
   var [hasUnread, setHasUnread] = React.useState(false);
   var [isOtherUserOnline, setIsOtherUserOnline] = React.useState(false);
   var [breakpoint, setBreakpoint] = React.useState();
+  var [renderChatBubble, setRenderChatBubble] = useState(false);
   useBreakpoint(setBreakpoint);
   var theme = getThemeName();
   var shouldFullScreen = theme === 'aussie' || breakpoint === 'mobile';
+  useEffect(() => {
+    var timeout;
+    if (chatBubble) {
+      timeout = setTimeout(() => {
+        setRenderChatBubble(true);
+      }, 1000);
+    }
+    return () => clearTimeout(timeout);
+  }, [chatBubble]);
   return /*#__PURE__*/jsxs(ChatDataExposureContext.Provider, {
     value: {
       setHasUnReadMessage: hasUnreadMessages => setHasUnread(hasUnreadMessages),
@@ -1575,7 +1649,9 @@ props => {
         isOtherUserOnline: isOtherUserOnline,
         onException: onException
       })
-    }))]
+    })), renderChatBubble && /*#__PURE__*/jsx(ChatBubble$1, {
+      onClick: openChat
+    })]
   });
 };
 var withCommPanel = Component => withCustomerChatProvider(withCommPanelWrapper(Component));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lendi/navbar",
   "access": "restricted",
-  "version": "7.21.2",
+  "version": "7.22.1",
   "license": "ISC",
   "source": "src/index.tsx",
   "main": "dist/navbar.cjs.js",
@@ -40,7 +40,7 @@
     "@lendi-ui/typography": "^5.13.11-beta.0",
     "@lendi-ui/utils": "^6.0.2-beta.1",
     "@lendi/analytics": "^4.6.0",
-    "@lendi/chat": "^1.7.0",
+    "@lendi/chat": "^1.7.3",
     "@lendi/lala-utils": "^11.2.0",
     "@lendi/launchdarkly": "^0.1.7",
     "@lendi/lendigroup-leads-library": "^3.2.1",