@bigbinary/neeto-molecules 1.1.10 → 1.1.11

package/dist/ThemeSidebar/hooks/useDirectUploadDropzone.js

@@ -0,0 +1,149 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useState, useEffect } from "react";
+import { DirectUpload } from "@rails/activestorage";
+import { isNotEmpty } from "@bigbinary/neeto-commons-frontend/pure";
+import { Toastr } from "@bigbinary/neetoui";
+import { useDropzone } from "react-dropzone";
+import { useTranslation } from "react-i18next";
+import { DIRECT_UPLOAD_URL } from "../constants";
+import { bytesToSize, getDominantColor } from "../utils";
+var useDropzoneWithValidation = function useDropzoneWithValidation(_ref) {
+  var maxSize = _ref.maxSize,
+    acceptedTypes = _ref.acceptedTypes,
+    handleAcceptedFile = _ref.handleAcceptedFile,
+    _ref$isDominantColorE = _ref.isDominantColorEnabled,
+    isDominantColorEnabled = _ref$isDominantColorE === void 0 ? false : _ref$isDominantColorE;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    files = _useState2[0],
+    setFiles = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    uploadProgress = _useState6[0],
+    setUploadProgress = _useState6[1];
+  var maxSizeInReadableUnits = bytesToSize(maxSize);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var fileErrors = {
+    "file-invalid-type": t("neetoMolecules.themeSidebar.error.fileTypeError", {
+      acceptedTypes: acceptedTypes
+    }),
+    "file-too-large": t("neetoMolecules.themeSidebar.error.fileSizeLimitExceeded", {
+      maxSizeInReadableUnits: maxSizeInReadableUnits
+    })
+  };
+  var _useDropzone = useDropzone({
+      accept: acceptedTypes,
+      onDrop: function () {
+        var _onDrop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(acceptedFiles) {
+          var newFiles;
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return new Promise(function (resolve) {
+                  var files = [];
+                  acceptedFiles.forEach(function (file) {
+                    var upload = new DirectUpload(file, DIRECT_UPLOAD_URL, {
+                      directUploadWillStoreFileWithXHR: function directUploadWillStoreFileWithXHR(xhr) {
+                        xhr.upload.addEventListener("progress", function (event) {
+                          var percentComplete = Math.round(event.loaded / event.total * 100);
+                          setUploadProgress(percentComplete);
+                        });
+                      }
+                    });
+                    upload.create( /*#__PURE__*/function () {
+                      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(error, blob) {
+                        var resolvedFile, dominantColor;
+                        return _regeneratorRuntime.wrap(function _callee$(_context) {
+                          while (1) switch (_context.prev = _context.next) {
+                            case 0:
+                              if (!error) {
+                                _context.next = 2;
+                                break;
+                              }
+                              return _context.abrupt("return", Toastr.error(error));
+                            case 2:
+                              resolvedFile = {
+                                url: blob.blob_url,
+                                name: blob.filename,
+                                signed_id: blob.signed_id,
+                                type: blob.content_type,
+                                size: blob.byte_size
+                              };
+                              if (!isDominantColorEnabled) {
+                                _context.next = 8;
+                                break;
+                              }
+                              _context.next = 6;
+                              return getDominantColor(file);
+                            case 6:
+                              dominantColor = _context.sent;
+                              resolvedFile.dominantColor = dominantColor;
+                            case 8:
+                              files.push(resolvedFile);
+                              return _context.abrupt("return", resolve(files));
+                            case 10:
+                            case "end":
+                              return _context.stop();
+                          }
+                        }, _callee);
+                      }));
+                      return function (_x2, _x3) {
+                        return _ref2.apply(this, arguments);
+                      };
+                    }());
+                  });
+                  return files;
+                });
+              case 2:
+                newFiles = _context2.sent;
+                setFiles(newFiles.map(function (file) {
+                  return handleAcceptedFile(file);
+                }));
+              case 4:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        function onDrop(_x) {
+          return _onDrop.apply(this, arguments);
+        }
+        return onDrop;
+      }(),
+      maxSize: maxSize,
+      onDropRejected: function onDropRejected(fileRejections) {
+        fileRejections.map(function (_ref3) {
+          var errors = _ref3.errors;
+          return errors.map(function (_ref4) {
+            var code = _ref4.code;
+            return Toastr.error(fileErrors[code] || t("neetoMolecules.common.somethingWentWrong"));
+          });
+        });
+      }
+    }),
+    getRootProps = _useDropzone.getRootProps,
+    getInputProps = _useDropzone.getInputProps,
+    isDragActive = _useDropzone.isDragActive,
+    fileRejections = _useDropzone.fileRejections;
+  useEffect(function () {
+    setError(isNotEmpty(fileRejections));
+  }, [fileRejections]);
+  return {
+    files: files,
+    getRootProps: getRootProps,
+    getInputProps: getInputProps,
+    isDragActive: isDragActive,
+    fileRejections: fileRejections,
+    error: error,
+    uploadProgress: uploadProgress
+  };
+};
+export default useDropzoneWithValidation;

