@royaloperahouse/chord 1.18.3 → 1.19.0

package/CHANGELOG.md

@@ -1,3 +1,5 @@
+## [1.19.0]
+- Add timer to navigation basket
 ## [1.18.3]
 - iOS devices show image instead of video for Compact PageHeading
 

package/dist/chord.cjs.development.js

@@ -3677,12 +3677,12 @@ var _templateObject$t;
 var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 16px;\n  justify-content: flex-end;\n  height: 26px;\n\n  @media ", " {\n    column-gap: 8px;\n  }\n"])), devices.mobile);
 
 var _templateObject$u, _templateObject2$f, _templateObject3$9, _templateObject4$5;
-var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  border-bottom: 1px solid var(--base-color-transparent);\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--base-color-", ");\n    && a {\n      color: var(--base-color-", ");\n    }\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n"])), function (_ref) {
+var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  border-bottom: 1px solid var(--base-color-transparent);\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--base-color-", ");\n    && a {\n      color: var(--base-color-", ");\n    }\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n\n  ", "\n"])), function (_ref) {
   var selected = _ref.selected,
       colorPrimary = _ref.colorPrimary;
 
   if (selected) {
-    return "\n        border-bottom: 1px solid var(--base-color-" + colorPrimary + ");\n        && a {\n          color: var(--base-color-" + colorPrimary + ");\n        }       \n        && svg path {\n          fill: var(--base-color-" + colorPrimary + ");\n        }\n      ";
+    return "\n        border-bottom: 1px solid var(--base-color-" + colorPrimary + ");\n        && a {\n          color: var(--base-color-" + colorPrimary + ");\n        }\n        && svg path {\n          fill: var(--base-color-" + colorPrimary + ");\n        }\n      ";
   }
 
   return '';
@@ -3695,18 +3695,136 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$u || (_te
 }, function (_ref4) {
   var colorPrimary = _ref4.colorPrimary;
   return colorPrimary;
+}, function (_ref5) {
+  var isActive = _ref5.isActive,
+      colorPrimary = _ref5.colorPrimary;
+
+  if (isActive) {
+    return "\n        && a {\n          color: var(--base-color-" + colorPrimary + ");\n        }\n        && svg path {\n          fill: var(--base-color-" + colorPrimary + ");\n        }\n      ";
+  }
+
+  return '';
 });
 var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
 var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  position: absolute;\n  top: 8px;\n  margin-left: 6px;\n\n  & .basket-num {\n    color: white;\n    font-size: 10px;\n    font-family: var(--font-family-navigation);\n  }\n"])));
-var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  color: var(--base-color-black);\n  margin-left: 6px;\n  text-decoration: none;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  color: var(--base-color-black);\n  margin-left: 6px;\n  text-decoration: none;\n"])));
+
+var getSecondsUntil = function getSecondsUntil(expiryUnixTimestamp) {
+  if (!expiryUnixTimestamp) return 0;
+  var now = Date.now();
+  var expiry = new Date(expiryUnixTimestamp * 1000);
+  var diff = Math.round((expiry.getTime() - now) / 1000);
+  return diff > 0 ? diff : 0;
+};
+var formatTime = function formatTime(seconds) {
+  if (seconds > 60) {
+    return Math.ceil(seconds / 60) + " mins";
+  }
+
+  return seconds + " sec" + (seconds === 1 ? '' : 's');
+};
+var checkTimeRed = function checkTimeRed(seconds) {
+  if (seconds <= 0) {
+    return false;
+  }
+
+  return seconds / 60 <= 5;
+};
+
+var useBasket = function useBasket(expiryUnixTimestamp, numItems, numVirtualItems) {
+  if (numItems === void 0) {
+    numItems = 0;
+  }
+
+  if (numVirtualItems === void 0) {
+    numVirtualItems = 0;
+  }
+
+  var _useState = React.useState(),
+      basketText = _useState[0],
+      setBasketText = _useState[1];
+
+  var _useState2 = React.useState(),
+      basketIsActive = _useState2[0],
+      setBasketIsActive = _useState2[1];
+
+  var _useState3 = React.useState(0),
+      basketTotalNumItems = _useState3[0],
+      setBasketTotalNumItems = _useState3[1];
+
+  var _useState4 = React.useState(getSecondsUntil(expiryUnixTimestamp)),
+      seconds = _useState4[0],
+      setSeconds = _useState4[1];
+
+  var _useState5 = React.useState(),
+      timer = _useState5[0],
+      setTimer = _useState5[1];
+
+  var _useState6 = React.useState(true),
+      basketIsEmpty = _useState6[0],
+      setBasketIsEmpty = _useState6[1];
+
+  React.useEffect(function () {
+    if (numItems > 0 || numVirtualItems > 0) {
+      setBasketIsEmpty(false);
+    } else {
+      setBasketIsEmpty(true);
+    }
+
+    setBasketTotalNumItems(numItems + numVirtualItems);
+  }, [numItems, numVirtualItems]);
+  React.useEffect(function () {
+    if (!expiryUnixTimestamp) return;
+    setSeconds(getSecondsUntil(expiryUnixTimestamp));
+  }, [expiryUnixTimestamp]);
+  React.useEffect(function () {
+    if (timer) {
+      clearInterval(timer); // clears the old timer before setting a new one
+    }
+
+    if (!expiryUnixTimestamp || numItems === 0) return function () {
+      return undefined;
+    };
+    var interval = setInterval(function () {
+      setSeconds(getSecondsUntil(expiryUnixTimestamp));
+    }, 1000);
+    setTimer(interval);
+    return function () {
+      return clearInterval(interval);
+    };
+  }, [expiryUnixTimestamp]);
+  React.useEffect(function () {
+    if (!timer) return;
+
+    if (seconds > 0) {
+      setBasketText(formatTime(seconds));
+      setBasketIsActive(checkTimeRed(seconds));
+    } else {
+      clearInterval(timer);
+      setBasketTotalNumItems(numVirtualItems);
+      setBasketText('');
+      setBasketIsActive(false);
+      setBasketIsEmpty(true);
+    }
+  }, [seconds, timer]);
+  return {
+    basketText: basketText,
+    basketTotalNumItems: basketTotalNumItems,
+    basketIsActive: basketIsActive,
+    basketIsEmpty: basketIsEmpty
+  };
+};
 
 var Basket$1 = function Basket(_ref) {
   var text = _ref.text,
+      expiryTime = _ref.expiryTime,
       link = _ref.link,
       _ref$selected = _ref.selected,
       selected = _ref$selected === void 0 ? false : _ref$selected,
       _ref$numItems = _ref.numItems,
       numItems = _ref$numItems === void 0 ? 0 : _ref$numItems,
+      _ref$numVirtualItems = _ref.numVirtualItems,
+      numVirtualItems = _ref$numVirtualItems === void 0 ? 0 : _ref$numVirtualItems,
       onClick = _ref.onClick,
       _ref$colorPrimary = _ref.colorPrimary,
       colorPrimary = _ref$colorPrimary === void 0 ? 'primary' : _ref$colorPrimary;
@@ -3717,28 +3835,34 @@ var Basket$1 = function Basket(_ref) {
     }
   };
 
