@griddo/ax 11.9.3 → 11.9.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.9.3",
+  "version": "11.9.4",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -119,6 +119,7 @@
     "react-draft-wysiwyg": "1.15.0",
     "react-error-boundary": "4.0.13",
     "react-froala-wysiwyg": "4.0.4",
+    "react-qr-code": "2.0.18",
     "react-redux": "7.2.9",
     "react-refresh": "0.14.2",
     "react-router-dom": "5.1.2",
@@ -224,5 +225,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f31de0826e406056c03e32ee1752196c6115aa19"
+  "gitHead": "1f7eb12dd7b7ac163c4e259f9b180446eb529620"
 }

package/src/__tests__/modules/Users/UserList/UserItem/UserItem.test.tsx

@@ -15,7 +15,12 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import UserItem, { IUserItemProps } from "./../../../../../modules/Users/UserList/UserItem";
 
-import { appStoreMock, sitesStoreGlobalMock, usersSiteStoreMock, usersStoreMock } from "../../../../../__mocks__/store/UserList";
+import {
+  appStoreMock,
+  sitesStoreGlobalMock,
+  usersSiteStoreMock,
+  usersStoreMock,
+} from "../../../../../__mocks__/store/UserList";
 import { defaultStore } from "./../../../../../__mocks__/store/GenericStore";
 
 const middlewares: Middleware[] = [thunk];
@@ -29,9 +34,10 @@ let mockedAxios: MockAdapter;
 
 const onChangeMock = jest.fn();
 const onClickMock = jest.fn();
-const updateUserMock = jest.fn();
 const deleteUserMock = jest.fn();
 const resendInvitationMock = jest.fn();