package/dist/ThemeSidebar/index.js

@@ -0,0 +1,118 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useEffect, useRef, useState } from "react";
+import { Spinner } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import { DESIGN_SCREENS } from "./constants";
+import Customize from "./Customize";
+import Themes from "./Themes";
+import "./themeSidebar.scss";
+import TitleBar from "./TitleBar";
+import { scrollElementIntoView, transformTheme } from "./utils";
+var ThemeSidebar = function ThemeSidebar(_ref) {
+  var defaultThemes = _ref.defaultThemes,
+    customThemes = _ref.customThemes,
+    createTheme = _ref.createTheme,
+    deleteTheme = _ref.deleteTheme,
+    editTheme = _ref.editTheme,
+    applyTheme = _ref.applyTheme,
+    currentTheme = _ref.currentTheme,
+    isLoadingThemes = _ref.isLoadingThemes,
+    applyingThemeId = _ref.applyingThemeId;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(DESIGN_SCREENS.THEMES),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentScreen = _useState2[0],
+    setCurrentScreen = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    previewingTheme = _useState4[0],
+    setPreviewingTheme = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    themeToHighlight = _useState6[0],
+    setThemeToHighlight = _useState6[1];
+  var didScrollActiveThemeIntoView = useRef(null);
+  useEffect(function () {
+    isLoadingThemes && setCurrentScreen(DESIGN_SCREENS.LOADING);
+  }, [isLoadingThemes]);
+  useEffect(function () {
+    !previewingTheme && setCurrentScreen(DESIGN_SCREENS.THEMES);
+  }, [previewingTheme]);
+  var handleEditTheme = function handleEditTheme(theme) {
+    setPreviewingTheme(theme);
+    setCurrentScreen(DESIGN_SCREENS.CUSTOMIZE);
+  };
+  var handleBackPress = function handleBackPress() {
+    setCurrentScreen(DESIGN_SCREENS.THEMES);
+    setPreviewingTheme(null);
+  };
+  var handleCreateNewTheme = function handleCreateNewTheme() {
+    setPreviewingTheme(_objectSpread(_objectSpread({}, defaultThemes[0]), {}, {
+      id: null,
+      name: t("neetoMolecules.themeSidebar.defaultThemeName")
+    }));
+    setCurrentScreen(DESIGN_SCREENS.CUSTOMIZE);
+  };
+  var highlightTheme = function highlightTheme(themeToHighlight) {
+    setTimeout(function () {
+      scrollElementIntoView(themeToHighlight.id);
+    }, 1500);
+    setTimeout(function () {
+      setThemeToHighlight(null);
+    }, 4000);
+    setThemeToHighlight(themeToHighlight.id);
+  };
+  var createThemeCallback = function createThemeCallback(createdTheme) {
+    setCurrentScreen(DESIGN_SCREENS.THEMES);
+    setPreviewingTheme(createdTheme.id);
+    highlightTheme(createdTheme);
+  };
+  var handleCloneTheme = function handleCloneTheme(data) {
+    var themeToClone = _objectSpread(_objectSpread({}, data), {}, {
+      name: "".concat(data.name, " - clone")
+    });
+    createTheme(themeToClone, createThemeCallback);
+  };
+  var handleFormSubmit = function handleFormSubmit(values) {
+    var formattedValues = transformTheme(values);
+    if (!(previewingTheme !== null && previewingTheme !== void 0 && previewingTheme.id)) {
+      createTheme(formattedValues, createThemeCallback);
+    } else {
+      editTheme(_objectSpread(_objectSpread({}, formattedValues), {}, {
+        id: previewingTheme.id
+      }));
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-theme-design-sidebar neeto-ui-border-gray-200 border-r"
+  }, /*#__PURE__*/React.createElement(TitleBar, {
+    currentScreen: currentScreen,
+    handleBackPress: handleBackPress,
+    handleCreateNewTheme: handleCreateNewTheme,
+    isNewTheme: !(previewingTheme !== null && previewingTheme !== void 0 && previewingTheme.id)
+  }), currentScreen === DESIGN_SCREENS.LOADING && /*#__PURE__*/React.createElement("div", {
+    className: "flex h-full w-full items-center justify-center"
+  }, /*#__PURE__*/React.createElement(Spinner, null)), currentScreen === DESIGN_SCREENS.THEMES && /*#__PURE__*/React.createElement(Themes, {
+    applyingThemeId: applyingThemeId,
+    currentTheme: currentTheme,
+    customThemes: customThemes,
+    defaultThemes: defaultThemes,
+    didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
+    highlightTheme: highlightTheme,
+    previewingTheme: previewingTheme,
+    setPreviewingTheme: setPreviewingTheme,
+    themeToHighlight: themeToHighlight,
+    onApplyTheme: applyTheme,
+    onCloneTheme: handleCloneTheme,
+    onDeleteTheme: deleteTheme,
+    onEditTheme: handleEditTheme
+  }), currentScreen === DESIGN_SCREENS.CUSTOMIZE && /*#__PURE__*/React.createElement(Customize, {
+    handleFormSubmit: handleFormSubmit,
+    theme: previewingTheme
+  }));
+};
+export default ThemeSidebar;