+  var _useBasket = useBasket(expiryTime, numItems, numVirtualItems),
+      basketText = _useBasket.basketText,
+      basketTotalNumItems = _useBasket.basketTotalNumItems,
+      basketIsActive = _useBasket.basketIsActive,
+      basketIsEmpty = _useBasket.basketIsEmpty;
+
   var onKeyDownHandler = function onKeyDownHandler(e) {
     if (e.key === 'Enter') {
       onClickHandler();
     }
   };
 
-  var empty = numItems <= 0;
   return /*#__PURE__*/React__default.createElement(BasketContainer, {
     selected: selected,
     onClick: onClickHandler,
     onKeyDown: onKeyDownHandler,
     colorPrimary: colorPrimary,
+    isActive: basketIsActive,
     tabIndex: 0
-  }, /*#__PURE__*/React__default.createElement(SvgContainer, null, empty ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(SvgContainer, null, basketIsEmpty ? /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Basket"
   }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "BasketFull"
   }), /*#__PURE__*/React__default.createElement(NumContainer, null, /*#__PURE__*/React__default.createElement("span", {
     className: "basket-num"
-  }, numItems)))), /*#__PURE__*/React__default.createElement("div", null, !empty ? /*#__PURE__*/React__default.createElement(BasketText, {
+  }, basketTotalNumItems)))), /*#__PURE__*/React__default.createElement("div", null, !basketIsEmpty ? /*#__PURE__*/React__default.createElement(BasketText, {
     "data-testid": "baskettext"
-  }, text) : ''));
+  }, expiryTime ? basketText : text) : ''));
 };
 
 var _templateObject$v, _templateObject2$g;
@@ -4002,8 +4126,10 @@ var NavTop = function NavTop(_ref) {
       accountOptions = _ref.accountOptions,
       onLink = _ref.onLink,
       basketText = _ref.basketText,
+      basketExpiryUnixTimestamp = _ref.basketExpiryUnixTimestamp,
       basketLink = _ref.basketLink,
       basketNumItems = _ref.basketNumItems,
+      basketNumVirtualItems = _ref.basketNumVirtualItems,
       onClickSearch = _ref.onClickSearch,
       _ref$isShowSearch = _ref.isShowSearch,
       isShowSearch = _ref$isShowSearch === void 0 ? false : _ref$isShowSearch,
@@ -4016,7 +4142,9 @@ var NavTop = function NavTop(_ref) {
   }), /*#__PURE__*/React__default.createElement(Basket$1, {
     link: basketLink,
     text: basketText,
+    expiryTime: basketExpiryUnixTimestamp,
     numItems: basketNumItems,
+    numVirtualItems: basketNumVirtualItems,
     onClick: onLink,
     colorPrimary: colorPrimary
   }), /*#__PURE__*/React__default.createElement(Account, {
@@ -4372,8 +4500,10 @@ var Navigation = function Navigation(_ref) {
     accountText: navTopData.accountText,
     accountLink: navTopData.accountLink,
     basketText: navTopData.basketText,
+    basketExpiryUnixTimestamp: navTopData.basketExpiryUnixTimestamp,
     basketLink: navTopData.basketLink,
     basketNumItems: navTopData.basketNumItems,
+    basketNumVirtualItems: navTopData.basketNumVirtualItems,
     onClickSearch: onClickSearchHandler,
     onLink: onLinkHandler,
     isShowSearch: showSearch,