@bigbinary/neeto-themes-frontend 4.0.20 → 4.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2589 +1,60 @@
1
- import { shallow } from 'zustand/shallow';
2
- import { Suspense, lazy, useEffect, createElement, useState, useRef, memo, useCallback } from 'react';
3
- import { isPresent, hyphenate, findBy, findIndexBy, isNot, filterBy, snakeToCamelCase, isNotPresent, toLabelAndValue, humanize, capitalize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
4
- import { useMutationWithInvalidation, useQueryParams, useBreakpoints, PageTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
5
- import Spinner from '@bigbinary/neetoui/Spinner';
6
- import { useTranslation, Trans } from 'react-i18next';
7
- import { B as BASE_URL, b as scrollElementIntoView, c as setCustomCSS, g as getDominantColorFromUrl, i as isEditThemeRoute, d as isFunction, e as isNewThemeRoute } from './index-JpAFUrB8.js';
8
- import { useQuery, useQueryClient } from '@tanstack/react-query';
9
- import axios from 'axios';
10
- import { Q as QUERY_KEYS, b as useConfigStore, a as useExpandedSection, c as useThemeStore, u as useThemeUtils, P as POSITION_OPTIONS, H as HUNDRED, O as OVERLAY_OPACITY_SLIDER_MARKS, F as FONT_OPTIONS, d as useSyncExpandedSectionFromUrl, T as THEME_VALIDATION_SCHEMA, A as APPLY_SPINNER_DELAY } from './useExpandedSection-D9J7nzlC.js';
11
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
12
- import classnames from 'classnames';
13
- import { joinHyphenCase, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
14
- import Collapse from '@bigbinary/neeto-icons/Collapse';
15
- import Alert from '@bigbinary/neetoui/Alert';
16
- import Button from '@bigbinary/neetoui/Button';
17
- import { useHistory, useParams, Switch as Switch$1, Route } from 'react-router-dom';
18
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
19
- import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
20
- import Close from '@bigbinary/neeto-icons/Close';
21
- import { isEmpty, negate, isNotNil } from 'ramda';
22
- import Popover from '@bigbinary/neetoui/Popover';
23
- import Typography from '@bigbinary/neetoui/Typography';
24
- import Switch from '@bigbinary/neetoui/Switch';
25
- import Tooltip from '@bigbinary/neetoui/Tooltip';
26
- import Form from '@bigbinary/neetoui/formik/Form';
27
- import BlockNavigation from '@bigbinary/neetoui/formik/BlockNavigation';
28
- import { useFormikContext, Field } from 'formik';
29
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
30
- import i18n, { t as t$1 } from 'i18next';
31
- import Right from '@bigbinary/neeto-icons/Right';
32
- import Left from '@bigbinary/neeto-icons/Left';
33
- import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
34
- import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
35
- import { flushSync } from 'react-dom';
36
- import Radio from '@bigbinary/neetoui/formik/Radio';
37
- import CenterAlign from '@bigbinary/neeto-icons/CenterAlign';
38
- import LeftAlign from '@bigbinary/neeto-icons/LeftAlign';
39
- import ColorPicker from '@bigbinary/neetoui/ColorPicker';
40
- import Select from '@bigbinary/neetoui/Select';
41
- import { Slider } from 'antd';
42
- import Input from '@bigbinary/neetoui/Input';
43
- import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
44
- import _regeneratorRuntime from '@babel/runtime/regenerator';
45
- import ImageUploader from '@bigbinary/neeto-image-uploader-frontend/ImageUploader';
46
- import Toastr from '@bigbinary/neetoui/Toastr';
47
- import Input$1 from '@bigbinary/neetoui/formik/Input';
48
- import Search from '@bigbinary/neeto-molecules/Search';
49
- import AddImage from '@bigbinary/neeto-icons/AddImage';
50
- import CodeBlock from '@bigbinary/neeto-icons/CodeBlock';
51
- import ColorPicker$1 from '@bigbinary/neeto-icons/ColorPicker';
52
- import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
53
- import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
54
- import RightArrow from '@bigbinary/neeto-icons/RightArrow';
55
- import Search$1 from '@bigbinary/neeto-icons/Search';
1
+ import 'zustand/shallow';
2
+ import 'react';
3
+ import '@bigbinary/neeto-cist';
4
+ import '@bigbinary/neeto-commons-frontend/react-utils';
5
+ import '@bigbinary/neetoui/Spinner';
6
+ import 'react-i18next';
7
+ import './index-BZB12oJt.js';
8
+ export { N as default } from './index-CP_iY2P0.js';
9
+ import './useExpandedSection-CelNLEKQ.js';
10
+ import 'react/jsx-runtime';
11
+ import '@babel/runtime/helpers/asyncToGenerator';
12
+ import '@babel/runtime/regenerator';
13
+ import '@bigbinary/neetoui/Toastr';
14
+ import '@tanstack/react-query';
15
+ import 'axios';
16
+ import '@babel/runtime/helpers/slicedToArray';
17
+ import 'i18next';
18
+ import 'classnames';
19
+ import '@bigbinary/neeto-commons-frontend/utils';
20
+ import '@bigbinary/neeto-icons/Collapse';
21
+ import '@bigbinary/neetoui/Alert';
22
+ import '@bigbinary/neetoui/Button';
23
+ import 'react-router-dom';
24
+ import '@babel/runtime/helpers/defineProperty';
25
+ import '@babel/runtime/helpers/objectWithoutProperties';
26
+ import '@bigbinary/neeto-icons/Close';
27
+ import 'ramda';
28
+ import '@bigbinary/neetoui/Popover';
29
+ import '@bigbinary/neetoui/Typography';
30
+ import '@bigbinary/neetoui/Switch';
31
+ import '@bigbinary/neetoui/Tooltip';
32
+ import '@bigbinary/neetoui/formik/Form';
33
+ import '@bigbinary/neetoui/formik/BlockNavigation';
34
+ import 'formik';
35
+ import '@bigbinary/neeto-icons/Right';
36
+ import '@bigbinary/neeto-icons/Left';
37
+ import '@bigbinary/neeto-molecules/HelpPopover';
38
+ import '@babel/runtime/helpers/toConsumableArray';
39
+ import 'react-dom';
40
+ import '@bigbinary/neetoui/formik/Radio';
41
+ import '@bigbinary/neeto-icons/CenterAlign';
42
+ import '@bigbinary/neeto-icons/LeftAlign';
43
+ import '@bigbinary/neetoui/ColorPicker';
44
+ import '@bigbinary/neetoui/Select';
45
+ import 'antd';
46
+ import '@bigbinary/neetoui/Checkbox';
47
+ import '@bigbinary/neetoui/Input';
48
+ import '@bigbinary/neeto-image-uploader-frontend/ImageUploader';
49
+ import '@bigbinary/neetoui/formik/Input';
50
+ import '@bigbinary/neeto-molecules/Search';
51
+ import '@bigbinary/neeto-icons/AddImage';
52
+ import '@bigbinary/neeto-icons/CodeBlock';
53
+ import '@bigbinary/neeto-icons/ColorPicker';
54
+ import '@bigbinary/neeto-molecules/MoreDropdown';
55
+ import '@bigbinary/neeto-icons/LeftArrow';
56
+ import '@bigbinary/neeto-icons/RightArrow';
57
+ import '@bigbinary/neeto-icons/Search';
56
58
  import 'zustand';
57
59
  import 'yup';
58
-
59
- var show$2 = function show(entityId) {
60
- return axios.get("".concat(BASE_URL, "/api/v1/entities/").concat(entityId));
61
- };
62
- var entitiesApi = {
63
- show: show$2
64
- };
65
-
66
- var useShowThemeEntity = function useShowThemeEntity(entityId) {
67
- return useQuery({
68
- queryKey: [QUERY_KEYS.THEME_ENTITY_DETAILS, entityId],
69
- queryFn: function queryFn() {
70
- return entitiesApi.show(entityId);
71
- },
72
- enabled: !!entityId
73
- });
74
- };
75
-
76
- var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=true===r.prepend?"prepend":"append",d=true===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
77
-
78
- var css = ":root{--themes-sidebar-expanded:520px;--themes-sidebar-width-xl:340px;--themes-sidebar-width-lg:320px;--themes-sidebar-width-sm:280px;--themes-sidebar-header-height:120px;--builder-header-height:65px}.neeto-themes__wrapper{display:flex;height:calc(100vh - 65px);height:calc(var(--viewport-height, 100vh) - var(--builder-header-height));width:100%}.neeto-themes__wrapper .neeto-themes-sidebar{background-color:rgb(var(--neeto-ui-white));height:100%;inset-inline-start:0;padding-top:1.5rem;position:fixed;top:0;transition:none;width:100%;z-index:102}.neeto-themes__wrapper .neeto-themes-sidebar--expanded{max-width:100%;width:520px!important;width:var(--themes-sidebar-expanded)!important}@media screen and (min-width:576px){.neeto-themes__wrapper .neeto-themes-sidebar{width:280px;width:var(--themes-sidebar-width-sm)}}@media screen and (min-width:768px){.neeto-themes__wrapper .neeto-themes-sidebar{height:calc(100vh - 65px);height:calc(var(--viewport-height, 100vh) - var(--builder-header-height));padding-top:0;position:relative}}@media screen and (min-width:1024px){.neeto-themes__wrapper .neeto-themes-sidebar{width:320px;width:var(--themes-sidebar-width-lg)}}@media screen and (min-width:1280px){.neeto-themes__wrapper .neeto-themes-sidebar{width:340px;width:var(--themes-sidebar-width-xl)}}.neeto-themes__wrapper .neeto-themes-sidebar--collapsed{max-width:0;min-width:0;width:0}.neeto-themes__wrapper .neeto-themes-sidebar--collapsed .neeto-themes-sidebar__toggler{transform:scale(-1)}@media screen and (max-width:767px){.neeto-themes__wrapper .neeto-themes-sidebar--collapsed .neeto-themes-sidebar__toggler{top:6.8125rem}}@media screen and (max-width:576px){.neeto-themes__wrapper .neeto-themes-sidebar--collapsed .neeto-themes-sidebar__toggler{inset-inline-end:auto;inset-inline-start:.5rem}}.neeto-themes__wrapper .neeto-themes-sidebar--collapsed .neeto-themes-sidebar__header{display:none}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__header{padding-bottom:.5rem;padding-top:1rem}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll{display:flex;flex-direction:column;height:calc(100vh - 120px);height:calc(var(--viewport-height, 100vh) - var(--themes-sidebar-header-height));overflow-y:auto}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll .neeto-ui-colorpicker__target .neeto-ui-colorpicker-target__code{display:none}.neeto-themes__wrapper .css-editor-height__expanded{height:calc(100vh - 300px);height:calc(var(--viewport-height, 100vh) - 300px)}.neeto-themes__wrapper .css-editor-height__regular{height:384px}.neeto-themes__wrapper .neeto-themes-preview__wrapper{flex-grow:1;height:calc(100vh - 65px);height:calc(var(--viewport-height, 100vh) - var(--builder-header-height));position:relative}.neeto-themes-theme-thumbnail:hover{box-shadow:0 0 0 2px rgb(var(--neeto-ui-gray-200))}.neeto-themes-theme-thumbnail:hover .neeto-themes-theme-thumbnail__overlay{opacity:.6}.neeto-themes-theme-thumbnail--preview-active{border-color:rgb(var(--neeto-ui-gray-600))!important;box-shadow:none!important;outline:2px solid rgb(var(--neeto-ui-gray-600))!important}.neeto-themes-theme-thumbnail--preview-active .neeto-themes-theme-thumbnail__overlay{opacity:.6}.neeto-themes-theme-thumbnail--active{border-color:rgb(var(--neeto-ui-accent-500))!important;box-shadow:none!important;outline:2px solid rgb(var(--neeto-ui-accent-500))!important}.neeto-themes-theme-thumbnail--active .neeto-themes-theme-thumbnail__overlay{opacity:.6}.neeto-themes-theme-thumbnail--highlight-active{border-color:rgb(var(--neeto-ui-gray-400))!important;box-shadow:none!important;outline:2px solid rgb(var(--neeto-ui-gray-400))!important}.neeto-themes-theme-thumbnail__apply-btn:disabled,.neeto-themes-theme-thumbnail__apply-btn[disabled]{opacity:1!important}.neeto-themes-theme-thumbnail__active-label{--neeto-ui-btn-focus-box-shadow:none}.neeto-themes-theme-thumbnail__active-label,.neeto-themes-theme-thumbnail__apply-btn,.neeto-themes-theme-thumbnail__preview-btn{max-width:100%;width:8.125rem}.neeto-themes-theme-thumbnail__preview-btn--disabled{--neeto-ui-btn-color:rgb(var(--neeto-ui-gray-300));--neeto-ui-btn-box-shadow:inset 0 0 0 1px rgba(var(--neeto-ui-gray-300))}.neeto-themes-sidebar__custom-css-editor-header{background-color:#1e1e1e;border-start-end-radius:var(--neeto-ui-rounded-lg);border-start-start-radius:var(--neeto-ui-rounded-lg);display:flex}@media screen and (max-width:576px){.neeto-themes-sidebar__custom-css-editor-header{display:none}}.neeto-themes-sidebar .monaco-editor,.neeto-themes-sidebar .overflow-guard{border-end-end-radius:var(--neeto-ui-rounded-lg);border-end-start-radius:var(--neeto-ui-rounded-lg)}.neeto-themes-sidebar__custom-css-wrapper .neeto-themes-nano-section{border-bottom:0!important}.neeto-themes-sidebar__backdrop{background-color:rgba(var(--neeto-ui-black),.4);display:none;height:100%;inset-inline-start:0;position:fixed;top:0;visibility:hidden;width:100%;z-index:101}@media screen and (max-width:767px){.neeto-themes-sidebar__backdrop{display:block;visibility:visible}}.neeto-themes-sidebar__toggler{flex-shrink:0;inset-inline-start:calc(100% + .5rem);position:absolute;top:.5rem;transition:color .3s ease-in-out}@media screen and (min-width:1024px){.neeto-themes-sidebar__toggler{opacity:0;pointer-events:none}}@media screen and (max-width:576px){.neeto-themes-sidebar__toggler{inset-inline-end:1.5rem;inset-inline-start:auto}}.neeto-themes-nano-alignment-block{border-radius:.375rem}.neeto-themes-nano-alignment-button{--neeto-ui-btn-padding-x:0.75rem!important}.neeto-themes-nano-alignment-button__alignment-left{border-end-end-radius:0!important;border-start-end-radius:0!important}.neeto-themes-nano-alignment-button__alignment-center{border-end-start-radius:0!important;border-start-start-radius:0!important}.neeto-themes-nano-alignment-button.neeto-ui-btn--style-primary{--neeto-ui-btn-bg-color:rgb(var(--neeto-ui-primary-100))!important;--neeto-ui-btn-hover-bg-color:rgb(var(--neeto-ui-primary-100))!important}.neeto-themes-nano-alignment-divider{background:rgb(var(--neeto-ui-gray-200));height:2rem;width:.0625rem}.neeto-themes-nano-section__content--open{max-height:1500px;opacity:1;padding-top:.25rem;visibility:visible}.neeto-themes-nano-section__content--closed{max-height:0;opacity:0;visibility:hidden}.neeto-themes-nano-section__title:focus-visible{box-shadow:0 0 0 3px rgba(var(--neeto-ui-primary-500),15%)}.neeto-themes-flip-animating{transition:transform .9s cubic-bezier(.22,1,.36,1);will-change:transform}.neeto-themes-theme-thumbnail__active-banner{background-color:rgb(var(--neeto-ui-primary-500));color:rgb(var(--neeto-ui-white))}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2Fic3RyYWN0cy92YXJpYWJsZXMuY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvY29tcG9uZW50cy90aGVtZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQ0UsK0JBQWdDLENBQ2hDLCtCQUFnQyxDQUNoQywrQkFBZ0MsQ0FDaEMsK0JBQWdDLENBQ2hDLG9DQUFxQyxDQUNyQyw0QkFDRixDQ1BBLHVCQUVFLFlBQWEsQ0FDYix5QkFBMEUsQ0FBMUUseUVBQTBFLENBRjFFLFVBR0YsQ0FFQSw2Q0FHRSwyQ0FBNEMsQ0FENUMsV0FBWSxDQUlaLG9CQUFxQixDQUdyQixrQkFBbUIsQ0FMbkIsY0FBZSxDQUNmLEtBQU0sQ0FFTixlQUFnQixDQU5oQixVQUFXLENBT1gsV0FFRixDQUVBLHVEQUVFLGNBQWUsQ0FEZixxQkFBZ0QsQ0FBaEQsOENBRUYsQ0FFQSxvQ0FDRSw2Q0FDRSxXQUFxQyxDQUFyQyxvQ0FDRixDQUNGLENBRUEsb0NBQ0UsNkNBR0UseUJBQTBFLENBQTFFLHlFQUEwRSxDQUYxRSxhQUFjLENBQ2QsaUJBRUYsQ0FDRixDQUVBLHFDQUNFLDZDQUNFLFdBQXFDLENBQXJDLG9DQUNGLENBQ0YsQ0FFQSxxQ0FDRSw2Q0FDRSxXQUFxQyxDQUFyQyxvQ0FDRixDQUNGLENBRUEsd0RBRUUsV0FBZSxDQUNmLFdBQWUsQ0FGZixPQUdGLENBRUEsdUZBQ0UsbUJBQ0YsQ0FFQSxvQ0FDRSx1RkFDRSxhQUNGLENBQ0YsQ0FFQSxvQ0FDRSx1RkFDRSxxQkFBc0IsQ0FDdEIsd0JBQ0YsQ0FDRixDQUVBLHNGQUNFLFlBQ0YsQ0FFQSwyRUFFRSxvQkFBc0IsQ0FEdEIsZ0JBRUYsQ0FFQSwyRUFHRSxZQUFhLENBQ2IscUJBQXNCLENBSHRCLDBCQUFpRixDQUFqRixnRkFBaUYsQ0FDakYsZUFHRixDQUVBLDRJQUNFLFlBQ0YsQ0FFQSxvREFDRSwwQkFBbUQsQ0FBbkQsa0RBQ0YsQ0FFQSxtREFDRSxZQUNGLENBRUEsc0RBR0UsV0FBWSxDQURaLHlCQUEwRSxDQUExRSx5RUFBMEUsQ0FEMUUsaUJBR0YsQ0FFQSxvQ0FDRSxrREFDRixDQUVBLDJFQUNFLFVBQ0YsQ0FFQSw4Q0FDRSxvREFBc0QsQ0FFdEQseUJBQTJCLENBRDNCLHlEQUVGLENBRUEscUZBQ0UsVUFDRixDQUVBLHNDQUNFLHNEQUF3RCxDQUV4RCx5QkFBMkIsQ0FEM0IsMkRBRUYsQ0FFQSw2RUFDRSxVQUNGLENBRUEsZ0RBQ0Usb0RBQXNELENBRXRELHlCQUEyQixDQUQzQix5REFFRixDQUVBLHFHQUVFLG1CQUNGLENBRUEsNENBQ0Usb0NBQ0YsQ0FFQSxnSUFJRSxjQUFlLENBRGYsY0FFRixDQUVBLHFEQUNFLGtEQUFtRCxDQUNuRCx3RUFDRixDQUVBLGdEQUVFLHdCQUF5QixDQUV6QixrREFBbUQsQ0FEbkQsb0RBQXFELENBRnJELFlBSUYsQ0FFQSxvQ0FDRSxnREFDRSxZQUNGLENBQ0YsQ0FFQSwyRUFHRSxnREFBaUQsQ0FEakQsa0RBRUYsQ0FFQSxxRUFDRSx5QkFDRixDQUVBLGdDQU1FLCtDQUFrRCxDQUNsRCxZQUFhLENBRmIsV0FBWSxDQUZaLG9CQUFxQixDQUZyQixjQUFlLENBQ2YsS0FBTSxDQU1OLGlCQUFrQixDQUpsQixVQUFXLENBS1gsV0FDRixDQUVBLG9DQUNFLGdDQUNFLGFBQWMsQ0FDZCxrQkFDRixDQUNGLENBRUEsK0JBSUUsYUFBYyxDQURkLHFDQUF1QyxDQUZ2QyxpQkFBa0IsQ0FDbEIsU0FBVyxDQUdYLGdDQUNGLENBRUEscUNBQ0UsK0JBQ0UsU0FBVSxDQUNWLG1CQUNGLENBQ0YsQ0FFQSxvQ0FDRSwrQkFFRSx1QkFBd0IsQ0FEeEIsdUJBRUYsQ0FDRixDQUVBLG1DQUNFLHFCQUNGLENBRUEsb0NBQ0UsMENBQ0YsQ0FFQSxvREFFRSxpQ0FBcUMsQ0FEckMsbUNBRUYsQ0FFQSxzREFFRSxtQ0FBdUMsQ0FEdkMscUNBRUYsQ0FFQSxnRUFDRSxrRUFBb0UsQ0FDcEUsd0VBQ0YsQ0FFQSxxQ0FHRSx3Q0FBeUMsQ0FEekMsV0FBWSxDQURaLGNBR0YsQ0FFQSwwQ0FDRSxpQkFBa0IsQ0FDbEIsU0FBVSxDQUVWLGtCQUFvQixDQURwQixrQkFFRixDQUVBLDRDQUNFLFlBQWUsQ0FDZixTQUFVLENBQ1YsaUJBQ0YsQ0FFQSxnREFDRSwwREFDRixDQUVBLDZCQUNFLGtEQUEwRCxDQUMxRCxxQkFDRixDQUVBLDZDQUNFLGlEQUFrRCxDQUNsRCxnQ0FDRiIsInNvdXJjZXNDb250ZW50IjpbIjpyb290IHtcbiAgLS10aGVtZXMtc2lkZWJhci1leHBhbmRlZDogNTIwcHg7XG4gIC0tdGhlbWVzLXNpZGViYXItd2lkdGgteGw6IDM0MHB4O1xuICAtLXRoZW1lcy1zaWRlYmFyLXdpZHRoLWxnOiAzMjBweDtcbiAgLS10aGVtZXMtc2lkZWJhci13aWR0aC1zbTogMjgwcHg7XG4gIC0tdGhlbWVzLXNpZGViYXItaGVhZGVyLWhlaWdodDogMTIwcHg7XG4gIC0tYnVpbGRlci1oZWFkZXItaGVpZ2h0OiA2NXB4O1xufVxuIiwiLm5lZXRvLXRoZW1lc19fd3JhcHBlciB7XG4gIHdpZHRoOiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBoZWlnaHQ6IGNhbGModmFyKC0tdmlld3BvcnQtaGVpZ2h0LCAxMDB2aCkgLSB2YXIoLS1idWlsZGVyLWhlYWRlci1oZWlnaHQpKTtcbn1cblxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktd2hpdGUpKTtcbiAgcG9zaXRpb246IGZpeGVkO1xuICB0b3A6IDA7XG4gIGluc2V0LWlubGluZS1zdGFydDogMDtcbiAgdHJhbnNpdGlvbjogbm9uZTtcbiAgei1pbmRleDogMTAyO1xuICBwYWRkaW5nLXRvcDogMS41cmVtO1xufVxuXG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhci0tZXhwYW5kZWQge1xuICB3aWR0aDogdmFyKC0tdGhlbWVzLXNpZGViYXItZXhwYW5kZWQpICFpbXBvcnRhbnQ7XG4gIG1heC13aWR0aDogMTAwJTtcbn1cblxuQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNTc2cHgpIHtcbiAgLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiB2YXIoLS10aGVtZXMtc2lkZWJhci13aWR0aC1zbSk7XG4gIH1cbn1cblxuQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNzY4cHgpIHtcbiAgLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHBhZGRpbmctdG9wOiAwO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBoZWlnaHQ6IGNhbGModmFyKC0tdmlld3BvcnQtaGVpZ2h0LCAxMDB2aCkgLSB2YXIoLS1idWlsZGVyLWhlYWRlci1oZWlnaHQpKTtcbiAgfVxufVxuXG5AbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiAxMDI0cHgpIHtcbiAgLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiB2YXIoLS10aGVtZXMtc2lkZWJhci13aWR0aC1sZyk7XG4gIH1cbn1cblxuQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogMTI4MHB4KSB7XG4gIC5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgICB3aWR0aDogdmFyKC0tdGhlbWVzLXNpZGViYXItd2lkdGgteGwpO1xuICB9XG59XG5cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyLS1jb2xsYXBzZWQge1xuICB3aWR0aDogMHJlbTtcbiAgbWF4LXdpZHRoOiAwcmVtO1xuICBtaW4td2lkdGg6IDByZW07XG59XG5cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyLS1jb2xsYXBzZWQgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX190b2dnbGVyIHtcbiAgdHJhbnNmb3JtOiBzY2FsZSgtMSk7XG59XG5cbkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7XG4gIC5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyLS1jb2xsYXBzZWQgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX190b2dnbGVyIHtcbiAgICB0b3A6IDYuODEyNXJlbTtcbiAgfVxufVxuXG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA1NzZweCkge1xuICAubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhci0tY29sbGFwc2VkIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fdG9nZ2xlciB7XG4gICAgaW5zZXQtaW5saW5lLWVuZDogYXV0bztcbiAgICBpbnNldC1pbmxpbmUtc3RhcnQ6IDAuNXJlbTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhci0tY29sbGFwc2VkIC5uZWV0by10aGVtZXMtc2lkZWJhcl9faGVhZGVyIHtcbiAgZGlzcGxheTogbm9uZTtcbn1cblxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19oZWFkZXIge1xuICBwYWRkaW5nLXRvcDogMXJlbTtcbiAgcGFkZGluZy1ib3R0b206IDAuNXJlbTtcbn1cblxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19zY3JvbGwge1xuICBoZWlnaHQ6IGNhbGModmFyKC0tdmlld3BvcnQtaGVpZ2h0LCAxMDB2aCkgLSB2YXIoLS10aGVtZXMtc2lkZWJhci1oZWFkZXItaGVpZ2h0KSk7XG4gIG92ZXJmbG93LXk6IGF1dG87XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG59XG5cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fc2Nyb2xsIC5uZWV0by11aS1jb2xvcnBpY2tlcl9fdGFyZ2V0IC5uZWV0by11aS1jb2xvcnBpY2tlci10YXJnZXRfX2NvZGUge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5jc3MtZWRpdG9yLWhlaWdodF9fZXhwYW5kZWQge1xuICBoZWlnaHQ6IGNhbGModmFyKC0tdmlld3BvcnQtaGVpZ2h0LCAxMDB2aCkgLSAzMDBweCk7XG59XG5cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLmNzcy1lZGl0b3ItaGVpZ2h0X19yZWd1bGFyIHtcbiAgaGVpZ2h0OiAzODRweDtcbn1cblxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXByZXZpZXdfX3dyYXBwZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGhlaWdodDogY2FsYyh2YXIoLS12aWV3cG9ydC1oZWlnaHQsIDEwMHZoKSAtIHZhcigtLWJ1aWxkZXItaGVhZGVyLWhlaWdodCkpO1xuICBmbGV4LWdyb3c6IDE7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsOmhvdmVyIHtcbiAgYm94LXNoYWRvdzogMHB4IDBweCAwcHggMnB4IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTIwMCkpO1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbDpob3ZlciAubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbF9fb3ZlcmxheSB7XG4gIG9wYWNpdHk6IDAuNjtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLXByZXZpZXctYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktZ3JheS02MDApKSAhaW1wb3J0YW50O1xuICBvdXRsaW5lOiAycHggc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNjAwKSkgIWltcG9ydGFudDtcbiAgYm94LXNoYWRvdzogbm9uZSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tcHJldmlldy1hY3RpdmUgLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX292ZXJsYXkge1xuICBvcGFjaXR5OiAwLjY7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1hY2NlbnQtNTAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1hY2NlbnQtNTAwKSkgIWltcG9ydGFudDtcbiAgYm94LXNoYWRvdzogbm9uZSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tYWN0aXZlIC5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19vdmVybGF5IHtcbiAgb3BhY2l0eTogMC42O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0taGlnaGxpZ2h0LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNDAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTQwMCkpICFpbXBvcnRhbnQ7XG4gIGJveC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX2FwcGx5LWJ0bjpkaXNhYmxlZCxcbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hcHBseS1idG5bZGlzYWJsZWRdIHtcbiAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbF9fYWN0aXZlLWxhYmVsIHtcbiAgLS1uZWV0by11aS1idG4tZm9jdXMtYm94LXNoYWRvdzogbm9uZTtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX3ByZXZpZXctYnRuLFxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX2FwcGx5LWJ0bixcbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hY3RpdmUtbGFiZWwge1xuICB3aWR0aDogOC4xMjVyZW07XG4gIG1heC13aWR0aDogMTAwJTtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX3ByZXZpZXctYnRuLS1kaXNhYmxlZCB7XG4gIC0tbmVldG8tdWktYnRuLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktZ3JheS0zMDApKTtcbiAgLS1uZWV0by11aS1idG4tYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4IHJnYmEodmFyKC0tbmVldG8tdWktZ3JheS0zMDApKTtcbn1cblxuLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19jdXN0b20tY3NzLWVkaXRvci1oZWFkZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjMWUxZTFlO1xuICBib3JkZXItc3RhcnQtc3RhcnQtcmFkaXVzOiB2YXIoLS1uZWV0by11aS1yb3VuZGVkLWxnKTtcbiAgYm9yZGVyLXN0YXJ0LWVuZC1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQtbGcpO1xufVxuXG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA1NzZweCkge1xuICAubmVldG8tdGhlbWVzLXNpZGViYXJfX2N1c3RvbS1jc3MtZWRpdG9yLWhlYWRlciB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXIgLm92ZXJmbG93LWd1YXJkLFxuLm5lZXRvLXRoZW1lcy1zaWRlYmFyIC5tb25hY28tZWRpdG9yIHtcbiAgYm9yZGVyLWVuZC1zdGFydC1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQtbGcpO1xuICBib3JkZXItZW5kLWVuZC1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQtbGcpO1xufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXJfX2N1c3RvbS1jc3Mtd3JhcHBlciAubmVldG8tdGhlbWVzLW5hbm8tc2VjdGlvbiB7XG4gIGJvcmRlci1ib3R0b206IDAgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19iYWNrZHJvcCB7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdG9wOiAwO1xuICBpbnNldC1pbmxpbmUtc3RhcnQ6IDA7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYmEodmFyKC0tbmVldG8tdWktYmxhY2spLCAwLjQpO1xuICBkaXNwbGF5OiBub25lO1xuICB2aXNpYmlsaXR5OiBoaWRkZW47XG4gIHotaW5kZXg6IDEwMTtcbn1cblxuQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzY3cHgpIHtcbiAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19iYWNrZHJvcCB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgdmlzaWJpbGl0eTogdmlzaWJsZTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXJfX3RvZ2dsZXIge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMC41cmVtO1xuICBpbnNldC1pbmxpbmUtc3RhcnQ6IGNhbGMoMTAwJSArIDAuNXJlbSk7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICB0cmFuc2l0aW9uOiBjb2xvciAwLjNzIGVhc2UtaW4tb3V0O1xufVxuXG5AbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiAxMDI0cHgpIHtcbiAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX190b2dnbGVyIHtcbiAgICBvcGFjaXR5OiAwO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB9XG59XG5cbkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDU3NnB4KSB7XG4gIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fdG9nZ2xlciB7XG4gICAgaW5zZXQtaW5saW5lLXN0YXJ0OiBhdXRvO1xuICAgIGluc2V0LWlubGluZS1lbmQ6IDEuNXJlbTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLW5hbm8tYWxpZ25tZW50LWJsb2NrIHtcbiAgYm9yZGVyLXJhZGl1czogMC4zNzVyZW07XG59XG5cbi5uZWV0by10aGVtZXMtbmFuby1hbGlnbm1lbnQtYnV0dG9uIHtcbiAgLS1uZWV0by11aS1idG4tcGFkZGluZy14OiAwLjc1cmVtICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtbmFuby1hbGlnbm1lbnQtYnV0dG9uX19hbGlnbm1lbnQtbGVmdCB7XG4gIGJvcmRlci1zdGFydC1lbmQtcmFkaXVzOiAwcHggIWltcG9ydGFudDtcbiAgYm9yZGVyLWVuZC1lbmQtcmFkaXVzOiAwcHggIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy1uYW5vLWFsaWdubWVudC1idXR0b25fX2FsaWdubWVudC1jZW50ZXIge1xuICBib3JkZXItc3RhcnQtc3RhcnQtcmFkaXVzOiAwcHggIWltcG9ydGFudDtcbiAgYm9yZGVyLWVuZC1zdGFydC1yYWRpdXM6IDBweCAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLW5hbm8tYWxpZ25tZW50LWJ1dHRvbi5uZWV0by11aS1idG4tLXN0eWxlLXByaW1hcnkge1xuICAtLW5lZXRvLXVpLWJ0bi1iZy1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktMTAwKSkgIWltcG9ydGFudDtcbiAgLS1uZWV0by11aS1idG4taG92ZXItYmctY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTEwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtbmFuby1hbGlnbm1lbnQtZGl2aWRlciB7XG4gIHdpZHRoOiAwLjA2MjVyZW07XG4gIGhlaWdodDogMnJlbTtcbiAgYmFja2dyb3VuZDogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktMjAwKSk7XG59XG5cbi5uZWV0by10aGVtZXMtbmFuby1zZWN0aW9uX19jb250ZW50LS1vcGVuIHtcbiAgbWF4LWhlaWdodDogMTUwMHB4O1xuICBvcGFjaXR5OiAxO1xuICB2aXNpYmlsaXR5OiB2aXNpYmxlO1xuICBwYWRkaW5nLXRvcDogMC4yNXJlbTtcbn1cblxuLm5lZXRvLXRoZW1lcy1uYW5vLXNlY3Rpb25fX2NvbnRlbnQtLWNsb3NlZCB7XG4gIG1heC1oZWlnaHQ6IDBweDtcbiAgb3BhY2l0eTogMDtcbiAgdmlzaWJpbGl0eTogaGlkZGVuO1xufVxuXG4ubmVldG8tdGhlbWVzLW5hbm8tc2VjdGlvbl9fdGl0bGU6Zm9jdXMtdmlzaWJsZSB7XG4gIGJveC1zaGFkb3c6IDAgMCAwIDNweCByZ2JhKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSwgMTUlKTtcbn1cblxuLm5lZXRvLXRoZW1lcy1mbGlwLWFuaW1hdGluZyB7XG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSA5MDBtcyBjdWJpYy1iZXppZXIoMC4yMiwgMSwgMC4zNiwgMSk7XG4gIHdpbGwtY2hhbmdlOiB0cmFuc2Zvcm07XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19hY3RpdmUtYmFubmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSk7XG4gIGNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktd2hpdGUpKTtcbn1cbiJdfQ== */";
79
- n(css,{});
80
-
81
- var _excluded$1 = ["themeId"];
82
- var list = function list(entityId) {
83
- return axios.get("".concat(BASE_URL, "/api/v1/themes"), {
84
- params: {
85
- entity_id: entityId
86
- }
87
- });
88
- };
89
- var show$1 = function show(id) {
90
- return axios.get("".concat(BASE_URL, "/api/v1/themes/").concat(id));
91
- };
92
- var create = function create(payload) {
93
- return axios.post("".concat(BASE_URL, "/api/v1/themes"), {
94
- theme: payload
95
- });
96
- };
97
- var update = function update(_ref) {
98
- var id = _ref.id,
99
- payload = _ref.payload;
100
- return axios.put("".concat(BASE_URL, "/api/v1/themes/").concat(id), {
101
- theme: payload
102
- }, {
103
- showToastr: false
104
- });
105
- };
106
- var destroy = function destroy(id) {
107
- return axios["delete"]("".concat(BASE_URL, "/api/v1/themes/").concat(id), {
108
- showToastr: false
109
- });
110
- };
111
- var clone = function clone(id) {
112
- return axios.post("".concat(BASE_URL, "/api/v1/themes/").concat(id, "/clone"), {}, {
113
- showToastr: false
114
- });
115
- };
116
- var apply = function apply(_ref2) {
117
- var themeId = _ref2.themeId,
118
- payload = _objectWithoutProperties(_ref2, _excluded$1);
119
- return axios.post("".concat(BASE_URL, "/api/v1/themes/").concat(themeId, "/apply"), {
120
- entity: payload
121
- }, {
122
- showToastr: false
123
- });
124
- };
125
- var applyGlobalTheme = function applyGlobalTheme(_ref3) {
126
- var themeId = _ref3.themeId,
127
- payload = _ref3.payload;
128
- return axios.post("".concat(BASE_URL, "/api/v1/themes/").concat(themeId, "/apply_global_theme"), {
129
- theme: payload
130
- });
131
- };
132
- var themesApi = {
133
- list: list,
134
- show: show$1,
135
- create: create,
136
- update: update,
137
- destroy: destroy,
138
- clone: clone,
139
- apply: apply,
140
- applyGlobalTheme: applyGlobalTheme
141
- };
142
-
143
- function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
144
- function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
145
- var useListThemes = function useListThemes(entityId) {
146
- var _useConfigStore = useConfigStore(function (store) {
147
- return {
148
- isTemplateThemesEnabled: store["isTemplateThemesEnabled"]
149
- };
150
- }, shallow),
151
- isTemplateThemesEnabled = _useConfigStore.isTemplateThemesEnabled;
152
- var queryKey = isTemplateThemesEnabled ? [QUERY_KEYS.THEMES_LIST, entityId] : [QUERY_KEYS.THEMES_LIST];
153
- return useQuery({
154
- queryKey: queryKey,
155
- queryFn: function queryFn() {
156
- return themesApi.list(entityId);
157
- }
158
- });
159
- };
160
- var useFetchTheme = function useFetchTheme(themeId, options) {
161
- return useQuery(_objectSpread$5({
162
- queryKey: [QUERY_KEYS.THEME_DETAILS, themeId],
163
- queryFn: function queryFn() {
164
- return themesApi.show(themeId);
165
- }
166
- }, options));
167
- };
168
- var useCreateTheme = function useCreateTheme() {
169
- return useMutationWithInvalidation(themesApi.create, {
170
- keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS], [QUERY_KEYS.GLOBAL_THEME_DETAILS]]
171
- });
172
- };
173
- var useUpdateTheme = function useUpdateTheme(themeId) {
174
- var queryClient = useQueryClient();
175
- return useMutationWithInvalidation(function (payload) {
176
- return themesApi.update({
177
- id: themeId,
178
- payload: payload
179
- });
180
- }, {
181
- keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS], [QUERY_KEYS.THEME_DETAILS, themeId], [QUERY_KEYS.GLOBAL_THEME_DETAILS]],
182
- onSuccess: function onSuccess(_ref) {
183
- var theme = _ref.theme;
184
- queryClient.setQueryData([QUERY_KEYS.THEME_DETAILS, themeId], theme);
185
- }
186
- });
187
- };
188
- var useDeleteTheme = function useDeleteTheme() {
189
- return useMutationWithInvalidation(themesApi.destroy, {
190
- keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS]]
191
- });
192
- };
193
- var useCloneTheme = function useCloneTheme() {
194
- return useMutationWithInvalidation(themesApi.clone, {
195
- keysToInvalidate: [QUERY_KEYS.THEMES_LIST]
196
- });
197
- };
198
- var useApplyTheme = function useApplyTheme(_ref2) {
199
- var onSuccess = _ref2.onSuccess;
200
- return useMutationWithInvalidation(themesApi.apply, {
201
- keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS]],
202
- onSuccess: onSuccess
203
- });
204
- };
205
-
206
- var routes = {
207
- themes: {
208
- index: "/themes",
209
- edit: "/themes/:themeId/edit",
210
- "new": "/themes/new"
211
- }
212
- };
213
-
214
- var show = function show(entityType) {
215
- return axios.get("".concat(BASE_URL, "/api/v1/global_theme"), {
216
- params: {
217
- entity_type: entityType
218
- }
219
- });
220
- };
221
- var globalThemesApi = {
222
- show: show
223
- };
224
-
225
- var useShowGlobalTheme = function useShowGlobalTheme(entityType) {
226
- return useQuery({
227
- queryKey: [QUERY_KEYS.GLOBAL_THEME_DETAILS, entityType],
228
- queryFn: function queryFn() {
229
- return globalThemesApi.show(entityType);
230
- },
231
- enabled: !!entityType
232
- });
233
- };
234
-
235
- var DESIGN_SCREENS = {
236
- THEMES: "Themes",
237
- Customize: "Customize",
238
- CustomCSS: "CustomCSS"
239
- };
240
- var ONE_MEGABYTE = 1;
241
-
242
- var MonacoEditor = /*#__PURE__*/lazy(function () {
243
- return import('@monaco-editor/react');
244
- });
245
- var Editor = function Editor(_ref) {
246
- var value = _ref.value,
247
- isCustomCssScreen = _ref.isCustomCssScreen,
248
- onChange = _ref.onChange;
249
- return /*#__PURE__*/jsx(Suspense, {
250
- fallback: /*#__PURE__*/jsx(Spinner, {}),
251
- children: /*#__PURE__*/jsx(MonacoEditor, {
252
- onChange: onChange,
253
- value: value,
254
- language: "css",
255
- theme: "vs-dark",
256
- className: classnames({
257
- rounded: true,
258
- "css-editor-height__expanded": isCustomCssScreen,
259
- "css-editor-height__regular": !isCustomCssScreen
260
- }),
261
- options: {
262
- scrollBeyondLastLine: false,
263
- minimap: {
264
- enabled: false
265
- }
266
- }
267
- })
268
- });
269
- };
270
-
271
- function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
272
- function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
273
- var Card$2 = function Card(_ref) {
274
- var _ref$title = _ref.title,
275
- title = _ref$title === void 0 ? "" : _ref$title,
276
- children = _ref.children,
277
- name = _ref.name,
278
- className = _ref.className,
279
- helpPopoverProps = _ref.helpPopoverProps,
280
- required = _ref.required;
281
- var _useExpandedSection = useExpandedSection(),
282
- expandedSection = _useExpandedSection.expandedSection,
283
- setExpandedSection = _useExpandedSection.setExpandedSection;
284
- var isOpen = expandedSection === name;
285
- var isRTL = i18n.dir() === "rtl";
286
- var ToggleIcon = isRTL ? Left : Right;
287
- var handleToggle = function handleToggle() {
288
- return setExpandedSection(isOpen ? "" : name);
289
- };
290
- return /*#__PURE__*/jsxs("div", {
291
- "data-testid": "theme-".concat(hyphenate(title), "-properties"),
292
- className: classnames("neeto-themes-nano-section neeto-ui-border-gray-200 border-b pt-2 transition-all duration-300 last:border-none", className, {
293
- "pb-2": !isOpen,
294
- "pb-3": isOpen
295
- }),
296
- children: [title && /*#__PURE__*/jsxs("button", {
297
- className: "neeto-themes-nano-section__title flex w-full cursor-pointer items-center justify-between px-1 py-2 focus:outline-none",
298
- type: "button",
299
- onClick: handleToggle,
300
- children: [/*#__PURE__*/jsxs(Typography, {
301
- className: "flex min-w-0 grow items-center gap-2 text-start",
302
- component: "span",
303
- "data-testid": "theme-properties",
304
- lineHeight: "normal",
305
- style: "h4",
306
- weight: "semibold",
307
- children: [title, required && /*#__PURE__*/jsx("span", {
308
- "aria-hidden": true,
309
- className: "-ms-1",
310
- children: "*"
311
- }), isPresent(helpPopoverProps) && /*#__PURE__*/jsx(HelpPopover, _objectSpread$4({}, helpPopoverProps))]
312
- }), /*#__PURE__*/jsx(ToggleIcon, {
313
- size: 20,
314
- className: classnames("transition-all duration-300", {
315
- "rotate-90 rtl:-rotate-90": isOpen
316
- })
317
- })]
318
- }), children && /*#__PURE__*/jsx("div", {
319
- className: classnames("neeto-themes-nano-section__content w-full space-y-3 overflow-hidden px-1 transition-all duration-300", {
320
- "neeto-themes-nano-section__content--closed": !isOpen,
321
- "neeto-themes-nano-section__content--open pb-1": isOpen
322
- }),
323
- children: children
324
- })]
325
- });
326
- };
327
-
328
- function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
329
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
330
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
331
- var isScreenCustomCSS = function isScreenCustomCSS(screen) {
332
- return screen === DESIGN_SCREENS.CustomCSS;
333
- };
334
- var buildPathname = function buildPathname(route) {
335
- var pathname = "";
336
- var _iterator = _createForOfIteratorHelper(location.pathname.split("/")),
337
- _step;
338
- try {
339
- for (_iterator.s(); !(_step = _iterator.n()).done;) {
340
- var segment = _step.value;
341
- if (isEmpty(segment)) {
342
- continue;
343
- }
344
- if (segment === "themes") {
345
- break;
346
- }
347
- pathname += "/".concat(segment);
348
- }
349
- } catch (err) {
350
- _iterator.e(err);
351
- } finally {
352
- _iterator.f();
353
- }
354
- return "".concat(pathname).concat(route);
355
- };
356
-
357
- // FLIP: measure each theme card's position, apply the React update, then
358
- // transform every card back to its old spot and let a CSS transition glide
359
- // it to the new one. The animation itself is CSS (.neeto-themes-flip-animating).
360
- var animateThemeReorder = function animateThemeReorder(updateFn) {
361
- var prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
362
- var cards = _toConsumableArray(document.querySelectorAll("[data-flip-id]"));
363
- var scrollContainer = document.querySelector(".neeto-themes-sidebar__scroll");
364
- if (prefersReducedMotion || cards.length === 0) {
365
- updateFn();
366
- if (scrollContainer) scrollContainer.scrollTop = 0;
367
- return;
368
- }
369
- var oldRects = new Map(cards.map(function (card) {
370
- return [card.dataset.flipId, card.getBoundingClientRect()];
371
- }));
372
- flushSync(updateFn);
373
-
374
- // Move the viewport to the top — the applied theme is now the first card.
375
- // The FLIP deltas below are measured after this, so the scroll is folded
376
- // into the glide instead of showing as an instant jump.
377
- if (scrollContainer) scrollContainer.scrollTop = 0;
378
- var flips = _toConsumableArray(document.querySelectorAll("[data-flip-id]")).map(function (card) {
379
- var oldRect = oldRects.get(card.dataset.flipId);
380
- if (!oldRect) return null;
381
- var newRect = card.getBoundingClientRect();
382
- var dx = oldRect.left - newRect.left;
383
- var dy = oldRect.top - newRect.top;
384
- return dx || dy ? {
385
- card: card,
386
- dx: dx,
387
- dy: dy
388
- } : null;
389
- }).filter(Boolean);
390
- if (flips.length === 0) return;
391
- flips.forEach(function (_ref) {
392
- var card = _ref.card,
393
- dx = _ref.dx,
394
- dy = _ref.dy;
395
- card.style.transform = "translate(".concat(dx, "px, ").concat(dy, "px)");
396
- });
397
-
398
- // Force a reflow so the starting transform is committed before animating.
399
- document.body.offsetHeight;
400
- flips.forEach(function (_ref2) {
401
- var card = _ref2.card;
402
- card.classList.add("neeto-themes-flip-animating");
403
- card.style.transform = "";
404
- card.addEventListener("transitionend", function () {
405
- card.classList.remove("neeto-themes-flip-animating");
406
- }, {
407
- once: true
408
- });
409
- });
410
- };
411
-
412
- var CustomCSS = function CustomCSS(_ref) {
413
- var onEditCSSClick = _ref.onEditCSSClick,
414
- currentScreen = _ref.currentScreen,
415
- isEnabled = _ref.isEnabled,
416
- isProFeature = _ref.isProFeature;
417
- var _useTranslation = useTranslation(),
418
- t = _useTranslation.t;
419
- var _useFormikContext = useFormikContext(),
420
- values = _useFormikContext.values,
421
- setFieldValue = _useFormikContext.setFieldValue;
422
- var _useConfigStore = useConfigStore(function (store) {
423
- return {
424
- themePropertiesSchema: store["themePropertiesSchema"],
425
- helpPopoverProps: store["helpPopoverProps"]
426
- };
427
- }, shallow),
428
- themePropertiesSchema = _useConfigStore.themePropertiesSchema,
429
- helpPopoverProps = _useConfigStore.helpPopoverProps;
430
- var _helpPopoverProps$cus = helpPopoverProps.customCss,
431
- customCssHelpPopoverProps = _helpPopoverProps$cus === void 0 ? {} : _helpPopoverProps$cus;
432
- var _useExpandedSection = useExpandedSection(),
433
- expandedSection = _useExpandedSection.expandedSection;
434
- var isExpanded = expandedSection === "customcss";
435
- var customCSS = findBy({
436
- kind: "custom_css"
437
- }, values.properties);
438
- if (!customCSS || !isEnabled && !isProFeature) return null;
439
- var parentElementClass = findBy({
440
- kind: "custom_css"
441
- }, themePropertiesSchema).parentClass;
442
- var isCustomCssScreen = isScreenCustomCSS(currentScreen);
443
- var handleEditorToggle = function handleEditorToggle() {
444
- if (!isCustomCssScreen) return onEditCSSClick(DESIGN_SCREENS.CustomCSS);
445
- onEditCSSClick(DESIGN_SCREENS.Customize);
446
- return setTimeout(function () {
447
- scrollElementIntoView("css-editor");
448
- }, 400);
449
- };
450
- var handleChange = function handleChange(value) {
451
- var index = findIndexBy({
452
- key: customCSS.key
453
- }, values.properties);
454
- if (index !== -1 && values.properties[index].value !== value) {
455
- setFieldValue("properties[".concat(index, "].value"), value);
456
- setCustomCSS({
457
- css: value,
458
- elementId: customCSS.key,
459
- parentElementClass: parentElementClass
460
- });
461
- }
462
- };
463
- return /*#__PURE__*/jsx("div", {
464
- className: "neeto-themes-sidebar__custom-css-wrapper",
465
- id: "css-editor",
466
- children: /*#__PURE__*/jsx(Card$2, {
467
- name: "customcss",
468
- helpPopoverProps: isEnabled ? customCssHelpPopoverProps : {
469
- title: t("neetoThemes.common.proFeature.customCSS.title"),
470
- description: t("neetoThemes.common.proFeature.customCSS.description")
471
- },
472
- title: isCustomCssScreen ? "" : t("neetoThemes.build.leftSideBar.themes.customCSS"),
473
- children: isEnabled ? /*#__PURE__*/jsxs("div", {
474
- className: "w-full",
475
- children: [/*#__PURE__*/jsx("div", {
476
- className: "neeto-themes-sidebar__custom-css-editor-header w-full justify-end gap-1 rounded-b-none p-2",
477
- children: /*#__PURE__*/jsx(Button, {
478
- size: "small",
479
- style: "secondary",
480
- label: isCustomCssScreen ? t("neetoThemes.buttons.minimizeEditor") : t("neetoThemes.buttons.expandEditor"),
481
- onClick: handleEditorToggle
482
- })
483
- }), isExpanded && /*#__PURE__*/jsx(Editor, {
484
- isCustomCssScreen: isCustomCssScreen,
485
- value: customCSS.value,
486
- onChange: handleChange
487
- })]
488
- }) : /*#__PURE__*/jsx("div", {
489
- className: "px-1 py-2",
490
- children: /*#__PURE__*/jsx(Typography, {
491
- lineHeight: "normal",
492
- style: "body2",
493
- children: t("neetoThemes.common.proFeature.customCSS.description")
494
- })
495
- })
496
- })
497
- });
498
- };
499
-
500
- var LogoPosition = function LogoPosition() {
501
- var _useTranslation = useTranslation(),
502
- t = _useTranslation.t;
503
- var _useFormikContext = useFormikContext(),
504
- values = _useFormikContext.values;
505
- var index = findIndexBy({
506
- key: "logo_position"
507
- }, values.properties);
508
- // Do not show this field if the logo_position property is not present.
509
- if (index === -1) return null;
510
- return /*#__PURE__*/jsxs(Radio, {
511
- stacked: true,
512
- name: "properties[".concat(index, "].value"),
513
- label: /*#__PURE__*/jsx(Typography, {
514
- className: "my-3",
515
- component: "span",
516
- style: "body2",
517
- weight: "semibold",
518
- children: t("neetoThemes.build.leftSideBar.themes.logoPosition.title")
519
- }),
520
- children: [/*#__PURE__*/jsx(Radio.Item, {
521
- value: "over_left",
522
- label: /*#__PURE__*/jsxs("span", {
523
- className: "flex flex-col gap-1",
524
- children: [/*#__PURE__*/jsx(Typography, {
525
- component: "span",
526
- style: "body2",
527
- weight: "semibold",
528
- children: t("neetoThemes.build.leftSideBar.themes.logoPosition.overLeft")
529
- }), /*#__PURE__*/jsx(Typography, {
530
- component: "span",
531
- style: "body3",
532
- weight: "normal",
533
- children: t("neetoThemes.build.leftSideBar.themes.logoPosition.overLeftDescription")
534
- })]
535
- })
536
- }), /*#__PURE__*/jsx(Radio.Item, {
537
- value: "below_left",
538
- label: /*#__PURE__*/jsxs("span", {
539
- className: "flex flex-col gap-1",
540
- children: [/*#__PURE__*/jsx(Typography, {
541
- component: "span",
542
- style: "body2",
543
- weight: "semibold",
544
- children: t("neetoThemes.build.leftSideBar.themes.logoPosition.belowLeft")
545
- }), /*#__PURE__*/jsx(Typography, {
546
- component: "span",
547
- style: "body3",
548
- weight: "normal",
549
- children: t("neetoThemes.build.leftSideBar.themes.logoPosition.belowLeftDescription")
550
- })]
551
- })
552
- })]
553
- });
554
- };
555
-
556
- function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
557
- function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
558
- var buildInitialValues = function buildInitialValues(theme, themePropertiesSchema) {
559
- if (isPresent(theme)) return theme;
560
- return {
561
- name: t$1("neetoThemes.build.leftSideBar.themes.createTheme.newThemeName"),
562
- properties: themePropertiesSchema.map(function (_ref) {
563
- var key = _ref.key,
564
- kind = _ref.kind,
565
- defaultValue = _ref.defaultValue,
566
- _ref$order = _ref.order,
567
- order = _ref$order === void 0 ? null : _ref$order,
568
- dependsOn = _ref.dependsOn;
569
- switch (kind) {
570
- case "text_input":
571
- return _objectSpread$3({
572
- value: defaultValue || "",
573
- kind: "text_input",
574
- key: key,
575
- dependsOn: dependsOn
576
- }, order !== null && {
577
- order: order
578
- });
579
- case "color":
580
- return _objectSpread$3({
581
- value: defaultValue,
582
- kind: "color",
583
- key: key,
584
- dependsOn: dependsOn
585
- }, order !== null && {
586
- order: order
587
- });
588
- case "font_family":
589
- return _objectSpread$3({
590
- value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
591
- kind: "font_family",
592
- key: key,
593
- dependsOn: dependsOn
594
- }, order !== null && {
595
- order: order
596
- });
597
- case "overlay_opacity":
598
- return _objectSpread$3({
599
- value: 0,
600
- kind: "overlay_opacity",
601
- key: key,
602
- dependsOn: dependsOn
603
- }, order !== null && {
604
- order: order
605
- });
606
- case "slider":
607
- return _objectSpread$3({
608
- value: 0,
609
- kind: "slider",
610
- key: key,
611
- dependsOn: dependsOn
612
- }, order !== null && {
613
- order: order
614
- });
615
- case "radius":
616
- return _objectSpread$3({
617
- value: defaultValue,
618
- kind: "radius",
619
- key: key,
620
- dependsOn: dependsOn
621
- }, order !== null && {
622
- order: order
623
- });
624
- case "boolean":
625
- return _objectSpread$3({
626
- value: String(defaultValue),
627
- kind: "boolean",
628
- key: key,
629
- dependsOn: dependsOn
630
- }, order !== null && {
631
- order: order
632
- });
633
- case "order_selector":
634
- return _objectSpread$3({
635
- value: defaultValue,
636
- kind: "order_selector",
637
- key: key,
638
- dependsOn: dependsOn
639
- }, order !== null && {
640
- order: order
641
- });
642
- case "alignment_block":
643
- return _objectSpread$3({
644
- value: defaultValue,
645
- kind: "alignment_block",
646
- key: key,
647
- dependsOn: dependsOn
648
- }, order !== null && {
649
- order: order
650
- });
651
- case "custom_css":
652
- return _objectSpread$3({
653
- value: defaultValue,
654
- kind: "custom_css",
655
- key: key,
656
- dependsOn: dependsOn
657
- }, order !== null && {
658
- order: order
659
- });
660
- case "logo_position":
661
- return _objectSpread$3({
662
- value: defaultValue,
663
- kind: "logo_position",
664
- key: key,
665
- dependsOn: dependsOn
666
- }, order !== null && {
667
- order: order
668
- });
669
- default:
670
- return null;
671
- }
672
- }).filter(isNot(null))
673
- };
674
- };
675
- var buildImageData = function buildImageData(values, themePropertiesSchema) {
676
- return filterBy({
677
- kind: "image"
678
- }, themePropertiesSchema).reduce(function (acc, item) {
679
- var _values$snakeToCamelC;
680
- var signedId = (_values$snakeToCamelC = values[snakeToCamelCase(item.key)]) === null || _values$snakeToCamelC === void 0 ? void 0 : _values$snakeToCamelC.signedId;
681
- acc[item.key] = signedId;
682
- return acc;
683
- }, {});
684
- };
685
- var isPropertyVisible = function isPropertyVisible(key, formikValues, themePropertiesSchema) {
686
- var property = findBy({
687
- key: key
688
- }, themePropertiesSchema);
689
- if (isNotPresent(property)) return false;
690
- if (property !== null && property !== void 0 && property.hidden) return false;
691
- var conditionalKey = property === null || property === void 0 ? void 0 : property.dependsOn;
692
- if (isNotPresent(conditionalKey)) return true;
693
- var dependentPropertySchema = findBy({
694
- key: conditionalKey
695
- }, themePropertiesSchema);
696
- var dependentProperty = findBy({
697
- key: conditionalKey
698
- }, formikValues.properties);
699
- if (dependentPropertySchema.kind === "image") {
700
- var _formikValues$snakeTo;
701
- return isPresent((_formikValues$snakeTo = formikValues[snakeToCamelCase(conditionalKey)]) === null || _formikValues$snakeTo === void 0 ? void 0 : _formikValues$snakeTo.url);
702
- } else if (dependentPropertySchema.kind === "boolean") {
703
- return (dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value) !== "false";
704
- }
705
- return isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
706
- };
707
- var buildLabel = function buildLabel(key, kind) {
708
- return t$1("neetoThemes.properties.".concat(snakeToCamelCase(kind), ".").concat(snakeToCamelCase(key)));
709
- };
710
- var buildProperties = function buildProperties(values, condition, themePropertiesSchema) {
711
- values.forEach(function (value) {
712
- themePropertiesSchema.forEach(function (theme) {
713
- if (!(value.key === theme.key)) return;
714
- value.dependsOn = theme.dependsOn;
715
- });
716
- });
717
- if (condition) {
718
- return filterBy({
719
- dependsOn: condition
720
- }, values);
721
- }
722
- var imageKeys = new Set();
723
- filterBy({
724
- kind: "image"
725
- }, themePropertiesSchema).forEach(function (ele) {
726
- return imageKeys.add(ele.key);
727
- });
728
- return values === null || values === void 0 ? void 0 : values.filter(function (_ref2) {
729
- var dependsOn = _ref2.dependsOn;
730
- return !imageKeys.has(dependsOn);
731
- });
732
- };
733
-
734
- var AlignmentBlock = function AlignmentBlock(_ref) {
735
- var label = _ref.label,
736
- name = _ref.name;
737
- return /*#__PURE__*/jsxs("div", {
738
- className: "flex items-center justify-between gap-2",
739
- "data-testid": joinHyphenCase(label),
740
- children: [/*#__PURE__*/jsx(Typography, {
741
- "data-testid": "style-fields-labels",
742
- style: "body2",
743
- children: label
744
- }), /*#__PURE__*/jsx(Field, {
745
- name: name,
746
- children: function children(_ref2) {
747
- var value = _ref2.field.value,
748
- setFieldValue = _ref2.form.setFieldValue;
749
- return /*#__PURE__*/jsxs("div", {
750
- className: "neeto-ui-border-gray-300 neeto-themes-nano-alignment-block flex items-center border",
751
- children: [/*#__PURE__*/jsx(Button, {
752
- className: "neeto-themes-nano-alignment-button neeto-themes-nano-alignment-button__alignment-left",
753
- "data-testid": "alignment-left",
754
- size: "medium",
755
- style: value === "left" ? "primary" : "text",
756
- icon: function icon() {
757
- return /*#__PURE__*/jsx(LeftAlign, {
758
- size: 20,
759
- className: classnames({
760
- rounded: true,
761
- "neeto-ui-text-primary-800": value === "left",
762
- "neeto-ui-text-gray-600": value !== "left"
763
- })
764
- });
765
- },
766
- tooltipProps: {
767
- content: "Left align",
768
- position: "bottom"
769
- },
770
- onClick: function onClick() {
771
- return setFieldValue(name, "left");
772
- }
773
- }), /*#__PURE__*/jsx("div", {
774
- className: "neeto-themes-nano-alignment-divider"
775
- }), /*#__PURE__*/jsx(Button, {
776
- className: "neeto-themes-nano-alignment-button neeto-themes-nano-alignment-button__alignment-center",
777
- "data-testid": "alignment-center",
778
- size: "medium",
779
- style: value === "center" ? "primary" : "text",
780
- icon: function icon() {
781
- return /*#__PURE__*/jsx(CenterAlign, {
782
- size: 20,
783
- className: classnames({
784
- rounded: true,
785
- "neeto-ui-text-primary-800": value === "center",
786
- "neeto-ui-text-gray-600": value !== "center"
787
- })
788
- });
789
- },
790
- tooltipProps: {
791
- content: "Center align",
792
- position: "bottom"
793
- },
794
- onClick: function onClick() {
795
- return setFieldValue(name, "center");
796
- }
797
- })]
798
- });
799
- }
800
- })]
801
- });
802
- };
803
-
804
- var ColorBlock = function ColorBlock(_ref) {
805
- var label = _ref.label,
806
- _ref$color = _ref.color,
807
- color = _ref$color === void 0 ? "#FFFFFF" : _ref$color,
808
- onChange = _ref.onChange,
809
- showTransparencyControl = _ref.showTransparencyControl;
810
- return /*#__PURE__*/jsxs("div", {
811
- className: "flex items-center justify-between",
812
- "data-testid": "theme-style-".concat(joinHyphenCase(label)),
813
- children: [/*#__PURE__*/jsx(Typography, {
814
- "data-testid": "style-fields-labels",
815
- style: "body2",
816
- children: label
817
- }), /*#__PURE__*/jsx(ColorPicker, {
818
- color: color,
819
- onChange: onChange,
820
- showTransparencyControl: showTransparencyControl,
821
- showEyeDropper: true,
822
- size: "medium"
823
- })]
824
- });
825
- };
826
-
827
- function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
828
- function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
829
- var FontPickerBlock = function FontPickerBlock(_ref) {
830
- var label = _ref.label,
831
- _ref$placeholder = _ref.placeholder,
832
- placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
833
- value = _ref.value,
834
- options = _ref.options,
835
- onChange = _ref.onChange;
836
- return /*#__PURE__*/jsxs("div", {
837
- className: "flex items-center justify-between",
838
- "data-testid": "theme-style-".concat(joinHyphenCase(label)),
839
- children: [/*#__PURE__*/jsx(Typography, {
840
- "data-testid": "style-fields-labels",
841
- style: "body2",
842
- children: label
843
- }), /*#__PURE__*/jsx("div", {
844
- className: "w-40",
845
- children: /*#__PURE__*/jsx(Select, {
846
- onChange: onChange,
847
- options: options,
848
- placeholder: placeholder,
849
- value: value,
850
- menuPosition: "fixed",
851
- styles: {
852
- option: function option(styles, _ref2) {
853
- var data = _ref2.data;
854
- return _objectSpread$2(_objectSpread$2({}, styles), {}, {
855
- fontFamily: data.value
856
- });
857
- }
858
- }
859
- })
860
- })]
861
- });
862
- };
863
-
864
- var SelectBlock = function SelectBlock(_ref) {
865
- var label = _ref.label,
866
- _ref$placeholder = _ref.placeholder,
867
- placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
868
- value = _ref.value,
869
- options = _ref.options,
870
- onChange = _ref.onChange;
871
- return /*#__PURE__*/jsxs("div", {
872
- className: "flex items-center justify-between",
873
- "data-testid": "theme-style-".concat(joinHyphenCase(label)),
874
- children: [/*#__PURE__*/jsx(Typography, {
875
- "data-testid": "logo-field-labels",
876
- style: "body2",
877
- children: label
878
- }), /*#__PURE__*/jsx("div", {
879
- className: "w-40",
880
- children: /*#__PURE__*/jsx(Select, {
881
- onChange: onChange,
882
- options: options,
883
- placeholder: placeholder,
884
- value: value
885
- })
886
- })]
887
- });
888
- };
889
-
890
- var SliderBlock = function SliderBlock(_ref) {
891
- var label = _ref.label,
892
- onChange = _ref.onChange,
893
- value = _ref.value,
894
- min = _ref.min,
895
- max = _ref.max,
896
- marks = _ref.marks;
897
- return /*#__PURE__*/jsxs("div", {
898
- className: "flex items-center justify-between gap-3",
899
- "data-testid": "theme-style-".concat(joinHyphenCase(label)),
900
- children: [/*#__PURE__*/jsx(Typography, {
901
- "data-testid": "style-fields-labels",
902
- style: "body2",
903
- children: label
904
- }), /*#__PURE__*/jsx(Slider, {
905
- marks: marks,
906
- max: max,
907
- min: min,
908
- onChange: onChange,
909
- value: value,
910
- className: "my-2 w-20",
911
- tooltip: {
912
- formatter: null
913
- }
914
- })]
915
- });
916
- };
917
-
918
- var _excluded = ["label", "name"];
919
- function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
920
- function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
921
- var SwitchBlock = function SwitchBlock(_ref) {
922
- var label = _ref.label,
923
- name = _ref.name,
924
- switchProps = _objectWithoutProperties(_ref, _excluded);
925
- var _useTranslation = useTranslation(),
926
- t = _useTranslation.t,
927
- i18n = _useTranslation.i18n;
928
- var translationKey = "neetoThemes.properties.boolean.".concat(name, "HelpText");
929
- var doesHelpTextExist = i18n.exists(translationKey);
930
- return /*#__PURE__*/jsxs("div", {
931
- className: "flex items-center justify-between",
932
- "data-testid": "theme-style-content-background",
933
- children: [/*#__PURE__*/jsxs("div", {
934
- className: "inline-flex items-center gap-4",
935
- children: [/*#__PURE__*/jsx(Typography, {
936
- "data-testid": "style-fields-labels",
937
- style: "body2",
938
- className: classnames({
939
- "w-32": doesHelpTextExist,
940
- "w-auto": !doesHelpTextExist
941
- }),
942
- children: label
943
- }), doesHelpTextExist && /*#__PURE__*/jsx(HelpPopover, {
944
- className: "shrink-0",
945
- description: t(translationKey)
946
- })]
947
- }), /*#__PURE__*/jsx(Switch, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
948
- name: name
949
- }, switchProps)), {}, {
950
- "data-testid": "enable-background-color-toggle"
951
- }))]
952
- });
953
- };
954
-
955
- var TextBlock = function TextBlock(_ref) {
956
- var label = _ref.label,
957
- name = _ref.name,
958
- _ref$type = _ref.type,
959
- type = _ref$type === void 0 ? "text" : _ref$type,
960
- value = _ref.value,
961
- onChange = _ref.onChange,
962
- placeholder = _ref.placeholder,
963
- error = _ref.error;
964
- return /*#__PURE__*/jsxs("div", {
965
- className: "flex items-center justify-between",
966
- "data-testid": "theme-style-".concat(joinHyphenCase(label)),
967
- children: [/*#__PURE__*/jsx(Typography, {
968
- "data-testid": "style-fields-labels",
969
- style: "body2",
970
- children: label
971
- }), /*#__PURE__*/jsx("div", {
972
- className: "w-40",
973
- children: /*#__PURE__*/jsx(Input, {
974
- error: error,
975
- name: name,
976
- onChange: onChange,
977
- placeholder: placeholder,
978
- type: type,
979
- value: value
980
- })
981
- })]
982
- });
983
- };
984
-
985
- var Properties = function Properties(_ref) {
986
- var onPropertiesChange = _ref.onPropertiesChange,
987
- condition = _ref.condition,
988
- themeId = _ref.themeId;
989
- var _useConfigStore = useConfigStore(function (store) {
990
- return {
991
- themePropertiesSchema: store["themePropertiesSchema"]
992
- };
993
- }, shallow),
994
- themePropertiesSchema = _useConfigStore.themePropertiesSchema;
995
- var _useThemeStore = useThemeStore(function (store) {
996
- return {
997
- setThemeState: store["setThemeState"]
998
- };
999
- }, shallow),
1000
- setThemeState = _useThemeStore.setThemeState;
1001
- var _useFormikContext = useFormikContext(),
1002
- setFieldValue = _useFormikContext.setFieldValue,
1003
- values = _useFormikContext.values,
1004
- errors = _useFormikContext.errors;
1005
- var _useThemeUtils = useThemeUtils(),
1006
- setVariable = _useThemeUtils.setVariable,
1007
- setTheme = _useThemeUtils.setTheme;
1008
- var handleColorChange = function handleColorChange(name) {
1009
- return function (_ref2) {
1010
- var hex = _ref2.hex,
1011
- rgb = _ref2.rgb;
1012
- if (name === "background_color") {
1013
- var _findBy, _values$backgroundIma;
1014
- var isDominantBackgroundColorEnabled = ((_findBy = findBy({
1015
- key: "is_dominant_background_color_enabled"
1016
- }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) === "true";
1017
- var hasImageWithDominantColor = values === null || values === void 0 || (_values$backgroundIma = values.backgroundImage) === null || _values$backgroundIma === void 0 ? void 0 : _values$backgroundIma.dominantColor;
1018
- if (isDominantBackgroundColorEnabled && hasImageWithDominantColor) {
1019
- return;
1020
- }
1021
- }
1022
- handleChange(name, hex, "".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(rgb.a));
1023
- };
1024
- };
1025
- var handleChange = function handleChange(name, value, variableValue) {
1026
- var index = findIndexBy({
1027
- key: name
1028
- }, values.properties);
1029
- if (index !== -1 && values.properties[index].value !== value) {
1030
- setFieldValue("properties[".concat(index, "].value"), value);
1031
- }
1032
- setVariable(snakeToCamelCase(name), variableValue !== null && variableValue !== void 0 ? variableValue : value);
1033
- };
1034
- var handleOverlayChange = function handleOverlayChange(key, value) {
1035
- var index = findIndexBy({
1036
- key: key
1037
- }, values.properties);
1038
- var overlayColorVariable = "".concat(key, "_overlay_color");
1039
- setFieldValue("properties[".concat(index, "].value"), value);
1040
- setVariable("".concat(key, "_overlay_opacity"), Math.abs(value / 100));
1041
- if (value < 0) {
1042
- handleChange(overlayColorVariable, "#000000", "0, 0, 0");
1043
- } else {
1044
- handleChange(overlayColorVariable, "#ffffff", "255, 255, 255");
1045
- }
1046
- };
1047
- useEffect(function () {
1048
- if (!((values === null || values === void 0 ? void 0 : values.id) === themeId)) return;
1049
- onPropertiesChange === null || onPropertiesChange === void 0 || onPropertiesChange(values, handleChange, handleColorChange);
1050
- setTheme(values);
1051
- setThemeState({
1052
- previewingTheme: values
1053
- });
1054
- }, [values]);
1055
- return /*#__PURE__*/jsx(Fragment, {
1056
- children: buildProperties(values === null || values === void 0 ? void 0 : values.properties, condition, themePropertiesSchema).sort(function (a, b) {
1057
- var order = function order(key) {
1058
- var _findBy2;
1059
- return ((_findBy2 = findBy({
1060
- key: key
1061
- }, themePropertiesSchema)) === null || _findBy2 === void 0 ? void 0 : _findBy2.order) || Infinity;
1062
- };
1063
- return order(a.key) - order(b.key);
1064
- }).map(function (_ref3) {
1065
- var _findBy3;
1066
- var key = _ref3.key,
1067
- value = _ref3.value,
1068
- kind = _ref3.kind;
1069
- var isCurrentPropertyVisible = isPropertyVisible(key, values, themePropertiesSchema);
1070
- if (!isCurrentPropertyVisible) return null;
1071
- switch (kind) {
1072
- case "text_input":
1073
- {
1074
- var _errors$properties;
1075
- var index = findIndexBy({
1076
- key: key
1077
- }, values.properties);
1078
- var error = errors === null || errors === void 0 || (_errors$properties = errors.properties) === null || _errors$properties === void 0 || (_errors$properties = _errors$properties[index]) === null || _errors$properties === void 0 ? void 0 : _errors$properties.value;
1079
- return /*#__PURE__*/jsx(TextBlock, {
1080
- error: error,
1081
- label: buildLabel(key, kind),
1082
- name: "properties[".concat(index, "].value"),
1083
- value: value || "",
1084
- onChange: function onChange(e) {
1085
- return setFieldValue("properties[".concat(index, "].value"), e.target.value);
1086
- }
1087
- }, key);
1088
- }
1089
- case "font_family":
1090
- return /*#__PURE__*/jsx(FontPickerBlock, {
1091
- label: buildLabel(key, kind),
1092
- options: FONT_OPTIONS,
1093
- value: findBy({
1094
- value: value || null
1095
- }, FONT_OPTIONS),
1096
- onChange: function onChange(_ref4) {
1097
- var value = _ref4.value;
1098
- return handleChange(key, value);
1099
- }
1100
- }, key);
1101
- case "color":
1102
- return /*#__PURE__*/jsx(ColorBlock, {
1103
- color: value,
1104
- label: buildLabel(key, kind),
1105
- showTransparencyControl: ((_findBy3 = findBy({
1106
- key: key
1107
- }, themePropertiesSchema)) === null || _findBy3 === void 0 ? void 0 : _findBy3.showTransparencyControl) || false,
1108
- onChange: handleColorChange(key)
1109
- }, key);
1110
- case "radius":
1111
- return /*#__PURE__*/jsx(SliderBlock, {
1112
- label: buildLabel(key, kind),
1113
- max: 50,
1114
- min: 0,
1115
- value: Number(value) || 0,
1116
- onChange: function onChange(radius) {
1117
- return handleChange(key, radius, "".concat(radius, "px"));
1118
- }
1119
- }, key);
1120
- case "overlay_opacity":
1121
- return /*#__PURE__*/jsx(SliderBlock, {
1122
- label: buildLabel(key, kind),
1123
- marks: OVERLAY_OPACITY_SLIDER_MARKS,
1124
- max: HUNDRED,
1125
- min: negate(HUNDRED),
1126
- value: Number(value) || 0,
1127
- onChange: function onChange(opacity) {
1128
- return handleOverlayChange(key, opacity);
1129
- }
1130
- }, key);
1131
- case "position_selector":
1132
- {
1133
- var _findBy4;
1134
- var _index = findIndexBy({
1135
- key: key
1136
- }, values.properties);
1137
- var options = (_findBy4 = findBy({
1138
- key: key
1139
- }, themePropertiesSchema)) === null || _findBy4 === void 0 || (_findBy4 = _findBy4.options) === null || _findBy4 === void 0 ? void 0 : _findBy4.map(toLabelAndValue);
1140
- return /*#__PURE__*/jsx(SelectBlock, {
1141
- label: buildLabel(key, kind),
1142
- options: options || POSITION_OPTIONS,
1143
- placeholder: "left",
1144
- value: toLabelAndValue(value),
1145
- onChange: function onChange(option) {
1146
- return setFieldValue("properties[".concat(_index, "].value"), option.value);
1147
- }
1148
- }, key);
1149
- }
1150
- case "boolean":
1151
- {
1152
- var _index2 = findIndexBy({
1153
- key: key
1154
- }, values.properties);
1155
- return /*#__PURE__*/jsx(SwitchBlock, {
1156
- checked: value !== "false",
1157
- label: buildLabel(key, kind),
1158
- name: snakeToCamelCase(key),
1159
- onChange: function onChange(e) {
1160
- return setFieldValue("properties[".concat(_index2, "].value"), String(e.target.checked));
1161
- }
1162
- }, key);
1163
- }
1164
- case "alignment_block":
1165
- {
1166
- var _index3 = findIndexBy({
1167
- key: key
1168
- }, values.properties);
1169
- return /*#__PURE__*/jsx(AlignmentBlock, {
1170
- label: buildLabel(key, kind),
1171
- name: "properties[".concat(_index3, "].value")
1172
- });
1173
- }
1174
- default:
1175
- return null;
1176
- }
1177
- })
1178
- });
1179
- };
1180
-
1181
- var ImageBlock = function ImageBlock(_ref) {
1182
- var _findBy;
1183
- var label = _ref.label,
1184
- name = _ref.name,
1185
- _ref$imageData = _ref.imageData,
1186
- imageData = _ref$imageData === void 0 ? {} : _ref$imageData,
1187
- _ref$uploadConfig = _ref.uploadConfig,
1188
- uploadConfig = _ref$uploadConfig === void 0 ? {
1189
- maxImageSize: ONE_MEGABYTE
1190
- } : _ref$uploadConfig,
1191
- attribute = _ref.attribute,
1192
- defaultImageSize = _ref.defaultImageSize,
1193
- useDefaultImageSize = _ref.useDefaultImageSize,
1194
- fixedAspectRatio = _ref.fixedAspectRatio;
1195
- var _useTranslation = useTranslation(),
1196
- t = _useTranslation.t;
1197
- var _useFormikContext = useFormikContext(),
1198
- setFieldValue = _useFormikContext.setFieldValue,
1199
- values = _useFormikContext.values;
1200
- var _useConfigStore = useConfigStore(function (store) {
1201
- return {
1202
- themePropertiesSchema: store["themePropertiesSchema"]
1203
- };
1204
- }, shallow),
1205
- themePropertiesSchema = _useConfigStore.themePropertiesSchema;
1206
- var propertySchema = findBy({
1207
- key: attribute
1208
- }, themePropertiesSchema);
1209
- var enablePositionChanger = (propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.enablePositionChanger) || false;
1210
- var options = propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.options;
1211
- var positionKeyInSchema = findBy({
1212
- key: "".concat(name, "_position")
1213
- }, themePropertiesSchema);
1214
- var isPositionChangerVisible = enablePositionChanger && (imageData === null || imageData === void 0 ? void 0 : imageData.url) && isPresent(positionKeyInSchema);
1215
- var positionKeyIndex = findIndexBy({
1216
- key: "".concat(name, "_position")
1217
- }, values.properties);
1218
- var handleImageChange = /*#__PURE__*/function () {
1219
- var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
1220
- var dominantColor;
1221
- return _regeneratorRuntime.wrap(function _callee$(_context) {
1222
- while (1) switch (_context.prev = _context.next) {
1223
- case 0:
1224
- _context.prev = 0;
1225
- if (!(isEmpty(image.signedId) || isEmpty(image.url))) {
1226
- _context.next = 4;
1227
- break;
1228
- }
1229
- setFieldValue(name, {
1230
- signedId: null,
1231
- url: image.url
1232
- });
1233
- return _context.abrupt("return");
1234
- case 4:
1235
- _context.next = 6;
1236
- return getDominantColorFromUrl(image.url);
1237
- case 6:
1238
- dominantColor = _context.sent;
1239
- setFieldValue(name, {
1240
- signedId: image.signedId,
1241
- url: image.url,
1242
- dominantColor: dominantColor
1243
- });
1244
- _context.next = 13;
1245
- break;
1246
- case 10:
1247
- _context.prev = 10;
1248
- _context.t0 = _context["catch"](0);
1249
- Toastr.error(_context.t0);
1250
- case 13:
1251
- case "end":
1252
- return _context.stop();
1253
- }
1254
- }, _callee, null, [[0, 10]]);
1255
- }));
1256
- return function handleImageChange(_x) {
1257
- return _ref2.apply(this, arguments);
1258
- };
1259
- }();
1260
- return /*#__PURE__*/jsxs("div", {
1261
- className: "space-y-3",
1262
- "data-testid": "theme-style-".concat(label ? joinHyphenCase(label) : "image-block"),
1263
- children: [label && /*#__PURE__*/jsx("div", {
1264
- className: "flex items-center justify-between",
1265
- children: /*#__PURE__*/jsx(Typography, {
1266
- "data-testid": "style-fields-labels",
1267
- style: "body2",
1268
- children: label
1269
- })
1270
- }), /*#__PURE__*/jsxs("div", {
1271
- className: "space-y-3",
1272
- children: [/*#__PURE__*/createElement(ImageUploader, {
1273
- fixedAspectRatio: fixedAspectRatio,
1274
- uploadConfig: uploadConfig,
1275
- className: "h-40 w-full",
1276
- defaultImageSize: useDefaultImageSize ? defaultImageSize : {},
1277
- key: imageData === null || imageData === void 0 ? void 0 : imageData.url,
1278
- src: imageData === null || imageData === void 0 ? void 0 : imageData.url,
1279
- onUploadComplete: handleImageChange
1280
- }), isPositionChangerVisible && /*#__PURE__*/jsx(SelectBlock, {
1281
- label: buildLabel("".concat(name, "Position"), "image"),
1282
- options: options || POSITION_OPTIONS,
1283
- placeholder: t("neetoThemes.common.left"),
1284
- value: toLabelAndValue(((_findBy = findBy({
1285
- key: "".concat(name, "_position")
1286
- }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) || (positionKeyInSchema === null || positionKeyInSchema === void 0 ? void 0 : positionKeyInSchema.defaultValue)),
1287
- onChange: function onChange(option) {
1288
- return setFieldValue("properties[".concat(positionKeyIndex, "].value"), option.value);
1289
- }
1290
- })]
1291
- })]
1292
- });
1293
- };
1294
-
1295
- var Images = function Images(_ref) {
1296
- var _values$coverImage;
1297
- var attribute = _ref.attribute,
1298
- className = _ref.className,
1299
- onPropertiesChange = _ref.onPropertiesChange,
1300
- defaultImageSize = _ref.defaultImageSize,
1301
- useDefaultImageSize = _ref.useDefaultImageSize,
1302
- fixedAspectRatio = _ref.fixedAspectRatio;
1303
- var _useFormikContext = useFormikContext(),
1304
- values = _useFormikContext.values;
1305
- var _useConfigStore = useConfigStore(function (store) {
1306
- return {
1307
- helpPopoverProps: store["helpPopoverProps"]
1308
- };
1309
- }, shallow),
1310
- helpPopoverProps = _useConfigStore.helpPopoverProps;
1311
- var key = snakeToCamelCase(attribute);
1312
- var title = buildLabel(key, "image");
1313
- var imageData = values[key];
1314
- return /*#__PURE__*/jsxs(Card$2, {
1315
- className: className,
1316
- title: title,
1317
- helpPopoverProps: helpPopoverProps[key],
1318
- name: key,
1319
- children: [/*#__PURE__*/jsx(ImageBlock, {
1320
- attribute: attribute,
1321
- defaultImageSize: defaultImageSize,
1322
- fixedAspectRatio: fixedAspectRatio,
1323
- imageData: imageData,
1324
- useDefaultImageSize: useDefaultImageSize,
1325
- name: key
1326
- }), /*#__PURE__*/jsx(Properties, {
1327
- onPropertiesChange: onPropertiesChange,
1328
- condition: attribute
1329
- }), key === "logo" && ((_values$coverImage = values.coverImage) === null || _values$coverImage === void 0 ? void 0 : _values$coverImage.url) && /*#__PURE__*/jsx(LogoPosition, {})]
1330
- });
1331
- };
1332
-
1333
- var ThemeMeta = function ThemeMeta(_ref) {
1334
- var className = _ref.className;
1335
- var _useTranslation = useTranslation(),
1336
- t = _useTranslation.t;
1337
- var _useConfigStore = useConfigStore(function (store) {
1338
- return {
1339
- helpPopoverProps: store["helpPopoverProps"]
1340
- };
1341
- }, shallow),
1342
- helpPopoverProps = _useConfigStore.helpPopoverProps;
1343
- var _helpPopoverProps$nam = helpPopoverProps.name,
1344
- nameHelpPopoverProps = _helpPopoverProps$nam === void 0 ? {} : _helpPopoverProps$nam;
1345
- return /*#__PURE__*/jsx(Card$2, {
1346
- className: className,
1347
- required: true,
1348
- helpPopoverProps: nameHelpPopoverProps,
1349
- name: "name",
1350
- title: t("neetoThemes.common.name"),
1351
- children: /*#__PURE__*/jsx(Input$1, {
1352
- autoFocus: true,
1353
- "data-testid": "theme-name-property",
1354
- name: "name"
1355
- })
1356
- });
1357
- };
1358
-
1359
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1360
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1361
- var Customize = function Customize(_ref) {
1362
- var theme = _ref.theme,
1363
- onCreateTheme = _ref.onCreateTheme,
1364
- onApplyTheme = _ref.onApplyTheme,
1365
- onUpdateTheme = _ref.onUpdateTheme,
1366
- isApplyingTheme = _ref.isApplyingTheme,
1367
- onPropertiesChange = _ref.onPropertiesChange,
1368
- defaultImageSize = _ref.defaultImageSize,
1369
- fixedAspectRatio = _ref.fixedAspectRatio,
1370
- onEditCSSClick = _ref.onEditCSSClick,
1371
- currentScreen = _ref.currentScreen;
1372
- var _useTranslation = useTranslation(),
1373
- t = _useTranslation.t;
1374
- useSyncExpandedSectionFromUrl();
1375
- var history = useHistory();
1376
- var _useState = useState({}),
1377
- _useState2 = _slicedToArray(_useState, 2),
1378
- popoverInstance = _useState2[0],
1379
- setPopoverInstance = _useState2[1];
1380
- var _useConfigStore = useConfigStore(function (store) {
1381
- return {
1382
- themePropertiesSchema: store["themePropertiesSchema"],
1383
- entityType: store["entityType"],
1384
- isFetchingSchema: store["isFetchingSchema"],
1385
- helpPopoverProps: store["helpPopoverProps"],
1386
- enabledFeatures: store["enabledFeatures"],
1387
- proFeatures: store["proFeatures"]
1388
- };
1389
- }, shallow),
1390
- themePropertiesSchema = _useConfigStore.themePropertiesSchema,
1391
- entityType = _useConfigStore.entityType,
1392
- isFetchingSchema = _useConfigStore.isFetchingSchema,
1393
- helpPopoverProps = _useConfigStore.helpPopoverProps,
1394
- enabledFeatures = _useConfigStore.enabledFeatures,
1395
- proFeatures = _useConfigStore.proFeatures;
1396
- var _useParams = useParams(),
1397
- themeId = _useParams.themeId;
1398
- var _useThemeStore = useThemeStore(function (store) {
1399
- return {
1400
- currentTheme: store["currentTheme"],
1401
- setThemeState: store["setThemeState"]
1402
- };
1403
- }, shallow),
1404
- currentTheme = _useThemeStore.currentTheme,
1405
- setThemeState = _useThemeStore.setThemeState;
1406
- var _useShowGlobalTheme = useShowGlobalTheme(entityType),
1407
- _useShowGlobalTheme$d = _useShowGlobalTheme.data,
1408
- _useShowGlobalTheme$d2 = _useShowGlobalTheme$d === void 0 ? {} : _useShowGlobalTheme$d,
1409
- _useShowGlobalTheme$d3 = _useShowGlobalTheme$d2.globalTheme,
1410
- globalTheme = _useShowGlobalTheme$d3 === void 0 ? {} : _useShowGlobalTheme$d3;
1411
- var _useFetchTheme = useFetchTheme(themeId, {
1412
- enabled: isEditThemeRoute() && isNotNil(themeId),
1413
- initialData: theme !== null && theme !== void 0 ? theme : undefined
1414
- }),
1415
- _useFetchTheme$data = _useFetchTheme.data,
1416
- themeData = _useFetchTheme$data === void 0 ? {} : _useFetchTheme$data,
1417
- isLoadingTheme = _useFetchTheme.isLoadingTheme;
1418
- var isLoading = isFetchingSchema || isLoadingTheme;
1419
- var isThemeGlobalTheme = themeId && (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === themeId;
1420
- var isCurrentThemeAndGlobalThemeSame = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id);
1421
- var _helpPopoverProps$sty = helpPopoverProps.style,
1422
- styleHelpPopoverProps = _helpPopoverProps$sty === void 0 ? {} : _helpPopoverProps$sty;
1423
- var isEditingCurrentlyAppliedTheme = themeId === (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
1424
- var submitBtnRef = useRef(null);
1425
- var _useCreateTheme = useCreateTheme(),
1426
- createTheme = _useCreateTheme.mutate,
1427
- isCreating = _useCreateTheme.isPending;
1428
- var _useUpdateTheme = useUpdateTheme(themeId),
1429
- updateTheme = _useUpdateTheme.mutate,
1430
- isUpdating = _useUpdateTheme.isPending;
1431
- var isSubmitting = isCreating || isUpdating;
1432
- var isCustomCssScreen = isScreenCustomCSS(currentScreen);
1433
- var handleGlobalThemeSwitchChange = function handleGlobalThemeSwitchChange(e, setFieldValue) {
1434
- setFieldValue("shouldSetAsGlobalTheme", e.target.checked);
1435
- };
1436
- var onSubmit = function onSubmit(values, _ref2) {
1437
- var resetForm = _ref2.resetForm;
1438
- var imageData = buildImageData(values, themePropertiesSchema);
1439
- var themeToSave = _objectSpread({
1440
- propertiesAttributes: values.properties,
1441
- name: values.name,
1442
- shouldSetAsGlobalTheme: values.shouldSetAsGlobalTheme,
1443
- entityType: values.entityType
1444
- }, imageData);
1445
- if (!themeId) {
1446
- return createTheme(themeToSave, {
1447
- onSuccess: function onSuccess(_ref3) {
1448
- var theme = _ref3.theme;
1449
- resetForm({
1450
- values: theme
1451
- });
1452
- onCreateTheme(theme);
1453
- history.replace(buildUrl(buildPathname(routes.themes.edit), {
1454
- themeId: theme.id
1455
- }));
1456
- }
1457
- });
1458
- }
1459
- return updateTheme(themeToSave, {
1460
- onSuccess: function onSuccess(_ref4) {
1461
- var theme = _ref4.theme;
1462
- onUpdateTheme(theme);
1463
- resetForm({
1464
- values: theme
1465
- });
1466
- }
1467
- });
1468
- };
1469
- useEffect(function () {
1470
- if (isNotNil(themeId) && !isLoadingTheme) {
1471
- setThemeState({
1472
- previewingTheme: themeData
1473
- });
1474
- }
1475
- }, [isLoadingTheme]);
1476
- if (isLoading) {
1477
- return /*#__PURE__*/jsx("div", {
1478
- className: "flex h-full w-full items-center justify-center",
1479
- children: /*#__PURE__*/jsx(Spinner, {})
1480
- });
1481
- }
1482
- return /*#__PURE__*/jsx(Form, {
1483
- formikProps: {
1484
- initialValues: _objectSpread(_objectSpread({}, buildInitialValues(themeData, themePropertiesSchema)), {}, {
1485
- shouldSetAsGlobalTheme: isThemeGlobalTheme,
1486
- entityType: entityType
1487
- }),
1488
- validationSchema: THEME_VALIDATION_SCHEMA,
1489
- enableReinitialize: true,
1490
- onSubmit: onSubmit
1491
- },
1492
- children: function children(_ref5) {
1493
- var dirty = _ref5.dirty,
1494
- isValid = _ref5.isValid,
1495
- values = _ref5.values,
1496
- setFieldValue = _ref5.setFieldValue;
1497
- return /*#__PURE__*/jsxs("div", {
1498
- className: "neeto-themes-sidebar__scroll",
1499
- children: [/*#__PURE__*/jsxs("div", {
1500
- className: "neeto-themes-sidebar__scroll-content flex grow flex-col px-4 pb-4 lg:px-5",
1501
- children: [!isSubmitting && /*#__PURE__*/jsx(BlockNavigation, {}), /*#__PURE__*/jsx(ThemeMeta, {
1502
- className: classnames({
1503
- hidden: isCustomCssScreen
1504
- })
1505
- }), /*#__PURE__*/jsx(Card$2, {
1506
- className: classnames({
1507
- hidden: isCustomCssScreen
1508
- }),
1509
- helpPopoverProps: styleHelpPopoverProps,
1510
- name: "style",
1511
- title: t("neetoThemes.common.style"),
1512
- children: /*#__PURE__*/jsx(Properties, {
1513
- onPropertiesChange: onPropertiesChange,
1514
- themeId: themeId
1515
- })
1516
- }), filterBy({
1517
- kind: "image"
1518
- }, themePropertiesSchema).map(function (_ref6) {
1519
- var key = _ref6.key,
1520
- useDefaultImageSize = _ref6.useDefaultImageSize,
1521
- propertyDefaultSize = _ref6.defaultImageSize,
1522
- propertyFixedAspectRatio = _ref6.fixedAspectRatio;
1523
- return /*#__PURE__*/createElement(Images, _defineProperty({
1524
- fixedAspectRatio: fixedAspectRatio,
1525
- onPropertiesChange: onPropertiesChange,
1526
- useDefaultImageSize: useDefaultImageSize,
1527
- attribute: key,
1528
- className: classnames({
1529
- hidden: isCustomCssScreen
1530
- }),
1531
- defaultImageSize: propertyDefaultSize || defaultImageSize,
1532
- key: key
1533
- }, "fixedAspectRatio", propertyFixedAspectRatio || fixedAspectRatio));
1534
- }), /*#__PURE__*/jsx(CustomCSS, {
1535
- currentScreen: currentScreen,
1536
- onEditCSSClick: onEditCSSClick,
1537
- isEnabled: enabledFeatures.customCSS,
1538
- isProFeature: proFeatures.customCSS
1539
- }), /*#__PURE__*/jsxs("div", {
1540
- className: "neeto-ui-bg-gray-50 neeto-ui-border-gray-200 mt-2 flex flex-col space-y-2 border p-2",
1541
- children: [/*#__PURE__*/jsx(Tooltip, {
1542
- disabled: !isThemeGlobalTheme,
1543
- content: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.tooltipContent"),
1544
- children: /*#__PURE__*/jsx(Switch, {
1545
- checked: values.shouldSetAsGlobalTheme,
1546
- disabled: isThemeGlobalTheme,
1547
- name: "shouldSetAsGlobalTheme",
1548
- label: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.label"),
1549
- onChange: function onChange(e) {
1550
- return handleGlobalThemeSwitchChange(e, setFieldValue);
1551
- }
1552
- })
1553
- }), /*#__PURE__*/jsx(Typography, {
1554
- className: "text-sm",
1555
- style: "body2",
1556
- children: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.helpText", {
1557
- entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()), {
1558
- count: 2
1559
- })
1560
- })
1561
- })]
1562
- })]
1563
- }), /*#__PURE__*/jsxs("div", {
1564
- className: "neeto-ui-bg-white neeto-ui-shadow-s sticky bottom-0 start-0 end-0 flex justify-end gap-x-2 px-4 py-6 lg:px-5 xl:px-6",
1565
- children: [/*#__PURE__*/jsx(Button, {
1566
- "data-testid": "reset-button",
1567
- disabled: !dirty || isSubmitting,
1568
- label: t("neetoThemes.buttons.reset"),
1569
- style: "text",
1570
- type: "reset"
1571
- }), /*#__PURE__*/jsx(Button, {
1572
- "data-testid": "save-changes-button",
1573
- disabled: !dirty && (themeData === null || themeData === void 0 ? void 0 : themeData.id) || isSubmitting || !isValid,
1574
- label: t("neetoThemes.buttons.save"),
1575
- loading: isSubmitting,
1576
- ref: submitBtnRef,
1577
- type: "submit"
1578
- })]
1579
- }), /*#__PURE__*/jsx(Popover, {
1580
- appendTo: function appendTo() {
1581
- return document.body;
1582
- },
1583
- position: "top",
1584
- reference: submitBtnRef,
1585
- trigger: "click",
1586
- content: /*#__PURE__*/jsxs("div", {
1587
- className: "flex flex-col items-start gap-2",
1588
- children: [/*#__PURE__*/jsx(Button, {
1589
- className: "absolute end-1 top-1 z-0",
1590
- icon: Close,
1591
- size: "small",
1592
- style: "text",
1593
- onClick: function onClick() {
1594
- var _popoverInstance$hide;
1595
- return popoverInstance === null || popoverInstance === void 0 || (_popoverInstance$hide = popoverInstance.hide) === null || _popoverInstance$hide === void 0 ? void 0 : _popoverInstance$hide.call(popoverInstance);
1596
- }
1597
- }), /*#__PURE__*/jsx(Typography, {
1598
- className: "w-72 pe-5",
1599
- style: "body2",
1600
- weight: "normal",
1601
- children: /*#__PURE__*/jsx(Trans, {
1602
- components: {
1603
- bold: /*#__PURE__*/jsx("strong", {})
1604
- },
1605
- i18nKey: "neetoThemes.build.leftSideBar.themes.notAppliedYet",
1606
- values: {
1607
- entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()))
1608
- }
1609
- })
1610
- }), /*#__PURE__*/jsx(Button, {
1611
- disabled: isApplyingTheme,
1612
- label: t("neetoThemes.buttons.applyThisTheme"),
1613
- loading: isApplyingTheme,
1614
- onClick: function onClick() {
1615
- return onApplyTheme(themeData);
1616
- }
1617
- })]
1618
- }),
1619
- disabled: isEditingCurrentlyAppliedTheme || isCurrentThemeAndGlobalThemeSame && values.shouldSetAsGlobalTheme,
1620
- onMount: setPopoverInstance
1621
- })]
1622
- });
1623
- }
1624
- });
1625
- };
1626
-
1627
- var QuickActionRow = function QuickActionRow(_ref) {
1628
- var Icon = _ref.icon,
1629
- label = _ref.label,
1630
- onClick = _ref.onClick,
1631
- testId = _ref.testId;
1632
- return /*#__PURE__*/jsxs("button", {
1633
- onClick: onClick,
1634
- className: "neeto-ui-border-gray-100 hover:neeto-ui-bg-gray-100 flex w-full cursor-pointer items-center gap-3 border-t px-3 py-2 text-start transition-colors",
1635
- "data-testid": testId,
1636
- type: "button",
1637
- children: [/*#__PURE__*/jsx(Icon, {
1638
- size: 16
1639
- }), /*#__PURE__*/jsx(Typography, {
1640
- lineHeight: "normal",
1641
- style: "body2",
1642
- children: label
1643
- })]
1644
- });
1645
- };
1646
-
1647
- var Thumbnail = function Thumbnail(_ref) {
1648
- var _theme$snakeToCamelCa, _findBy, _findBy2;
1649
- var active = _ref.active,
1650
- isPreviewing = _ref.isPreviewing,
1651
- isHighLightedTheme = _ref.isHighLightedTheme,
1652
- theme = _ref.theme;
1653
- var _useConfigStore = useConfigStore(function (store) {
1654
- return {
1655
- themePropertiesSchema: store["themePropertiesSchema"]
1656
- };
1657
- }, shallow),
1658
- _useConfigStore$theme = _useConfigStore.themePropertiesSchema,
1659
- themePropertiesSchema = _useConfigStore$theme === void 0 ? [] : _useConfigStore$theme;
1660
- var _themePropertiesSchem = _slicedToArray(themePropertiesSchema, 2),
1661
- colorObject1 = _themePropertiesSchem[0],
1662
- colorObject2 = _themePropertiesSchem[1];
1663
- var primaryLabel = humanize(colorObject1 === null || colorObject1 === void 0 ? void 0 : colorObject1.key);
1664
- var secondaryLabel = humanize(colorObject2 === null || colorObject2 === void 0 ? void 0 : colorObject2.key);
1665
- var primaryColor = findBy({
1666
- key: colorObject1.key
1667
- }, theme.properties).value;
1668
- var secondaryColor = findBy({
1669
- key: colorObject2.key
1670
- }, theme.properties).value;
1671
- var backgroundImageUrl = (_theme$snakeToCamelCa = theme[snakeToCamelCase(findBy({
1672
- useAsCardBackground: true
1673
- }, themePropertiesSchema).key)]) === null || _theme$snakeToCamelCa === void 0 ? void 0 : _theme$snakeToCamelCa.url;
1674
- var buttonBackgroundColor = (_findBy = findBy({
1675
- key: (_findBy2 = findBy({
1676
- useAsCardButtonBackground: true
1677
- }, themePropertiesSchema)) === null || _findBy2 === void 0 ? void 0 : _findBy2.key
1678
- }, theme.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value;
1679
- return /*#__PURE__*/jsx("div", {
1680
- className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg border transition-all duration-300 ease-in-out", {
1681
- "neeto-ui-border-gray-400": !active,
1682
- "neeto-ui-border-gray-800 neeto-themes-theme-thumbnail--active": active,
1683
- "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
1684
- "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
1685
- }),
1686
- style: {
1687
- backgroundImage: backgroundImageUrl ? "url(".concat(backgroundImageUrl, ")") : "initial",
1688
- backgroundSize: "cover"
1689
- },
1690
- children: /*#__PURE__*/jsx("div", {
1691
- className: "neeto-ui-rounded-lg cursor-pointer p-3 transition-all duration-300 ease-in-out group-hover:opacity-85",
1692
- children: /*#__PURE__*/jsxs("div", {
1693
- className: "neeto-ui-rounded-lg p-3",
1694
- children: [/*#__PURE__*/jsxs("div", {
1695
- className: "mb-3",
1696
- children: [/*#__PURE__*/jsx(Typography, {
1697
- style: "h3",
1698
- weight: "semibold",
1699
- children: /*#__PURE__*/jsx("span", {
1700
- style: {
1701
- color: primaryColor
1702
- },
1703
- children: primaryLabel
1704
- })
1705
- }), /*#__PURE__*/jsx(Typography, {
1706
- className: "neeto-ui-text-gray-600",
1707
- style: "body2",
1708
- children: /*#__PURE__*/jsx("span", {
1709
- style: {
1710
- color: secondaryColor
1711
- },
1712
- children: secondaryLabel
1713
- })
1714
- })]
1715
- }), /*#__PURE__*/jsx("div", {
1716
- className: "neeto-ui-rounded-lg h-5 w-12",
1717
- style: {
1718
- backgroundColor: buttonBackgroundColor
1719
- }
1720
- })]
1721
- })
1722
- })
1723
- });
1724
- };
1725
-
1726
- var Card$1 = function Card(_ref) {
1727
- var _ref$active = _ref.active,
1728
- active = _ref$active === void 0 ? false : _ref$active,
1729
- isPreviewing = _ref.isPreviewing,
1730
- onSetPreviewTheme = _ref.onSetPreviewTheme,
1731
- onDeleteTheme = _ref.onDeleteTheme,
1732
- onEditTheme = _ref.onEditTheme,
1733
- theme = _ref.theme,
1734
- isApplyingTheme = _ref.isApplyingTheme,
1735
- onCloneTheme = _ref.onCloneTheme,
1736
- isHighLightedTheme = _ref.isHighLightedTheme,
1737
- isGlobalTheme = _ref.isGlobalTheme,
1738
- onApplyTheme = _ref.onApplyTheme,
1739
- Thumbnail$1 = _ref.thumbnail;
1740
- var _useTranslation = useTranslation(),
1741
- t = _useTranslation.t;
1742
- var _useConfigStore = useConfigStore(function (store) {
1743
- return {
1744
- themePropertiesSchema: store["themePropertiesSchema"]
1745
- };
1746
- }, shallow),
1747
- themePropertiesSchema = _useConfigStore.themePropertiesSchema;
1748
- var id = theme.id,
1749
- name = theme.name;
1750
- var imageProperties = filterBy({
1751
- kind: "image"
1752
- }, themePropertiesSchema);
1753
- var handleDeleteTheme = function handleDeleteTheme() {
1754
- return onDeleteTheme(id, name);
1755
- };
1756
- var handleQuickEdit = function handleQuickEdit(section) {
1757
- return function (e) {
1758
- e.stopPropagation();
1759
- if (isPresent(onEditTheme)) onEditTheme(theme, section);else onCloneTheme(theme, section);
1760
- };
1761
- };
1762
- var showMoreDropdown = isFunction(onDeleteTheme);
1763
- return /*#__PURE__*/jsx("div", {
1764
- className: "group space-y-2 pt-0.5",
1765
- "data-flip-id": theme.id,
1766
- "data-testid": active ? "active-theme-card" : "theme-card",
1767
- id: theme.id,
1768
- children: /*#__PURE__*/jsxs("div", {
1769
- className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg relative cursor-pointer border-2 transition-all duration-300 ease-in-out", {
1770
- "neeto-ui-border-gray-400": !active,
1771
- "neeto-themes-theme-thumbnail--active": active,
1772
- "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
1773
- "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
1774
- }),
1775
- onClick: function onClick() {
1776
- return onSetPreviewTheme(theme);
1777
- },
1778
- children: [/*#__PURE__*/jsxs("div", {
1779
- className: "neeto-ui-rounded-lg relative overflow-hidden rounded-bl-none rounded-br-none transition-all duration-300 ease-in-out",
1780
- children: [active ? /*#__PURE__*/jsx("div", {
1781
- className: "neeto-themes-theme-thumbnail__active-banner absolute start-0 top-0 z-10 w-full py-1 text-center text-xs font-semibold uppercase tracking-wide",
1782
- "data-testid": "active-theme-label",
1783
- children: t("neetoThemes.common.activeTheme")
1784
- }) : /*#__PURE__*/jsx("div", {
1785
- className: "absolute start-0 top-0 z-10 flex h-full w-full items-center justify-center px-3 pb-3 pt-3",
1786
- children: /*#__PURE__*/jsxs("div", {
1787
- className: classnames("-translate-y-9 flex w-full items-center justify-between gap-2", {
1788
- hidden: !isPreviewing,
1789
- "group-hover:flex": true
1790
- }),
1791
- children: [/*#__PURE__*/jsx(Button, {
1792
- "data-testid": "preview-theme-button",
1793
- disabled: isPreviewing,
1794
- label: t("neetoThemes.common.previewTheme"),
1795
- size: "medium",
1796
- style: "tertiary",
1797
- className: classnames({
1798
- "neeto-themes-theme-thumbnail__preview-btn--disabled opacity-100": isPreviewing,
1799
- "neeto-themes-theme-thumbnail__preview-btn shrink-0 justify-center": true
1800
- }),
1801
- onClick: function onClick() {
1802
- return onSetPreviewTheme(theme);
1803
- }
1804
- }), /*#__PURE__*/jsx(Button, {
1805
- className: "neeto-themes-theme-thumbnail__apply-btn shrink-0 justify-center",
1806
- "data-testid": "apply-theme-button",
1807
- disabled: isApplyingTheme,
1808
- label: t("neetoThemes.common.useTheme"),
1809
- loading: isApplyingTheme,
1810
- size: "medium",
1811
- style: "primary",
1812
- onClick: function onClick() {
1813
- return onApplyTheme(theme);
1814
- }
1815
- })]
1816
- })
1817
- }), /*#__PURE__*/jsx("div", {
1818
- className: "neeto-themes-theme-thumbnail__overlay w-full transition-all duration-300 ease-in-out",
1819
- children: Thumbnail$1 ? /*#__PURE__*/jsx(Thumbnail$1, {
1820
- active: active,
1821
- isHighLightedTheme: isHighLightedTheme,
1822
- isPreviewing: isPreviewing,
1823
- theme: theme
1824
- }) : /*#__PURE__*/jsx(Thumbnail, {
1825
- active: active,
1826
- isHighLightedTheme: isHighLightedTheme,
1827
- isPreviewing: isPreviewing,
1828
- theme: theme
1829
- })
1830
- })]
1831
- }), /*#__PURE__*/jsxs("div", {
1832
- className: "neeto-ui-border-gray-100 flex items-start justify-between gap-1 border-t p-2",
1833
- children: [/*#__PURE__*/jsxs("div", {
1834
- className: "flex items-center space-x-2",
1835
- children: [/*#__PURE__*/jsx(Typography, {
1836
- className: "neeto-ui-text-gray-500 line-clamp-2 min-w-0 grow wrap-anywhere pt-1 italic",
1837
- "data-testid": "theme-name",
1838
- lineHeight: "snug",
1839
- style: "body2",
1840
- children: name
1841
- }), isGlobalTheme && /*#__PURE__*/jsx(Typography, {
1842
- className: "neeto-ui-text-gray-500 shrink-0 pt-1 italic",
1843
- "data-testid": "default-theme-label",
1844
- lineHeight: "snug",
1845
- style: "body2",
1846
- children: t("neetoThemes.common.defaultTheme")
1847
- })]
1848
- }), showMoreDropdown && /*#__PURE__*/jsx(MoreDropdown, {
1849
- dropdownButtonProps: {
1850
- size: "small"
1851
- },
1852
- dropdownProps: {
1853
- strategy: "fixed",
1854
- onClick: function onClick(e) {
1855
- return e.stopPropagation();
1856
- }
1857
- },
1858
- menuItems: [{
1859
- key: "delete",
1860
- "data-testid": "delete-theme-menu-item",
1861
- label: t("neetoThemes.build.leftSideBar.themes.themeOptions.delete"),
1862
- isDisabled: isApplyingTheme,
1863
- onClick: function onClick(e) {
1864
- e.stopPropagation();
1865
- handleDeleteTheme();
1866
- }
1867
- }]
1868
- })]
1869
- }), active && /*#__PURE__*/jsxs("div", {
1870
- className: "flex flex-col",
1871
- children: [/*#__PURE__*/jsx(QuickActionRow, {
1872
- icon: ColorPicker$1,
1873
- label: t("neetoThemes.common.customizeStyle"),
1874
- testId: "quick-customize-style",
1875
- onClick: handleQuickEdit("style")
1876
- }), imageProperties.map(function (_ref2) {
1877
- var _theme$camelKey;
1878
- var key = _ref2.key;
1879
- var camelKey = snakeToCamelCase(key);
1880
- var hasImage = isPresent((_theme$camelKey = theme[camelKey]) === null || _theme$camelKey === void 0 ? void 0 : _theme$camelKey.url);
1881
- var action = hasImage ? "change" : "add";
1882
- var specificKey = "neetoThemes.common.".concat(action).concat(capitalize(camelKey));
1883
- return /*#__PURE__*/jsx(QuickActionRow, {
1884
- icon: AddImage,
1885
- label: t([specificKey, "neetoThemes.common.addImage"]),
1886
- testId: "quick-add-".concat(hyphenate(key)),
1887
- onClick: handleQuickEdit(camelKey)
1888
- }, key);
1889
- }), /*#__PURE__*/jsx(QuickActionRow, {
1890
- icon: CodeBlock,
1891
- label: t("neetoThemes.build.leftSideBar.themes.customCSS"),
1892
- testId: "quick-custom-css",
1893
- onClick: handleQuickEdit("customcss")
1894
- })]
1895
- })]
1896
- })
1897
- });
1898
- };
1899
- var Card = /*#__PURE__*/memo(Card$1);
1900
-
1901
- var Themes = function Themes(_ref) {
1902
- var onEditTheme = _ref.onEditTheme,
1903
- _ref$themes = _ref.themes,
1904
- themes = _ref$themes === void 0 ? [] : _ref$themes,
1905
- _ref$defaultThemes = _ref.defaultThemes,
1906
- defaultThemes = _ref$defaultThemes === void 0 ? [] : _ref$defaultThemes,
1907
- onDeleteTheme = _ref.onDeleteTheme,
1908
- themeToHighlight = _ref.themeToHighlight,
1909
- didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
1910
- isLoading = _ref.isLoading,
1911
- currentTheme = _ref.currentTheme,
1912
- isCurrentThemeLoading = _ref.isCurrentThemeLoading,
1913
- thumbnail = _ref.thumbnail,
1914
- themeBeingApplied = _ref.themeBeingApplied,
1915
- onApplyTheme = _ref.onApplyTheme,
1916
- onApplyThemeSuccess = _ref.onApplyThemeSuccess,
1917
- _ref$isSearchVisible = _ref.isSearchVisible,
1918
- isSearchVisible = _ref$isSearchVisible === void 0 ? false : _ref$isSearchVisible;
1919
- var _useTranslation = useTranslation(),
1920
- t = _useTranslation.t;
1921
- var _useThemeUtils = useThemeUtils(),
1922
- setTheme = _useThemeUtils.setTheme;
1923
- var _useThemeStore = useThemeStore(function (store) {
1924
- return {
1925
- setThemeState: store["setThemeState"],
1926
- previewingTheme: store["previewingTheme"]
1927
- };
1928
- }, shallow),
1929
- setThemeState = _useThemeStore.setThemeState,
1930
- previewingTheme = _useThemeStore.previewingTheme;
1931
- var _useConfigStore = useConfigStore(function (store) {
1932
- return {
1933
- entityType: store["entityType"],
1934
- entityId: store["entityId"]
1935
- };
1936
- }, shallow),
1937
- entityType = _useConfigStore.entityType,
1938
- entityId = _useConfigStore.entityId;
1939
- var _useQueryParams = useQueryParams(),
1940
- _useQueryParams$searc = _useQueryParams.searchTerm,
1941
- searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
1942
- var _useCloneTheme = useCloneTheme(),
1943
- cloneTheme = _useCloneTheme.mutate;
1944
- var _useApplyTheme = useApplyTheme({}),
1945
- applyClonedTheme = _useApplyTheme.mutate;
1946
- var _useShowGlobalTheme = useShowGlobalTheme(entityType),
1947
- _useShowGlobalTheme$d = _useShowGlobalTheme.data,
1948
- _useShowGlobalTheme$d2 = _useShowGlobalTheme$d === void 0 ? {} : _useShowGlobalTheme$d,
1949
- _useShowGlobalTheme$d3 = _useShowGlobalTheme$d2.globalTheme,
1950
- globalTheme = _useShowGlobalTheme$d3 === void 0 ? {} : _useShowGlobalTheme$d3,
1951
- isLoadingGlobalTheme = _useShowGlobalTheme.isLoading;
1952
- useEffect(function () {
1953
- if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
1954
- didScrollActiveThemeIntoView.current = true;
1955
- setTimeout(function () {
1956
- scrollElementIntoView(currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
1957
- }, 100);
1958
- }, [didScrollActiveThemeIntoView, currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id]);
1959
- var setPreviewTheme = function setPreviewTheme(theme) {
1960
- setThemeState({
1961
- previewingTheme: theme
1962
- });
1963
- setTheme(theme);
1964
- };
1965
- var activeThemeId = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id;
1966
- var lowerSearchTerm = searchTerm.toLowerCase();
1967
- var matchesSearch = function matchesSearch(theme) {
1968
- return theme.name.toLowerCase().includes(lowerSearchTerm);
1969
- };
1970
- var activeTheme = activeThemeId ? [].concat(_toConsumableArray(defaultThemes), _toConsumableArray(themes)).find(function (theme) {
1971
- return theme.id === activeThemeId;
1972
- }) : null;
1973
- var isActiveThemeCustom = themes.some(function (theme) {
1974
- return theme.id === activeThemeId;
1975
- });
1976
- var filteredDefaultThemes = defaultThemes.filter(function (theme) {
1977
- return theme.id !== activeThemeId && matchesSearch(theme);
1978
- });
1979
- var filteredThemes = themes.filter(function (theme) {
1980
- return theme.id !== activeThemeId && matchesSearch(theme);
1981
- });
1982
- var showActiveThemeSection = activeTheme && matchesSearch(activeTheme);
1983
- var handleCloneTheme = function handleCloneTheme(data, section) {
1984
- cloneTheme(data.id, {
1985
- onSuccess: function onSuccess(_ref2) {
1986
- var clonedTheme = _ref2.theme;
1987
- // A system theme is cloned when the user customizes it. Apply the
1988
- // clone right away so it becomes the active theme — the editor then
1989
- // won't prompt "apply this theme?" on save.
1990
- applyClonedTheme({
1991
- themeId: clonedTheme.id,
1992
- entityId: entityId,
1993
- entityType: entityType
1994
- }, {
1995
- onSuccess: function onSuccess() {
1996
- onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess(clonedTheme);
1997
- onEditTheme(clonedTheme, section);
1998
- }
1999
- });
2000
- }
2001
- });
2002
- };
2003
- if (isLoading || isCurrentThemeLoading || isLoadingGlobalTheme) {
2004
- return /*#__PURE__*/jsx("div", {
2005
- className: "flex h-full w-full items-center justify-center",
2006
- children: /*#__PURE__*/jsx(Spinner, {})
2007
- });
2008
- }
2009
- var activeThemeSection = showActiveThemeSection && /*#__PURE__*/jsx("div", {
2010
- className: "neeto-ui-border-gray-200 mb-6 border-b px-6 pb-6 lg:px-5 xl:px-6",
2011
- children: /*#__PURE__*/jsx(Card, {
2012
- onApplyTheme: onApplyTheme,
2013
- thumbnail: thumbnail,
2014
- active: true,
2015
- isApplyingTheme: (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === activeTheme.id,
2016
- isGlobalTheme: (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === activeTheme.id,
2017
- isHighLightedTheme: activeTheme.id === themeToHighlight,
2018
- isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === activeTheme.id,
2019
- theme: activeTheme,
2020
- onCloneTheme: handleCloneTheme,
2021
- onEditTheme: isActiveThemeCustom ? onEditTheme : undefined,
2022
- onSetPreviewTheme: setPreviewTheme
2023
- })
2024
- });
2025
- var systemThemesSection = isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/jsx("div", {
2026
- className: "mb-6 space-y-3",
2027
- children: /*#__PURE__*/jsx("div", {
2028
- className: "flex flex-col gap-4 px-6 pb-10 lg:px-5 xl:px-6",
2029
- "data-testid": "system-themes",
2030
- children: filteredDefaultThemes.map(function (theme) {
2031
- return /*#__PURE__*/createElement(Card, {
2032
- onApplyTheme: onApplyTheme,
2033
- theme: theme,
2034
- thumbnail: thumbnail,
2035
- active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
2036
- isApplyingTheme: (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === theme.id,
2037
- isGlobalTheme: (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === theme.id,
2038
- isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
2039
- key: theme.id,
2040
- onCloneTheme: handleCloneTheme,
2041
- onSetPreviewTheme: setPreviewTheme
2042
- });
2043
- })
2044
- })
2045
- });
2046
- var customThemesSection = isNotEmpty(filteredThemes) && /*#__PURE__*/jsx("div", {
2047
- className: "mb-6 space-y-3",
2048
- children: /*#__PURE__*/jsx("div", {
2049
- className: "flex flex-col gap-4 px-6",
2050
- "data-testid": "custom-themes",
2051
- children: filteredThemes.map(function (theme) {
2052
- var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
2053
- var isPreviewing = (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id;
2054
- return /*#__PURE__*/createElement(Card, {
2055
- isPreviewing: isPreviewing,
2056
- onApplyTheme: onApplyTheme,
2057
- onEditTheme: onEditTheme,
2058
- theme: theme,
2059
- thumbnail: thumbnail,
2060
- active: isActive,
2061
- isApplyingTheme: (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === theme.id,
2062
- isGlobalTheme: (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === theme.id,
2063
- isHighLightedTheme: theme.id === themeToHighlight,
2064
- key: theme.id,
2065
- onCloneTheme: handleCloneTheme,
2066
- onDeleteTheme: !isActive && onDeleteTheme,
2067
- onSetPreviewTheme: setPreviewTheme
2068
- });
2069
- })
2070
- })
2071
- });
2072
- return /*#__PURE__*/jsxs("div", {
2073
- className: "neeto-themes-sidebar__scroll",
2074
- children: [/*#__PURE__*/jsxs("div", {
2075
- className: "mb-6 space-y-3",
2076
- children: [isSearchVisible && /*#__PURE__*/jsx(Search, {
2077
- autoFocus: true,
2078
- enableUrlSync: true,
2079
- autoComplete: "off",
2080
- className: "mb-4 mt-1 px-6",
2081
- placeholder: t("neetoThemes.common.searchThemes")
2082
- }), isEmpty(filteredThemes) && isEmpty(filteredDefaultThemes) && /*#__PURE__*/jsx(Typography, {
2083
- className: "text-center",
2084
- "data-testid": "no-data-title",
2085
- style: "body2",
2086
- children: t("neetoThemes.common.noResultsFound")
2087
- })]
2088
- }), activeThemeSection, systemThemesSection, customThemesSection]
2089
- });
2090
- };
2091
-
2092
- var TitleBar = function TitleBar(_ref) {
2093
- var currentScreen = _ref.currentScreen,
2094
- handleBackPress = _ref.handleBackPress,
2095
- handleToggleSearch = _ref.handleToggleSearch;
2096
- var _useTranslation = useTranslation(),
2097
- t = _useTranslation.t;
2098
- var _useThemeStore = useThemeStore(function (store) {
2099
- return {
2100
- previewingTheme: store["previewingTheme"]
2101
- };
2102
- }, shallow),
2103
- previewingTheme = _useThemeStore.previewingTheme;
2104
- var themeId = previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id;
2105
- var _useConfigStore = useConfigStore(function (store) {
2106
- return {
2107
- entityType: store["entityType"],
2108
- helpDocUrl: store["helpDocUrl"]
2109
- };
2110
- }, shallow),
2111
- entityType = _useConfigStore.entityType,
2112
- helpDocUrl = _useConfigStore.helpDocUrl;
2113
- var isCustomizeScreen = isEditThemeRoute() || isNewThemeRoute();
2114
- var isCustomCssScreen = isScreenCustomCSS(currentScreen);
2115
- var isRTL = i18n.dir() === "rtl";
2116
- var BackButtonIcon = isRTL ? RightArrow : LeftArrow;
2117
- if (isCustomizeScreen) {
2118
- return /*#__PURE__*/jsx("div", {
2119
- className: "neeto-themes-sidebar__header px-4",
2120
- children: /*#__PURE__*/jsxs("div", {
2121
- className: "flex items-center justify-start space-x-2",
2122
- children: [/*#__PURE__*/jsx(Button, {
2123
- "data-testid": "customize-themes-back-button",
2124
- icon: BackButtonIcon,
2125
- iconPosition: "left",
2126
- style: "text",
2127
- tooltipProps: {
2128
- content: isCustomCssScreen ? t("neetoThemes.buttons.backToEdit") : t("neetoThemes.buttons.backToThemes"),
2129
- position: "top"
2130
- },
2131
- onClick: function onClick() {
2132
- return handleBackPress(themeId);
2133
- }
2134
- }), /*#__PURE__*/jsxs(Typography, {
2135
- "data-testid": "themes-header",
2136
- lineHeight: "normal",
2137
- style: "h3",
2138
- weight: "semibold",
2139
- children: [isCustomizeScreen && !isCustomCssScreen && (isNewThemeRoute() ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
2140
- })]
2141
- })
2142
- });
2143
- }
2144
- return /*#__PURE__*/jsx("div", {
2145
- className: "neeto-themes-sidebar__header px-6 lg:px-5 xl:px-6",
2146
- children: /*#__PURE__*/jsxs("div", {
2147
- className: "flex items-center justify-between space-x-2",
2148
- children: [/*#__PURE__*/jsxs("div", {
2149
- className: "flex space-x-2",
2150
- children: [/*#__PURE__*/jsx(Typography, {
2151
- "data-testid": "themes-header",
2152
- lineHeight: "normal",
2153
- style: "h3",
2154
- weight: "semibold",
2155
- children: t("neetoThemes.build.leftSideBar.headerTabs.themes")
2156
- }), /*#__PURE__*/jsx(HelpPopover, {
2157
- helpLinkProps: helpDocUrl && {
2158
- href: helpDocUrl
2159
- },
2160
- title: t("neetoThemes.build.leftSideBar.helpPopover.title"),
2161
- description: t("neetoThemes.build.leftSideBar.helpPopover.description", {
2162
- entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()))
2163
- })
2164
- })]
2165
- }), /*#__PURE__*/jsx("div", {
2166
- className: "self-end",
2167
- children: /*#__PURE__*/jsx(Button, {
2168
- "data-testid": "themes-search-toggle-button",
2169
- icon: Search$1,
2170
- iconPosition: "left",
2171
- style: "text",
2172
- tooltipProps: {
2173
- content: t("neetoThemes.common.searchThemes"),
2174
- position: "top"
2175
- },
2176
- onClick: handleToggleSearch
2177
- })
2178
- })]
2179
- })
2180
- });
2181
- };
2182
-
2183
- var MemoizedAlert = /*#__PURE__*/memo(Alert);
2184
- var Sidebar = function Sidebar(_ref) {
2185
- var _themeToDelete$curren2;
2186
- var thumbnail = _ref.thumbnail,
2187
- onPropertiesChange = _ref.onPropertiesChange,
2188
- defaultImageSize = _ref.defaultImageSize,
2189
- fixedAspectRatio = _ref.fixedAspectRatio,
2190
- onApplyThemeSuccess = _ref.onApplyThemeSuccess,
2191
- onUpdateThemeSuccess = _ref.onUpdateThemeSuccess;
2192
- var _useState = useState(DESIGN_SCREENS.THEMES),
2193
- _useState2 = _slicedToArray(_useState, 2),
2194
- currentScreen = _useState2[0],
2195
- setCurrentScreen = _useState2[1];
2196
- var _useState3 = useState(false),
2197
- _useState4 = _slicedToArray(_useState3, 2),
2198
- isDeleteAlertOpen = _useState4[0],
2199
- setIsDeleteAlertOpen = _useState4[1];
2200
- var _useState5 = useState(null),
2201
- _useState6 = _slicedToArray(_useState5, 2),
2202
- themeToHighlight = _useState6[0],
2203
- setThemeToHighlight = _useState6[1];
2204
- var _useState7 = useState({}),
2205
- _useState8 = _slicedToArray(_useState7, 2),
2206
- themeBeingApplied = _useState8[0],
2207
- setThemeBeingApplied = _useState8[1];
2208
- var _useBreakpoints = useBreakpoints(),
2209
- isSize = _useBreakpoints.isSize;
2210
- var isLargerScreen = !isSize("mobile");
2211
- var _useState9 = useState(!isLargerScreen),
2212
- _useState10 = _slicedToArray(_useState9, 2),
2213
- isThemesSidebarCollapsed = _useState10[0],
2214
- setIsThemesSidebarCollapsed = _useState10[1];
2215
- var history = useHistory();
2216
- useEffect(function () {
2217
- setIsThemesSidebarCollapsed(!isLargerScreen);
2218
- }, [isLargerScreen]);
2219
- var _useConfigStore = useConfigStore(function (store) {
2220
- return {
2221
- entityType: store["entityType"],
2222
- entityId: store["entityId"],
2223
- isFetchingSchema: store["isFetchingSchema"],
2224
- defaultThemeName: store["defaultThemeName"]
2225
- };
2226
- }, shallow),
2227
- entityType = _useConfigStore.entityType,
2228
- entityId = _useConfigStore.entityId,
2229
- isFetchingSchema = _useConfigStore.isFetchingSchema,
2230
- defaultThemeName = _useConfigStore.defaultThemeName;
2231
- var _useThemeStore = useThemeStore(function (store) {
2232
- return {
2233
- setThemeState: store["setThemeState"]
2234
- };
2235
- }, shallow),
2236
- setThemeState = _useThemeStore.setThemeState;
2237
- var didScrollActiveThemeIntoView = useRef(null);
2238
- var _useTranslation = useTranslation(),
2239
- t = _useTranslation.t;
2240
- var _useThemeUtils = useThemeUtils(),
2241
- setTheme = _useThemeUtils.setTheme;
2242
- var _useListThemes = useListThemes(entityId),
2243
- _useListThemes$data = _useListThemes.data,
2244
- _useListThemes$data2 = _useListThemes$data === void 0 ? {} : _useListThemes$data,
2245
- _useListThemes$data2$ = _useListThemes$data2.themes,
2246
- themes = _useListThemes$data2$ === void 0 ? [] : _useListThemes$data2$,
2247
- _useListThemes$data2$2 = _useListThemes$data2.defaultThemes,
2248
- defaultThemes = _useListThemes$data2$2 === void 0 ? [] : _useListThemes$data2$2,
2249
- isLoading = _useListThemes.isLoading;
2250
- var _useShowThemeEntity = useShowThemeEntity(entityId),
2251
- _useShowThemeEntity$d = _useShowThemeEntity.data,
2252
- _useShowThemeEntity$d2 = _useShowThemeEntity$d === void 0 ? {} : _useShowThemeEntity$d,
2253
- _useShowThemeEntity$d3 = _useShowThemeEntity$d2.theme,
2254
- currentTheme = _useShowThemeEntity$d3 === void 0 ? {} : _useShowThemeEntity$d3,
2255
- isCurrentThemeLoading = _useShowThemeEntity.isLoading;
2256
- var _useDeleteTheme = useDeleteTheme(),
2257
- deleteTheme = _useDeleteTheme.mutate,
2258
- isDeleting = _useDeleteTheme.isPending;
2259
- var _useApplyTheme = useApplyTheme({
2260
- onSuccess: function onSuccess(_ref2) {
2261
- var theme = _ref2.theme;
2262
- var applyUpdates = function applyUpdates() {
2263
- setTheme(theme);
2264
- highlightTheme(theme);
2265
- setThemeState({
2266
- previewingTheme: theme
2267
- });
2268
- setThemeBeingApplied({});
2269
- setCurrentScreen(DESIGN_SCREENS.THEMES);
2270
- onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess(theme);
2271
- };
2272
-
2273
- // Keep the spinner visible a bit longer so the apply feels deliberate,
2274
- // then glide the card into the pinned active section.
2275
- setTimeout(function () {
2276
- return animateThemeReorder(applyUpdates);
2277
- }, APPLY_SPINNER_DELAY);
2278
- }
2279
- }),
2280
- applyTheme = _useApplyTheme.mutate,
2281
- isApplyingTheme = _useApplyTheme.isPending;
2282
- var themeToDelete = useRef(null);
2283
- var themeToEdit = useRef(null);
2284
- var isCustomCssScreen = isScreenCustomCSS(currentScreen);
2285
- var _useState11 = useState(false),
2286
- _useState12 = _slicedToArray(_useState11, 2),
2287
- isSearchVisible = _useState12[0],
2288
- setIsSearchVisible = _useState12[1];
2289
- var handleToggleSearch = function handleToggleSearch() {
2290
- setIsSearchVisible(function (prev) {
2291
- var next = !prev;
2292
- if (!next) {
2293
- var params = new URLSearchParams(history.location.search);
2294
- params["delete"]("searchTerm");
2295
- history.replace({
2296
- search: params.toString()
2297
- });
2298
- }
2299
- return next;
2300
- });
2301
- };
2302
- var handleEditTheme = function handleEditTheme(theme, section) {
2303
- themeToEdit.current = theme;
2304
- var pathname = buildUrl(buildPathname(routes.themes.edit), {
2305
- themeId: theme.id
2306
- });
2307
- history.push({
2308
- pathname: pathname,
2309
- search: section ? "?section=".concat(section) : ""
2310
- });
2311
- };
2312
- var onApplyTheme = function onApplyTheme(theme) {
2313
- if (themeBeingApplied !== null && themeBeingApplied !== void 0 && themeBeingApplied.id) return;
2314
- setThemeBeingApplied(theme);
2315
- applyTheme({
2316
- themeId: theme.id,
2317
- entityId: entityId,
2318
- entityType: entityType
2319
- }, {
2320
- onError: function onError() {
2321
- return setThemeBeingApplied({});
2322
- }
2323
- });
2324
- };
2325
- var navigateToThemesScreen = function navigateToThemesScreen(themeId) {
2326
- highlightTheme(isPresent(themeId) ? themeId : currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
2327
- history.push(buildPathname(routes.themes.index));
2328
- themeToEdit.current = null;
2329
- };
2330
- var handleBackPress = function handleBackPress(themeId) {
2331
- if (isCustomCssScreen) {
2332
- setCurrentScreen(DESIGN_SCREENS.Customize);
2333
- return;
2334
- }
2335
- navigateToThemesScreen(themeId);
2336
- };
2337
- var highlightTheme = function highlightTheme(themeIdToHighlight) {
2338
- setTimeout(function () {
2339
- scrollElementIntoView(themeIdToHighlight);
2340
- }, 1500);
2341
- setTimeout(function () {
2342
- setThemeToHighlight(null);
2343
- }, 4000);
2344
- setThemeToHighlight(themeIdToHighlight);
2345
- };
2346
- var onCreateTheme = function onCreateTheme(createdTheme) {
2347
- themeToEdit.current = createdTheme;
2348
- setTheme(createdTheme);
2349
- setThemeState({
2350
- previewingTheme: createdTheme
2351
- });
2352
- };
2353
- var onUpdateTheme = function onUpdateTheme(updatedTheme) {
2354
- themeToEdit.current = updatedTheme;
2355
- onUpdateThemeSuccess === null || onUpdateThemeSuccess === void 0 || onUpdateThemeSuccess(updatedTheme);
2356
- };
2357
- var handleDelete = function handleDelete(themeId, name) {
2358
- setIsDeleteAlertOpen(true);
2359
- themeToDelete.current = {
2360
- id: themeId,
2361
- name: name
2362
- };
2363
- };
2364
- var handleCloseDeleteAlert = useCallback(function () {
2365
- setIsDeleteAlertOpen(false);
2366
- themeToDelete.current = null;
2367
- }, [themeToDelete]);
2368
- var handleDeleteTheme = useCallback(function () {
2369
- var _themeToDelete$curren;
2370
- deleteTheme((_themeToDelete$curren = themeToDelete.current) === null || _themeToDelete$curren === void 0 ? void 0 : _themeToDelete$curren.id, {
2371
- onSuccess: function onSuccess() {
2372
- setIsDeleteAlertOpen(false);
2373
- themeToDelete.current = null;
2374
- }
2375
- });
2376
- }, [deleteTheme, themeToDelete]);
2377
- return /*#__PURE__*/jsxs(Fragment, {
2378
- children: [!isThemesSidebarCollapsed && /*#__PURE__*/jsx("div", {
2379
- className: "neeto-themes-sidebar__backdrop",
2380
- onClick: function onClick() {
2381
- setIsThemesSidebarCollapsed(!isThemesSidebarCollapsed);
2382
- }
2383
- }), /*#__PURE__*/jsxs("div", {
2384
- className: classnames("neeto-themes-sidebar neeto-ui-border-gray-200 shrink-0 border-e transition-all duration-300", {
2385
- "neeto-themes-sidebar--expanded": isCustomCssScreen
2386
- }, {
2387
- "neeto-themes-sidebar--collapsed": isThemesSidebarCollapsed
2388
- }),
2389
- children: [/*#__PURE__*/jsx(TitleBar, {
2390
- currentScreen: currentScreen,
2391
- handleBackPress: handleBackPress,
2392
- handleToggleSearch: handleToggleSearch
2393
- }), /*#__PURE__*/jsxs(Switch$1, {
2394
- children: [/*#__PURE__*/jsx(Route, {
2395
- exact: true,
2396
- path: buildPathname(routes.themes.index),
2397
- render: function render() {
2398
- return /*#__PURE__*/jsx(Themes, {
2399
- currentTheme: currentTheme,
2400
- defaultThemes: defaultThemes,
2401
- didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
2402
- highlightTheme: highlightTheme,
2403
- isCurrentThemeLoading: isCurrentThemeLoading,
2404
- isSearchVisible: isSearchVisible,
2405
- onApplyTheme: onApplyTheme,
2406
- onApplyThemeSuccess: onApplyThemeSuccess,
2407
- themeBeingApplied: themeBeingApplied,
2408
- themeToHighlight: themeToHighlight,
2409
- themes: themes,
2410
- thumbnail: thumbnail,
2411
- isLoading: isLoading || isFetchingSchema,
2412
- onDeleteTheme: handleDelete,
2413
- onEditTheme: handleEditTheme
2414
- });
2415
- }
2416
- }), /*#__PURE__*/jsx(Route, {
2417
- path: buildPathname(routes.themes["new"]),
2418
- render: function render() {
2419
- return /*#__PURE__*/jsx(Customize, {
2420
- currentScreen: currentScreen,
2421
- defaultImageSize: defaultImageSize,
2422
- fixedAspectRatio: fixedAspectRatio,
2423
- isApplyingTheme: isApplyingTheme,
2424
- onApplyTheme: onApplyTheme,
2425
- onCreateTheme: onCreateTheme,
2426
- onPropertiesChange: onPropertiesChange,
2427
- onUpdateTheme: onUpdateTheme,
2428
- theme: themeToEdit.current,
2429
- onEditCSSClick: setCurrentScreen
2430
- });
2431
- }
2432
- }), /*#__PURE__*/jsx(Route, {
2433
- path: buildPathname(routes.themes.edit),
2434
- render: function render() {
2435
- return /*#__PURE__*/jsx(Customize, {
2436
- currentScreen: currentScreen,
2437
- defaultImageSize: defaultImageSize,
2438
- fixedAspectRatio: fixedAspectRatio,
2439
- isApplyingTheme: isApplyingTheme,
2440
- onApplyTheme: onApplyTheme,
2441
- onCreateTheme: onCreateTheme,
2442
- onPropertiesChange: onPropertiesChange,
2443
- onUpdateTheme: onUpdateTheme,
2444
- theme: themeToEdit.current,
2445
- onEditCSSClick: setCurrentScreen
2446
- });
2447
- }
2448
- })]
2449
- }), /*#__PURE__*/jsx(MemoizedAlert, {
2450
- isOpen: isDeleteAlertOpen,
2451
- isSubmitting: isDeleting,
2452
- title: t("neetoThemes.alerts.title.deleteTheme"),
2453
- message: t("neetoThemes.alerts.message.deleteTheme", {
2454
- name: (_themeToDelete$curren2 = themeToDelete.current) === null || _themeToDelete$curren2 === void 0 ? void 0 : _themeToDelete$curren2.name,
2455
- defaultThemeName: defaultThemeName,
2456
- entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()))
2457
- }),
2458
- onClose: handleCloseDeleteAlert,
2459
- onSubmit: handleDeleteTheme
2460
- }), /*#__PURE__*/jsx(Button, {
2461
- className: "neeto-themes-sidebar__toggler",
2462
- icon: Collapse,
2463
- style: "secondary",
2464
- onClick: function onClick() {
2465
- setIsThemesSidebarCollapsed(!isThemesSidebarCollapsed);
2466
- }
2467
- })]
2468
- })]
2469
- });
2470
- };
2471
-
2472
- var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
2473
- var children = _ref.children,
2474
- entityType = _ref.entityType,
2475
- entityId = _ref.entityId,
2476
- thumbnail = _ref.thumbnail,
2477
- onPropertiesChange = _ref.onPropertiesChange,
2478
- _ref$defaultImageSize = _ref.defaultImageSize,
2479
- defaultImageSize = _ref$defaultImageSize === void 0 ? {} : _ref$defaultImageSize,
2480
- _ref$fixedAspectRatio = _ref.fixedAspectRatio,
2481
- fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio,
2482
- _ref$helpDocUrl = _ref.helpDocUrl,
2483
- helpDocUrl = _ref$helpDocUrl === void 0 ? null : _ref$helpDocUrl,
2484
- _ref$isTemplateThemes = _ref.isTemplateThemesEnabled,
2485
- isTemplateThemesEnabled = _ref$isTemplateThemes === void 0 ? false : _ref$isTemplateThemes,
2486
- _ref$pageTitle = _ref.pageTitle,
2487
- pageTitle = _ref$pageTitle === void 0 ? null : _ref$pageTitle,
2488
- _ref$onApplyThemeSucc = _ref.onApplyThemeSuccess,
2489
- onApplyThemeSuccess = _ref$onApplyThemeSucc === void 0 ? noop : _ref$onApplyThemeSucc,
2490
- _ref$onUpdateThemeSuc = _ref.onUpdateThemeSuccess,
2491
- onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? noop : _ref$onUpdateThemeSuc,
2492
- _ref$helpPopoverProps = _ref.helpPopoverProps,
2493
- helpPopoverProps = _ref$helpPopoverProps === void 0 ? {} : _ref$helpPopoverProps,
2494
- _ref$enabledFeatures = _ref.enabledFeatures,
2495
- enabledFeatures = _ref$enabledFeatures === void 0 ? {
2496
- customCSS: true
2497
- } : _ref$enabledFeatures,
2498
- _ref$proFeatures = _ref.proFeatures,
2499
- proFeatures = _ref$proFeatures === void 0 ? {} : _ref$proFeatures;
2500
- var _useThemeStore = useThemeStore(function (store) {
2501
- return {
2502
- setThemeState: store["setThemeState"]
2503
- };
2504
- }, shallow),
2505
- setThemeState = _useThemeStore.setThemeState;
2506
- var _useThemeUtils = useThemeUtils(),
2507
- setTheme = _useThemeUtils.setTheme;
2508
- var _useConfigStore = useConfigStore(function (store) {
2509
- return {
2510
- setConfigState: store["setConfigState"]
2511
- };
2512
- }, shallow),
2513
- setConfigState = _useConfigStore.setConfigState;
2514
- var _useTranslation = useTranslation(),
2515
- t = _useTranslation.t;
2516
- var _useShowThemeEntity = useShowThemeEntity(entityId),
2517
- _useShowThemeEntity$d = _useShowThemeEntity.data,
2518
- _useShowThemeEntity$d2 = _useShowThemeEntity$d === void 0 ? {} : _useShowThemeEntity$d,
2519
- _useShowThemeEntity$d3 = _useShowThemeEntity$d2.theme,
2520
- currentTheme = _useShowThemeEntity$d3 === void 0 ? {} : _useShowThemeEntity$d3,
2521
- isLoading = _useShowThemeEntity.isLoading,
2522
- isFetchingCurrentTheme = _useShowThemeEntity.isFetching;
2523
- var isCurrentThemeLoading = isLoading || isFetchingCurrentTheme;
2524
- useEffect(function () {
2525
- setConfigState({
2526
- entityType: entityType,
2527
- entityId: entityId,
2528
- isTemplateThemesEnabled: isTemplateThemesEnabled,
2529
- helpDocUrl: helpDocUrl,
2530
- helpPopoverProps: helpPopoverProps,
2531
- enabledFeatures: enabledFeatures,
2532
- proFeatures: proFeatures
2533
- });
2534
- }, []);
2535
- useEffect(function () {
2536
- if (isNotPresent(currentTheme) || isEditThemeRoute()) {
2537
- return;
2538
- }
2539
- setThemeState({
2540
- previewingTheme: currentTheme
2541
- });
2542
- setTheme(currentTheme);
2543
- }, [isLoading, entityId, currentTheme]);
2544
- useEffect(function () {
2545
- if (isNotPresent(currentTheme)) return;
2546
- setThemeState({
2547
- currentTheme: currentTheme,
2548
- isCurrentThemeLoading: isCurrentThemeLoading
2549
- });
2550
- }, [currentTheme, isCurrentThemeLoading]);
2551
- useEffect(function () {
2552
- var setViewportHeight = function setViewportHeight() {
2553
- document.documentElement.style.setProperty("--viewport-height", "".concat(window.innerHeight, "px"));
2554
- };
2555
- setViewportHeight();
2556
- window.addEventListener("load", setViewportHeight);
2557
- window.addEventListener("resize", setViewportHeight);
2558
- window.addEventListener("orientationchange", setViewportHeight);
2559
- window.addEventListener("scroll", setViewportHeight);
2560
- return function () {
2561
- window.removeEventListener("load", setViewportHeight);
2562
- window.removeEventListener("resize", setViewportHeight);
2563
- window.removeEventListener("orientationchange", setViewportHeight);
2564
- window.removeEventListener("scroll", setViewportHeight);
2565
- };
2566
- }, []);
2567
- return /*#__PURE__*/jsxs("div", {
2568
- className: "neeto-themes__wrapper",
2569
- children: [/*#__PURE__*/jsx(PageTitle, {
2570
- title: pageTitle || t("neetoThemes.common.theme")
2571
- }), /*#__PURE__*/jsx(Sidebar, {
2572
- defaultImageSize: defaultImageSize,
2573
- fixedAspectRatio: fixedAspectRatio,
2574
- onApplyThemeSuccess: onApplyThemeSuccess,
2575
- onPropertiesChange: onPropertiesChange,
2576
- onUpdateThemeSuccess: onUpdateThemeSuccess,
2577
- thumbnail: thumbnail
2578
- }), /*#__PURE__*/jsx("div", {
2579
- className: "neeto-themes-preview__wrapper",
2580
- children: isCurrentThemeLoading ? /*#__PURE__*/jsx("div", {
2581
- className: "m-auto flex h-full w-full items-center justify-center",
2582
- children: /*#__PURE__*/jsx(Spinner, {})
2583
- }) : children
2584
- })]
2585
- });
2586
- };
2587
-
2588
- export { NeetoThemesBuilder as default };
2589
60
  //# sourceMappingURL=NeetoThemesBuilder.js.map