package/dist/ThemeSidebar/themeSidebar.scss

@@ -0,0 +1,45 @@
+.neeto-molecules-theme-design-sidebar {
+  width: 320px;
+  height: 100%;
+  background-color: rgb(var(--neeto-ui-white));
+  box-shadow: var(--neeto-ui-shadow-s);
+
+  .neeto-molecules-theme-design-sidebar__header {
+    padding-top: 16px;
+    padding-bottom: 8px;
+  }
+
+  .neeto-molecules-theme-design-sidebar__scroll {
+    height: 94%;
+    overflow-y: auto;
+
+    .neeto-ui-colorpicker__target {
+      .neeto-ui-colorpicker-target__code {
+        display: none;
+      }
+    }
+  }
+}
+
+.neeto-molecules-theme-design-preview__wrapper {
+  position: relative;
+  background-color: rgb(var(--neeto-ui-gray-100));
+  height: 100%;
+  flex-grow: 1;
+}
+
+.neeto-molecules-theme-thumbnail--active {
+  border-color: rgb(var(--neeto-ui-primary-500)) !important;
+  box-shadow: 0px 0px 0px 1px rgb(var(--neeto-ui-primary-500)) !important;
+}
+
+.neeto-molecules-theme-thumbnail--preview-active {
+  border-color: rgb(var(--neeto-ui-gray-700));
+  box-shadow: 0px 0px 0px 1px rgb(var(--neeto-ui-gray-700));
+}
+
+.neeto-molecules-theme-thumbnail--highlight-active {
+  transition: border-color 100ms box-shadow 100ms;
+  border-color: rgb(var(--neeto-ui-success-500));
+  box-shadow: 0px 0px 0px 1px rgb(var(--neeto-ui-success-500));
+}

package/dist/ThemeSidebar/utils.js