+const getUsersMock = jest.fn();
+const removeUserFromSiteMock = jest.fn();
 const toggleDeleteToastMock = jest.fn();
 const defaultProps: IUserItemProps = {
   user: {
@@ -55,7 +61,8 @@ const defaultProps: IUserItemProps = {
       width: 1536,
       height: 961,
       orientation: "L",
-      site: "global",
+      site: null,
+      folderId: null,
     },
     failed: 0,
     timezone: "Europe/Madrid",
@@ -162,12 +169,14 @@ const defaultProps: IUserItemProps = {
     },
   ],
   isSelected: false,
+  hoverCheck: false,
   onChange: onChangeMock,
   onClick: onClickMock,
   deleteUser: deleteUserMock,
-  updateUser: updateUserMock,
   resendInvitation: resendInvitationMock,
   toggleDeleteToast: toggleDeleteToastMock,
+  getUsers: getUsersMock,
+  removeUserFromSite: removeUserFromSiteMock,
 };
 
 beforeAll(() => {
@@ -348,8 +357,8 @@ describe("UserItem events", () => {
     };
 
     const store = mockStore({ ...defaultStore, ...initialStore });
-    mockedAxios.onPut("undefined/user/171").reply(200, {});
-    mockedAxios.onGet(`undefined/users?order=dateCreated`).reply(200, []);
+    mockedAxios.onDelete("undefined/user/171/site/2").reply(200, {});
+    mockedAxios.onGet(`undefined/users`).reply(200, []);
 
     const Component = (
       <Router history={history}>
@@ -375,10 +384,10 @@ describe("UserItem events", () => {
     await user.click(removeButton);
     await waitFor(() => expect(screen.queryByTestId("modal-delete-content")).toBeFalsy());
 
-    expect(store.getActions()).toContainEqual({
+    /*expect(store.getActions()).toContainEqual({
       payload: { users: [] },
       type: "users/SET_USERS",
-    });
+    });*/
   });
 
   it("should resend invitation", async () => {

package/src/components/ConfigPanel/Form/ConnectedField/NavConnectedField/index.tsx

@@ -4,8 +4,8 @@ import { connect } from "react-redux";
 import { FieldContainer } from "@ax/components";
 import { navigationActions } from "@ax/containers/Navigation";
 import { getInnerFields } from "@ax/forms";
-import { IRootState } from "@ax/types";
-import { areEqual, filterThemeModules } from "@ax/helpers";
+import { IRootState, ISchemaField } from "@ax/types";
+import { areEqual, filterThemeModules, getFormTemplate } from "@ax/helpers";
 
 const NavConnectedField = (props: any): JSX.Element => {
   const {
@@ -28,6 +28,7 @@ const NavConnectedField = (props: any): JSX.Element => {
     moduleCopy,
     themeElements,
     isReadOnly,
+    tab,
   } = props;
 
   const updateValue = (key: string, value: any) => {
@@ -47,6 +48,8 @@ const NavConnectedField = (props: any): JSX.Element => {
   const isDefaultNav = defaultNavId === selectedContentId;
   const isDisabled = (isSetAsDefaultField && isDefaultNav) || isReadOnly;
   const isConditional = field.type === "ConditionalField";
+  const isFormPage = selectedContent.component === "FormPage";
+  const isFormTemplate = field.type === "formTemplate";
 
   let isTemplateActivated = true;
   if (selectedContent.template) {
@@ -73,6 +76,47 @@ const NavConnectedField = (props: any): JSX.Element => {
 
   const filteredWhiteList = whiteList ? filterThemeModules(themeElements, whiteList) : whiteList;
 
+  if (isFormTemplate) {
+    const template = getFormTemplate(selectedContent[field.key].templateType);
+    if (!template) return <></>;
+
+    const templateFields: ISchemaField[] = template[tab].filter((templateField: ISchemaField) => {
+      const isHidden = templateField.hidden || !templateField.overwrite;
+      return !isHidden;
+    });
+
+    return (
+      <>
+        {templateFields.map((formField) => {
+          const { key, whiteList = [], disabled } = formField;
+          return (
+            <FieldContainer
+              whiteList={whiteList}
+              key={key}
+              objKey={key}
+              field={formField}
+              selectedContent={selectedContent}
+              goTo={goTo}
+              updateValue={updateValue}
+              pages={pages}
+              actions={actions}
+              site={site}
+              lang={lang}
+              disabled={disabled}
+              innerFields={innerFields}
+              theme={theme}
+              moduleCopy={moduleCopy}
+            />
+          );
+        })}
+      </>
+    );
+  }
+
+  if (isFormPage) {
+    return <></>;
+  }
+
   return (
     <FieldContainer
       whiteList={filteredWhiteList}
@@ -105,6 +149,7 @@ const mapStateToProps = (state: IRootState) => ({
   menus: state.menu.savedMenus,
   moduleCopy: state.navigation.moduleCopy,
   themeElements: state.sites.themeElements,
+  tab: state.navigation.tab,
 });
 
 const mapDispatchToProps = {

package/src/components/Fields/LinkField/index.tsx

@@ -7,9 +7,17 @@ import { getNullValue } from "@ax/helpers";
 const LinkField = (props: ILinkFieldProps): JSX.Element => {
   const { value, onChange, disabled, whiteList, goTo, theme, actions, selectedContent, objKey } = props;
 
-  const handleTextChange = (newValue: string) => onChange({ ...value, text: newValue });
+  const defaultValues = {
+    text: "",
+    linkType: "url",
+    url: null,
+    modal: {},
+  };
+
+  const safeValue = value ? value : defaultValues;
+  const handleTextChange = (newValue: string) => onChange({ ...safeValue, text: newValue });
   const handleLinkTypeChange = (newValue: string) => {
-    let newObjValue: ILinkField = { ...value, linkType: newValue };
+    let newObjValue: ILinkField = { ...safeValue, linkType: newValue };
 
     if (newValue === "url") {
       newObjValue = { ...newObjValue, modal: getNullValue(newObjValue.modal, true) };
@@ -21,8 +29,8 @@ const LinkField = (props: ILinkFieldProps): JSX.Element => {
 
     onChange(newObjValue);
   };
-  const handleUrlChange = (newValue: IUrlField) => onChange({ ...value, url: newValue });
-  const handleModalChange = (newValue: any) => onChange({ ...value, modal: newValue });
+  const handleUrlChange = (newValue: IUrlField) => onChange({ ...safeValue, url: newValue });
+  const handleModalChange = (newValue: any) => onChange({ ...safeValue, modal: newValue });
 
   const modalFieldSchema = {
     title: "Modal",
@@ -48,7 +56,7 @@ const LinkField = (props: ILinkFieldProps): JSX.Element => {
         title="Text"
         name="text"
         fieldType="TextField"
-        value={value.text}
+        value={safeValue.text}
         onChange={handleTextChange}
         disabled={disabled}
       />
@@ -56,7 +64,7 @@ const LinkField = (props: ILinkFieldProps): JSX.Element => {
         title="Type of link"
         name="linkType"
         fieldType="ConditionalField"
-        value={value.linkType}
+        value={safeValue.linkType}
         onChange={handleLinkTypeChange}
         disabled={disabled}
         options={[
@@ -77,7 +85,7 @@ const LinkField = (props: ILinkFieldProps): JSX.Element => {
             title="Modal"
             name="modal"
             fieldType="ComponentContainer"
-            value={value.modal}
+            value={safeValue.modal}
             onChange={handleModalChange}
             disabled={disabled}
             whiteList={whiteList}
@@ -96,7 +104,7 @@ const LinkField = (props: ILinkFieldProps): JSX.Element => {
             title="URL"
             name="url"
             fieldType="UrlField"
-            value={value.url}
+            value={safeValue.url}
             onChange={handleUrlChange}
             disabled={disabled}
             mandatory
@@ -111,7 +119,7 @@ const LinkField = (props: ILinkFieldProps): JSX.Element => {
 };
 
 interface ILinkFieldProps {
-  value: ILinkField;
+  value: ILinkField | null;
   onChange: (value: ILinkField | null) => void;
   disabled?: boolean;
   whiteList: string[];

package/src/components/Icon/components/QrCode.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+const SvgQrCode = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#5057FF"
+      d="M3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6c.283 0 .52.096.713.288.191.191.287.429.287.712v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10Zm2-1h4V5H5v4ZM3 20v-6c0-.283.096-.52.288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6c0 .283-.096.52-.287.712A.968.968 0 0 1 10 21H4a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20Zm2-1h4v-4H5v4Zm8-9V4c0-.283.096-.52.287-.712A.968.968 0 0 1 14 3h6c.283 0 .52.096.712.288.192.191.288.429.288.712v6c0 .283-.096.52-.288.713A.968.968 0 0 1 20 11h-6a.968.968 0 0 1-.713-.287A.968.968 0 0 1 13 10Zm2-1h4V5h-4v4Zm4 12v-2h2v2h-2Zm-6-6v-2h2v2h-2Zm2 2v-2h2v2h-2Zm-2 2v-2h2v2h-2Zm2 2v-2h2v2h-2Zm2-2v-2h2v2h-2Zm0-4v-2h2v2h-2Zm2 2v-2h2v2h-2Z"
+    />
+  </svg>
+);
+export default SvgQrCode;

package/src/components/Icon/svgs/Qr-code.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 10V4C3 3.71667 3.09583 3.47917 3.2875 3.2875C3.47917 3.09583 3.71667 3 4 3H10C10.2833 3 10.5208 3.09583 10.7125 3.2875C10.9042 3.47917 11 3.71667 11 4V10C11 10.2833 10.9042 10.5208 10.7125 10.7125C10.5208 10.9042 10.2833 11 10 11H4C3.71667 11 3.47917 10.9042 3.2875 10.7125C3.09583 10.5208 3 10.2833 3 10ZM5 9H9V5H5V9ZM3 20V14C3 13.7167 3.09583 13.4792 3.2875 13.2875C3.47917 13.0958 3.71667 13 4 13H10C10.2833 13 10.5208 13.0958 10.7125 13.2875C10.9042 13.4792 11 13.7167 11 14V20C11 20.2833 10.9042 20.5208 10.7125 20.7125C10.5208 20.9042 10.2833 21 10 21H4C3.71667 21 3.47917 20.9042 3.2875 20.7125C3.09583 20.5208 3 20.2833 3 20ZM5 19H9V15H5V19ZM13 10V4C13 3.71667 13.0958 3.47917 13.2875 3.2875C13.4792 3.09583 13.7167 3 14 3H20C20.2833 3 20.5208 3.09583 20.7125 3.2875C20.9042 3.47917 21 3.71667 21 4V10C21 10.2833 20.9042 10.5208 20.7125 10.7125C20.5208 10.9042 20.2833 11 20 11H14C13.7167 11 13.4792 10.9042 13.2875 10.7125C13.0958 10.5208 13 10.2833 13 10ZM15 9H19V5H15V9ZM19 21V19H21V21H19ZM13 15V13H15V15H13ZM15 17V15H17V17H15ZM13 19V17H15V19H13ZM15 21V19H17V21H15ZM17 19V17H19V19H17ZM17 15V13H19V15H17ZM19 17V15H21V17H19Z" fill="#5057FF"/>
+</svg>

package/src/components/LanguageMenu/index.tsx

@@ -63,7 +63,7 @@ const LanguageMenu = (props: ILanguageMenuProps): JSX.Element => {
 
   return (
     <S.ActionMenu data-testid="language-menu">
-      {!!availableLanguages.length && availableLanguages.map((item) => languageMenuItem(item))}
+      {!!availableLanguages?.length && availableLanguages.map((item) => languageMenuItem(item))}
     </S.ActionMenu>
   );
 };

package/src/containers/Navigation/Defaults/actions.tsx

@@ -800,10 +800,15 @@ function updateEditorContent(
       navigation: { selectedContent, editorContent },
     } = getState();
 
-    const updatedSelectedContent = updateByEditorID(selectedContent, selectedEditorID, key, value);
-    const updatedEditorContent = updateByEditorID(editorContent, selectedEditorID, key, value);
-    setSelectedContent(updatedSelectedContent);
-    dispatch(setEditorContent({ ...updatedEditorContent }));
+    const clonedSelected = deepClone(selectedContent);
+    const clonedEditor = deepClone(editorContent);
+
+    const updatedSelectedContent = updateByEditorID(clonedSelected, selectedEditorID, key, value);
+    const updatedEditorContent = updateByEditorID(clonedEditor, selectedEditorID, key, value);
+    dispatch(setSelectedDefaultContent(updatedSelectedContent));
+    dispatch(setEditorContent(updatedEditorContent));
+
+    generateContent(updatedEditorContent)(dispatch, getState);
   };
 }
 

package/src/containers/PageEditor/actions.tsx

@@ -1093,15 +1093,16 @@ function updateEditorContent(
     } = getState();
 
     const clonedContent = deepClone(editorContent);
+    const clonedSelected = deepClone(selectedContent);
 
-    if (selectedContent.component === "FormPage") {
+    if (clonedSelected.component === "FormPage") {
       protectFormKeys(clonedContent, key);
     }
 
-    const updatedSelectedContent = updateByEditorID(selectedContent, selectedEditorID, key, value);
+    const updatedSelectedContent = updateByEditorID(clonedSelected, selectedEditorID, key, value);
     let updatedEditorContent = updateByEditorID(clonedContent, selectedEditorID, key, value);
 
-    setSelectedContent(updatedSelectedContent);
+    dispatch(setSelectedPageContent(updatedSelectedContent));
     dispatch(setEditorContent(updatedEditorContent));
 
     if (lastTimeout) {

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -321,7 +321,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const getSelectedPageLanguage = (language: ILanguage) =>
     pageLanguages.find((lang: IPageLanguage) => lang.languageId === language.id);
 
-  const handleLanguage = (language: ILanguage) => () => {
+  const handleLanguage = (language: ILanguage) => {
     if (!languageActions || !languageActions.setLanguage) return;
 
     const { locale, id } = language;

package/src/modules/Users/Profile/atoms.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import QRCode from "react-qr-code";
+
+import { IModal } from "@ax/types";
+import { Modal } from "@ax/components";
+
+import * as S from "./style";
+
+const LinkDeviceModal = (props: ILinkDeviceModalProps): JSX.Element => {
+  const { isOpen, toggleModal, token } = props;
+
+  const showQRCode = () => {
+    const apiUrl = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;
+    if (!apiUrl || !token) return <></>;
+
+    const content = {
+      apiUrl: apiUrl.endsWith("/") ? apiUrl.slice(0, -1) : apiUrl,
+      token,
+    };
+
+    return (
+      <S.QRWrapper>
+        <QRCode value={JSON.stringify(content)} size={200} />
+      </S.QRWrapper>
+    );
+  };
+
+  return (
+    <Modal isOpen={isOpen} hide={toggleModal} title="Link Device" size="S" height={406}>
+      <S.ModalContent>
+        <div>
+          <p>
+            Download the <strong>Griddo app</strong>, open it and <strong>scan this QR code</strong> to link your device
+            to your user account.
+          </p>
+        </div>
+        {showQRCode()}
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
+interface ILinkDeviceModalProps extends IModal {
+  token: string;
+}
+
+export { LinkDeviceModal };

package/src/modules/Users/Profile/index.tsx

@@ -6,12 +6,13 @@ import { usersActions } from "@ax/containers/Users";
 import { sitesActions } from "@ax/containers/Sites";
 import { Loading, MainWrapper } from "@ax/components";
 import { IGetRoles, IRootState, ISite, IUser } from "@ax/types";
-import { useShouldBeSaved, useURLSearchParam } from "@ax/hooks";
+import { useModal, useShouldBeSaved, useURLSearchParam } from "@ax/hooks";
 
 import UserForm from "../UserForm";
+import { LinkDeviceModal } from "./atoms";
 
 const Profile = (props: IProps) => {
-  const { user, getUser, updateUser, isSaving, isLoading, getSites, getRoles, currentSiteInfo } = props;
+  const { user, getUser, updateUser, isSaving, isLoading, getSites, getRoles, currentSiteInfo, token } = props;
 
   if (!user) {
     throw new Error(`ERROR: User reached Profile with null user`);
@@ -20,7 +21,7 @@ const Profile = (props: IProps) => {
   const isUserInit = useURLSearchParam("init");
 
   const [form, setForm] = useState<IUser>({ ...user });
-
+  const { isOpen, toggleModal } = useModal();
   const { isDirty, setIsDirty } = useShouldBeSaved(form);
 
   const isSiteView = !!currentSiteInfo;
@@ -50,10 +51,18 @@ const Profile = (props: IProps) => {
     action: handleSave,
   };
 
+  const lineButtonProps = user.isSuperAdmin
+    ? {
+        label: "Link Device",
+        action: toggleModal,
+        icon: "QrCode",
+      }
+    : undefined;
+
   if (isLoading) return <Loading />;
 
   return (
-    <MainWrapper title="My Profile" rightButton={rightButtonProps}>
+    <MainWrapper title="My Profile" rightLineButton={lineButtonProps} rightButton={rightButtonProps}>
       <UserForm
         form={form}
         setForm={setForm}
@@ -62,6 +71,7 @@ const Profile = (props: IProps) => {
         site={currentSiteInfo}
         isSiteView={isSiteView}
       />
+      {isOpen && <LinkDeviceModal isOpen={isOpen} toggleModal={toggleModal} token={token} />}
     </MainWrapper>
   );
 };

package/src/modules/Users/Profile/style.tsx

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+const ModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${(p) => p.theme.spacing.m};
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+const QRWrapper = styled.div`
+  padding-top: ${(p) => p.theme.spacing.xs};
+  margin: auto;
+`;
+
+export { ModalContent, QRWrapper };