@@ -0,0 +1,169 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+var readFile = function readFile(file) {
+  return new Promise(function (resolve) {
+    var reader = new FileReader();
+    reader.onload = function () {
+      resolve(reader.result);
+    };
+    reader.readAsDataURL(file);
+  });
+};
+var getImage = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file) {
+    var image;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          image = new Image();
+          _context.next = 3;
+          return readFile(file);
+        case 3:
+          image.src = _context.sent;
+          return _context.abrupt("return", new Promise(function (resolve) {
+            image.onload = function () {
+              resolve(image);
+            };
+          }));
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getImage(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+export var transformTheme = function transformTheme(values) {
+  return {
+    name: values.name,
+    colorScheme: {
+      backgroundColor: values.backgroundColor,
+      questionColor: values.questionColor,
+      buttonBackgroundColor: values.buttonBackgroundColor,
+      buttonTextColor: values.buttonTextColor,
+      answerColor: values.answerColor,
+      answerTextColor: values.answerTextColor
+    },
+    backgroundImage: _objectSpread(_objectSpread({}, values.backgroundImage), {}, {
+      backgroundColor: values.backgroundColor,
+      backgroundOverlayOpacity: values.backgroundOverlayOpacity,
+      isDominantBackgroundColorEnabled: values.isDominantBackgroundColorEnabled,
+      backgroundPosition: values.backgroundImage.backgroundPosition
+    }),
+    fontOptions: {
+      fontFamily: values.fontFamily
+    },
+    buttonOptions: {
+      buttonBorderRadius: values.buttonBorderRadius
+    },
+    layout: {
+      isContentBackgroundEnabled: values.isContentBackgroundEnabled,
+      contentBackgroundColor: values.contentBackgroundColor,
+      welcomeTextAlignment: values.welcomeTextAlignment,
+      thankYouTextAlignment: values.thankYouTextAlignment,
+      questionsTextAlignment: values.questionsTextAlignment,
+      logo: values.logo
+    }
+  };
+};
+export var parseTheme = function parseTheme(theme) {
+  var _theme$layout$logo;
+  return {
+    name: theme.name,
+    backgroundColor: theme.colorScheme.backgroundColor,
+    questionColor: theme.colorScheme.questionColor,
+    buttonBackgroundColor: theme.colorScheme.buttonBackgroundColor,
+    buttonTextColor: theme.colorScheme.buttonTextColor,
+    answerColor: theme.colorScheme.answerColor,
+    answerTextColor: theme.colorScheme.answerTextColor,
+    backgroundImage: theme.backgroundImage,
+    backgroundOverlayOpacity: theme.backgroundImage.backgroundOverlayOpacity,
+    fontFamily: theme.fontOptions.fontFamily,
+    buttonBorderRadius: theme.buttonOptions.buttonBorderRadius,
+    isDominantBackgroundColorEnabled: theme.backgroundImage.isDominantBackgroundColorEnabled,
+    isContentBackgroundEnabled: theme.layout.isContentBackgroundEnabled,
+    contentBackgroundColor: theme.layout.contentBackgroundColor,
+    welcomeTextAlignment: theme.layout.welcomeTextAlignment,
+    thankYouTextAlignment: theme.layout.thankYouTextAlignment,
+    questionsTextAlignment: theme.layout.questionsTextAlignment,
+    logo: (_theme$layout$logo = theme.layout.logo) !== null && _theme$layout$logo !== void 0 ? _theme$layout$logo : {}
+  };
+};
+export var getContrast = function getContrast(hexcolor) {
+  // If a leading # is provided, remove it
+  if (hexcolor.slice(0, 1) === "#") {
+    hexcolor = hexcolor.slice(1);
+  }
+
+  // If a three-character hexcode, make six-character
+  if (hexcolor.length === 3) {
+    hexcolor = hexcolor.split("").map(function (hex) {
+      return hex + hex;
+    }).join("");
+  }
+
+  // Convert to RGB value
+  var r = parseInt(hexcolor.substr(0, 2), 16);
+  var g = parseInt(hexcolor.substr(2, 2), 16);
+  var b = parseInt(hexcolor.substr(4, 2), 16);
+
+  // Get YIQ ratio
+  var yiq = (r * 299 + g * 587 + b * 114) / 1000;
+
+  // Check contrast
+  return yiq >= 128 ? "#000000" : "#ffffff";
+};
+export var hexToRgb = function hexToRgb(hex) {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.padEnd(7, "0"));
+  return result ? "".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16)) : null;
+};
+export var getDominantColor = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(file) {
+    var image, context, c, hex;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 2;
+          return getImage(file);
+        case 2:
+          image = _context2.sent;
+          context = document.createElement("canvas").getContext("2d");
+          context === null || context === void 0 ? void 0 : context.drawImage(image, 0, 0, 1, 1);
+          c = context === null || context === void 0 ? void 0 : context.getImageData(0, 0, 1, 1).data;
+          if (!c) {
+            _context2.next = 9;
+            break;
+          }
+          hex = "#".concat(((1 << 24) + (c[0] << 16) + (c[1] << 8) + c[2]).toString(16).slice(1));
+          return _context2.abrupt("return", hex);
+        case 9:
+          return _context2.abrupt("return", null);
+        case 10:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function getDominantColor(_x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+export var bytesToSize = function bytesToSize(bytes) {
+  var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  if (bytes === 0) return "n/a";
+  var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
+  if (i === 0) return "".concat(bytes, " ").concat(sizes[i], ")");
+  return "".concat((bytes / Math.pow(1024, i)).toFixed(1), " ").concat(sizes[i]);
+};
+export var scrollElementIntoView = function scrollElementIntoView(elementId) {
+  var _elementToScroll$scro;
+  var elementToScroll = document.getElementById(elementId);
+  elementToScroll === null || elementToScroll === void 0 ? void 0 : (_elementToScroll$scro = elementToScroll.scrollIntoView) === null || _elementToScroll$scro === void 0 ? void 0 : _elementToScroll$scro.call(elementToScroll, {
+    behavior: "smooth"
+  });
+};

package/dist/TimeFormat/index.js

@@ -0,0 +1,3 @@
+import DateFormat from "../DateFormat";
+var TimeFormat = DateFormat;
+export default TimeFormat;

package/dist/TimezoneMismatchModal/apis/time_zone.js

@@ -0,0 +1,9 @@
+import axios from "axios";
+var timeZoneUrl = "api/v1/time_zone";
+var updateTimeZone = function updateTimeZone(payload) {
+  return axios.patch(timeZoneUrl, payload);
+};
+var timeZoneApi = {
+  updateTimeZone: updateTimeZone
+};
+export default timeZoneApi;

package/dist/TimezoneMismatchModal/index.js

@@ -0,0 +1,83 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/* eslint-disable @bigbinary/neeto/use-webpack-alias */
+import React, { useEffect, useState } from "react";
+import { Button, Modal, Typography } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import { useUpdateTimeZone } from "./useTimeZoneApi";
+import { checkIfTwoTimeZonesAreSame, getBrowserTimeZone, getUserTimeZone } from "./utils";
+var TimezoneMismatchModal = function TimezoneMismatchModal(_ref) {
+  var _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTimezoneModalOpen = _useState2[0],
+    setIsTimezoneModalOpen = _useState2[1];
+  var _useUpdateTimeZone = useUpdateTimeZone(),
+    isLoading = _useUpdateTimeZone.isLoading,
+    updateTimeZone = _useUpdateTimeZone.mutate;
+  var isUserAndBrowserTimeZoneSame = checkIfTwoTimeZonesAreSame(getUserTimeZone(), getBrowserTimeZone());
+  var handleUpdateTimeZone = function handleUpdateTimeZone() {
+    var payload = {
+      timeZone: getBrowserTimeZone()
+    };
+    updateTimeZone(payload, {
+      onSuccess: function onSuccess() {
+        setIsTimezoneModalOpen(false);
+        onClose();
+      }
+    });
+  };
+  var handleCancel = function handleCancel() {
+    setIsTimezoneModalOpen(false);
+    onClose();
+  };
+  useEffect(function () {
+    if (process.env.RAILS_ENV !== "heroku") {
+      setIsTimezoneModalOpen(!isUserAndBrowserTimeZoneSame);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(Modal, {
+    closeOnOutsideClick: false,
+    isOpen: isTimezoneModalOpen || isOpen,
+    size: "large",
+    onClose: handleCancel
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    style: "h2",
+    weight: "normal"
+  }, t("neetoMolecules.alert.timezone.title"))), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("span", {
+    className: "flex flex-col space-y-4"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    component: "span",
+    style: "body2"
+  }, t("neetoMolecules.alert.timezone.message", {
+    entity: globalProps.appName
+  })), /*#__PURE__*/React.createElement(Typography, {
+    component: "span",
+    style: "h4"
+  }, t("neetoMolecules.alert.timezone.userTimezone", {
+    entity: getUserTimeZone()
+  })), /*#__PURE__*/React.createElement(Typography, {
+    component: "span",
+    style: "h4"
+  }, t("neetoMolecules.alert.timezone.browserTimezone", {
+    entity: getBrowserTimeZone()
+  })))), /*#__PURE__*/React.createElement(Modal.Footer, {
+    className: "space-x-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "update-timezone-button",
+    disabled: isLoading,
+    label: t("neetoMolecules.alert.timezone.updateProfile"),
+    loading: isLoading,
+    style: "primary",
+    onClick: handleUpdateTimeZone
+  }), /*#__PURE__*/React.createElement(Button, {
+    label: t("neetoMolecules.common.actions.cancel"),
+    style: "text",
+    onClick: handleCancel
+  })));
+};
+export default TimezoneMismatchModal;

package/dist/TimezoneMismatchModal/useTimeZoneApi.js

@@ -0,0 +1,10 @@
+import { useMutation } from "react-query";
+import timeZoneApi from "./apis/time_zone";
+var useUpdateTimeZone = function useUpdateTimeZone() {
+  return useMutation(timeZoneApi.updateTimeZone, {
+    onSuccess: function onSuccess() {
+      return window.location.reload();
+    }
+  });
+};
+export { useUpdateTimeZone };

package/dist/TimezoneMismatchModal/utils.js

@@ -0,0 +1,12 @@
+import dayjs from "dayjs";
+import { globalProps } from "@bigbinary/neeto-commons-frontend/initializers";
+export var getBrowserTimeZone = function getBrowserTimeZone() {
+  return dayjs.tz.guess();
+};
+export var getUserTimeZone = function getUserTimeZone() {
+  var _globalProps$user;
+  return (_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.timeZone;
+};
+export var checkIfTwoTimeZonesAreSame = function checkIfTwoTimeZonesAreSame(timeZone1, timeZone2) {
+  return dayjs().tz(timeZone1).format("Z") === dayjs().tz(timeZone2).format("Z");
+};

package/dist/ToggleFeatureCard/ToolTipSwitch.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["t", "enabledCondition", "name", "isDisabled", "switchDataCy"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from "react";
+import { withT } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Tooltip } from "@bigbinary/neetoui";
+import { Switch as FormikSwitch } from "@bigbinary/neetoui/formik";
+var TooltipSwitch = withT(function (_ref) {
+  var t = _ref.t,
+    enabledCondition = _ref.enabledCondition,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? "" : _ref$name,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    switchDataCy = _ref.switchDataCy,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    position: "top",
+    content: enabledCondition ? t("neetoMolecules.toggleFeatureCard.switchTooltip.enabled") : t("neetoMolecules.toggleFeatureCard.switchTooltip.disabled")
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormikSwitch, _extends({
+    "data-cy": switchDataCy,
+    "data-testid": "toggle-feature-card-switch",
+    disabled: isDisabled
+  }, _objectSpread({
+    name: name
+  }, otherProps)))));
+});
+export default TooltipSwitch;

package/dist/ToggleFeatureCard/constants.js

@@ -0,0 +1,5 @@
+export var SIZES = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};

package/dist/ToggleFeatureCard/hooks/useScrollIntoView.js

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+var useScrollIntoView = function useScrollIntoView(_ref) {
+  var elementId = _ref.elementId,
+    trigger = _ref.trigger;
+  useEffect(function () {
+    var _document$getElementB;
+    if (!trigger) return;
+    (_document$getElementB = document.getElementById(elementId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView();
+  }, [trigger]);
+};
+export default useScrollIntoView;