@griddo/ax 1.75.258 → 10.1.1

package/src/components/Fields/IntegrationsField/IntegrationItem/index.tsx

@@ -0,0 +1,132 @@
+import * as React from "react";
+
+import { Icon, ActionMenu, Tooltip, Button, Toast } from "@ax/components";
+import { useModal, useToast } from "@ax/hooks";
+import { IIntegration, IIntegrationVariable, ILanguage } from "@ax/types";
+
+import VariablesPanel from "./VariablesPanel";
+import CustomPanel from "./CustomPanel";
+import { DeleteModal } from "./atoms";
+import * as S from "./style";
+
+const IntegrationItem = (props: IProps): JSX.Element => {
+  const { integration, disabled, removeItem, editIntegration, languages, index, copyIntegration } = props;
+  const { isOpen: isOpenDelete, toggleModal: toggleModalDelete } = useModal();
+  const { isVisible: isVisibleCopy, toggleToast: toggleToastCopy, setIsVisible: setIsVisibleCopy } = useToast();
+
+  const presenceType = integration.contentPresence?.presenceType;
+  const isCustom = presenceType === "page-custom";
+  const isEditable = isCustom || !!integration.variables?.length;
+  const canDelete = presenceType !== "all" && presenceType !== "page-specific";
+
+  const openFirstTime = isCustom && !integration.name?.length;
+
+  const { isOpen, toggleModal } = useModal(openFirstTime);
+
+  const options = canDelete
+    ? [
+        {
+          label: "Remove",
+          icon: "delete",
+          action: toggleModalDelete,
+        },
+      ]
+    : [];
+
+  const handleCopyIntegration = () => {
+    copyIntegration(integration);
+    toggleToastCopy();
+  };
+
+  if (isCustom) {
+    const copyOption = {
+      label: "Copy",
+      icon: "copy",
+      action: handleCopyIntegration,
+    };
+    options.unshift(copyOption);
+  }
+
+  const handleSetVariables = (variables: IIntegrationVariable[]) => {
+    const newIntegration = { ...integration, variables };
+    editIntegration(newIntegration, index);
+  };
+
+  const handleSetCustom = (modifiedIntegration: Partial<IIntegration>) => {
+    const newIntegration = { ...integration, ...modifiedIntegration };
+    editIntegration(newIntegration, index);
+  };
+
+  const integrationName = isCustom ? "Custom Code" : integration.name;
+
+  const mainDeleteModalAction = {
+    title: "Remove integration",
+    onClick: removeItem,
+  };
+  const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };
+
+  return (
+    <>
+      <S.Component disabled={disabled} data-testid="integration-item">
+        <S.Text>
+          <S.Label disabled={disabled}>{integrationName}</S.Label>
+          {isCustom && <S.Subtitle disabled={disabled}>{integration.name}</S.Subtitle>}
+        </S.Text>
+        <S.ComponentOptions>
+          {isEditable ? (
+            <Tooltip content="Define values">
+              <Button type="button" buttonStyle="text" icon="edit" onClick={toggleModal}>
+                Edit
+              </Button>
+            </Tooltip>
+          ) : (
+            <Tooltip content="Configure in site settings">
+              <S.IconWrapper>
+                <Icon name="lock" size="14px" />
+              </S.IconWrapper>
+            </Tooltip>
+          )}
+          <S.HiddenButtonsWrapper>
+            <ActionMenu options={options} icon="more" />
+          </S.HiddenButtonsWrapper>
+        </S.ComponentOptions>
+      </S.Component>
+      {isCustom ? (
+        <CustomPanel
+          isOpen={isOpen}
+          toggleModal={toggleModal}
+          setIntegration={handleSetCustom}
+          integration={integration}
+        />
+      ) : (
+        <VariablesPanel
+          isOpen={isOpen}
+          toggleModal={toggleModal}
+          setIntegrationVariables={handleSetVariables}
+          integration={integration}
+          languages={languages}
+        />
+      )}
+      <DeleteModal
+        isOpen={isOpenDelete}
+        toggleModal={toggleModalDelete}
+        secondaryModalAction={secondaryDeleteModalAction}
+        mainModalAction={mainDeleteModalAction}
+        integrationName={integration.name}
+      />
+      {isVisibleCopy && <Toast message="1 Custom Code copied to clipboard" setIsVisible={setIsVisibleCopy} />}
+    </>
+  );
+};
+
+interface IProps {
+  integration: Partial<IIntegration>;
+  disabled: boolean;
+  removeItem: () => void;
+  editIntegration: (integration: Partial<IIntegration>, index: number) => void;
+  languages: ILanguage[];
+  index: number;
+  copyIntegration: (integration: Partial<IIntegration>) => void;
+}
+
+export default IntegrationItem;

package/src/components/Fields/IntegrationsField/IntegrationItem/style.tsx

@@ -0,0 +1,63 @@
+import styled from "styled-components";
+
+const HiddenButtonsWrapper = styled.span`
+  margin-left: auto;
+  display: flex;
+  opacity: 0;
+`;
+
+const Component = styled.span<{ disabled?: boolean }>`
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: ${(p) => p.theme.color.uiBackground02};
+  border: 1px solid transparent;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  padding: ${(p) => p.theme.spacing.xs};
+  border-radius: ${(p) => p.theme.radii.s};
+  box-shadow: ${(p) => p.theme.shadow.shadowS};
+  ${(p) => p.theme.textStyle.fieldLabel};
+  text-align: left;
+
+  &:hover ${HiddenButtonsWrapper} {
+    opacity: 1;
+  }
+`;
+
+const Text = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Label = styled.span<{ disabled?: boolean }>`
+  margin: ${(p) => p.theme.spacing.xxs} 0;
+  color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textHighEmphasis)};
+`;
+
+const Subtitle = styled.span<{ disabled?: boolean }>`
+  ${(p) => p.theme.textStyle.uiXS};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textMediumEmphasis)};
+`;
+
+const IconWrapper = styled.div`
+  height: calc(${(p) => p.theme.spacing.s} * 2);
+  width: calc(${(p) => p.theme.spacing.s} * 2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: ${(p) => p.theme.spacing.xs};
+`;
+
+const ComponentOptions = styled.div`
+  display: flex;
+`;
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+export { Component, Label, IconWrapper, HiddenButtonsWrapper, ComponentOptions, Subtitle, Text, ModalContent };

package/src/components/Fields/IntegrationsField/PasteIntegrationButton/index.tsx

@@ -0,0 +1,30 @@
+import React, { memo } from "react";
+
+import { useToast } from "@ax/hooks";
+import { Tooltip, IconAction, Toast } from "@ax/components";
+
+const PasteModuleButton = (props: IProps): JSX.Element => {
+  const { pasteIntegration } = props;
+
+  const { isVisible, toggleToast, setIsVisible } = useToast();
+
+  const handlePasteModule = async () => {
+    pasteIntegration();
+    toggleToast();
+  };
+
+  return (
+    <>
+      <Tooltip content="Paste from clipboard">
+        <IconAction icon="paste" onClick={handlePasteModule} />
+      </Tooltip>
+      {isVisible && <Toast message="1 Custom Code pasted from clipboard" setIsVisible={setIsVisible} />}
+    </>
+  );
+};
+
+interface IProps {
+  pasteIntegration: () => void;
+}
+
+export default memo(PasteModuleButton);

package/src/components/Fields/IntegrationsField/SideModal/SideModalOption/index.tsx

@@ -0,0 +1,52 @@
+import React, { memo } from "react";
+
+import Icon from "@ax/components/Icon";
+import { IIntegration } from "@ax/types";
+
+import * as S from "./style";
+
+const SideModalOption = (props: IProps) => {
+  const { option, handleClick, toggleModal, custom } = props;
+
+  const customOption = {
+    name: "",
+    contentHead: "",
+    contentBody: "",
+    contentBodyPosition: null,
+    contentPresence: { presenceType: "page-custom", relatedPages: null },
+    active: true,
+  };
+
+  const setOption = () => {
+    handleClick(option || customOption);
+    toggleModal();
+  };
+
+  const optionProps = {
+    name: custom ? "Custom code" : option?.name,
+    description: custom ? "Add custom code to the head or body on this page" : option?.description,
+  };
+
+  return (
+    <S.Item onClick={setOption} data-testid="integration-side-modal-option">
+      {custom && (
+        <S.CustomSticker>
+          <S.Icon>
+            <Icon name="add" size="18px" />
+          </S.Icon>
+        </S.CustomSticker>
+      )}
+      <S.Title>{optionProps.name}</S.Title>
+      <S.Description>{optionProps.description}</S.Description>
+    </S.Item>
+  );
+};
+
+interface IProps {
+  option?: Partial<IIntegration>;
+  handleClick: (option: Partial<IIntegration>) => void;
+  toggleModal: () => void;
+  custom?: boolean;
+}
+
+export default memo(SideModalOption);

package/src/components/Fields/IntegrationsField/SideModal/SideModalOption/style.tsx

@@ -0,0 +1,54 @@
+import styled from "styled-components";
+
+const Item = styled.li`
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  padding: ${(p) => p.theme.spacing.s};
+  padding-bottom: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+  box-shadow: ${(p) => p.theme.shadow.shadowS};
+  border-radius: ${(p) => p.theme.radii.s};
+  background-color: ${(p) => p.theme.color.interactiveBackground};
+  &:hover {
+    background: ${(p) => p.theme.color.overlayHoverPrimary};
+  }
+  &:focus {
+    background-color: ${(p) => p.theme.color.overlayFocusPrimary};
+  }
+`;
+
+const Title = styled.span`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+`;
+
+const Description = styled.span`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+const CustomSticker = styled.div`
+  position: absolute;
+  width: 80px;
+  height: 40px;
+  left: -40px;
+  top: -18px;
+  background: ${(p) => p.theme.color.interactive01};
+  transform: rotate(-45deg);
+`;
+
+const Icon = styled.div`
+  position: absolute;
+  right: 50%;
+  bottom: 2px;
+  margin-right: -2px;
+  transform: rotate(45deg) translate(50%);
+  & svg path {
+    fill: ${(p) => p.theme.color.iconHighEmphasisInverse};
+  }
+`;
+
+export { Item, Title, Description, CustomSticker, Icon };

package/src/components/Fields/IntegrationsField/SideModal/index.tsx

@@ -0,0 +1,57 @@
+import React, { useRef } from "react";
+import { createPortal } from "react-dom";
+
+import { useHandleClickOutside } from "@ax/hooks";
+import { IconAction } from "@ax/components";
+import { IIntegration } from "@ax/types";
+
+import SideModalOption from "./SideModalOption";
+import * as S from "./style";
+
+const SideModal = (props: ISideModalProps): JSX.Element | null => {
+  const { integrations, isOpen, toggleModal, handleClick } = props;
+
+  const node = useRef<HTMLDivElement>(null);
+  const handleClickOutside = (e: React.MouseEvent) => {
+    if (node.current?.contains(e.target as Node)) {
+      return;
+    }
+    toggleModal();
+  };
+
+  useHandleClickOutside(isOpen, handleClickOutside);
+
+  return isOpen
+    ? createPortal(
+        <S.Wrapper ref={node}>
+          <S.Header>
+            <S.Title>Integrations</S.Title>
+            <S.ButtonWrapper>
+              <IconAction icon="close" onClick={toggleModal} />
+            </S.ButtonWrapper>
+          </S.Header>
+          <S.Content>
+            {integrations?.map((option, i) => (
+              <SideModalOption
+                key={`${option.id}${i}`}
+                option={option}
+                handleClick={handleClick}
+                toggleModal={toggleModal}
+              />
+            ))}
+            <SideModalOption handleClick={handleClick} toggleModal={toggleModal} custom />
+          </S.Content>
+        </S.Wrapper>,
+        document.body
+      )
+    : null;
+};
+
+interface ISideModalProps {
+  isOpen: boolean;
+  integrations: IIntegration[] | undefined;
+  toggleModal: () => void;
+  handleClick: (integrationId: Partial<IIntegration>) => void;
+}
+
+export default SideModal;

package/src/components/Fields/IntegrationsField/SideModal/style.tsx

@@ -0,0 +1,50 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1000;
+
+  height: 100vh;
+  background: ${(p) => p.theme.colors.uiBackground01};
+  box-shadow: ${(p) => p.theme.shadow.rightPanel};
+  padding-bottom: calc(${(p) => p.theme.spacing.m} * 2);
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: ${(p) => p.theme.spacing.xl};
+  width: 100%;
+  padding: 0 ${(p) => p.theme.spacing.m};
+  background-color: ${(p) => p.theme.colors.uiBackground02};
+  border-bottom: 1px solid ${(p) => p.theme.colors.uiLine};
+  h6 {
+    ${(p) => p.theme.textStyle.headingM}
+    color: ${(p) => p.theme.colors.textHighEmphasis};
+    text-transform: capitalize;
+  }
+`;
+
+const Title = styled.h6``;
+
+const Content = styled.div`
+  list-style: none;
+  padding: ${(p) => p.theme.spacing.m};
+  height: ${(p) => `calc(100vh - (${p.theme.spacing.xl} * 2))`};
+  width: ${(p) => `calc(${p.theme.spacing.xl} * 3)`};
+  overflow: auto;
+  border-right: 1px solid ${(p) => p.theme.colors.uiLine};
+  &:last-child {
+    border-right: 0;
+    width: ${(p) => `calc(${p.theme.spacing.xl} * 4)`};
+  }
+`;
+
+const ButtonWrapper = styled.div`
+  margin: 0 0 0 auto;
+`;
+
+export { Wrapper, Content, Header, Title, ButtonWrapper };

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

@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { differenceInSeconds } from "date-fns";
+
+import { IIntegration, IRootState, ISite, ILanguage } from "@ax/types";
+import { useModal } from "@ax/hooks";
+import { Tooltip, IconAction } from "@ax/components";
+import { integrationsActions } from "@ax/containers/Integrations";
+
+import PasteIntegrationButton from "./PasteIntegrationButton";
+import IntegrationItem from "./IntegrationItem";
+import SideModal from "./SideModal";
+import * as S from "./style";
+
+const IntegrationsField = (props: IIntegrationsFieldProps): JSX.Element => {
+  const {
+    value,
+    onChange,
+    disabled,
+    getIntegrations,
+    integrations,
+    site,
+    languages,
+    copyIntegration,
+    integrationCopy,
+  } = props;
+
+  const [state, setState] = useState<Partial<IIntegration>[]>(value || null);
+  const { isOpen, toggleModal } = useModal();
+
+  useEffect(() => {
+    const params = {
+      pagination: false,
+      filterState: "enable",
+    };
+    getIntegrations(site.id, params, true);
+  }, [getIntegrations, site.id]);
+
+  useEffect(() => {
+    onChange && state && onChange(state);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state]);
+
+  const handleAdd = (integration: Partial<IIntegration>) => {
+    setState((state) => (state ? [...state, integration] : [integration]));
+  };
+
+  const handleEditIntegration = (modifiedIntegration: Partial<IIntegration>, index: number) => {
+    const newIntegrations = [...state];
+    newIntegrations.splice(index, 1, modifiedIntegration);
+    setState(newIntegrations);
+  };
+
+  const removeItem = (index: number) => {
+    const newValue = [...state];
+    newValue.splice(index, 1);
+    setState(newValue);
+  };
+
+  const availableIntegrations = integrations.filter(
+    (integration) =>
+      (!integration.contentPresence.presenceType || integration.contentPresence.presenceType === "page-manual") &&
+      !state?.some((_integration: Partial<IIntegration>) => Number(_integration.id) === Number(integration.id))
+  );
+
+  const timeSinceIntegrationCopy = !!integrationCopy && differenceInSeconds(new Date(), new Date(integrationCopy.date));
+  const eightHoursInSeconds = 8 * 60 * 60;
+  const showPasteIntegrationButton = !disabled && !!integrationCopy && timeSinceIntegrationCopy < eightHoursInSeconds;
+
+  const pasteIntegration = () => {
+    integrationCopy && handleAdd(integrationCopy.integration);
+  };
+
+  return (
+    <S.Wrapper>
+      <S.Title>Third-Party Integration</S.Title>
+      <S.ItemRow>
+        <S.Subtitle>{state?.length || 0} items</S.Subtitle>
+        <S.ActionsWrapper>
+          {showPasteIntegrationButton && <PasteIntegrationButton pasteIntegration={pasteIntegration} />}
+          {!disabled && (
+            <>
+              <Tooltip content="Add integration" hideOnClick>
+                <IconAction icon="add" onClick={toggleModal} />
+              </Tooltip>
+              <SideModal
+                isOpen={isOpen}
+                toggleModal={toggleModal}
+                handleClick={handleAdd}
+                integrations={availableIntegrations}
+              />
+            </>
+          )}
+        </S.ActionsWrapper>
+      </S.ItemRow>
+      {state?.map((integration: Partial<IIntegration>, index: number) => (
+        <IntegrationItem
+          key={`${integration.id}${integration.name}${index}`}
+          integration={integration}
+          disabled={disabled}
+          removeItem={() => removeItem(index)}
+          editIntegration={handleEditIntegration}
+          languages={languages}
+          index={index}
+          copyIntegration={copyIntegration}
+        />
+      ))}
+    </S.Wrapper>
+  );
+};
+
+const mapStateToProps = (state: IRootState) => ({
+  site: state.sites.currentSiteInfo,
+  integrations: state.integrations.integrations,
+  languages: state.app.globalLangs,
+  integrationCopy: state.integrations.integrationCopy,
+});
+
+const mapDispatchToProps = {
+  getIntegrations: integrationsActions.getIntegrations,
+  copyIntegration: integrationsActions.copyIntegration,
+};
+
+interface IStateProps {
+  integrations: IIntegration[];
+  value: Partial<IIntegration>[];
+  onChange: (value: Partial<IIntegration>[]) => void;
+  disabled: boolean;
+  site: ISite;
+  languages: ILanguage[];
+  integrationCopy: { date: Date; integration: IIntegration } | null;
+}
+
+interface IDispatchProps {
+  getIntegrations: (
+    site: number,
+    params: { pagination: boolean; filterState: string },
+    isPage?: boolean
+  ) => Promise<void>;
+  copyIntegration: (integration: Partial<IIntegration>) => void;
+}
+
+export type IIntegrationsFieldProps = IStateProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(IntegrationsField);

package/src/components/Fields/IntegrationsField/style.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div``;
+
+const Title = styled.p`
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+`;
+
+const ItemRow = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Subtitle = styled.span`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textLowEmphasis};
+`;
+
+const ActionsWrapper = styled.div`
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+`;
+
+export { Wrapper, Title, ItemRow, Subtitle, ActionsWrapper };

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

@@ -38,7 +38,7 @@ const TextArea = (props: ITextAreaProps): JSX.Element => {
       data-testid="text-area-component"
       name={name}
       minRows={rows}
-      maxRows={4}
+      maxRows={10}
       value={state}
       onChange={handleOnChange}
       onBlur={handleOnBlur}

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 
 import * as S from "./style";
 
@@ -12,10 +12,12 @@ const ToggleField = (props: IToggleFieldProps): JSX.Element => {
     }
   };
 
+  const id = useMemo(() => Math.random().toString(), []);
+
   return (
     <S.Wrapper background={background} data-testid="toggle-field-wrapper">
       <S.Input
-        id={`toggle-${name}`}
+        id={`toggle-${id}`}
         type="checkbox"
         name={name}
         value={value || false}
@@ -24,7 +26,7 @@ const ToggleField = (props: IToggleFieldProps): JSX.Element => {
         onChange={handleChange}
         data-testid="toggle-field-input"
       />
-      <S.Label htmlFor={`toggle-${name}`} size={background ? "s" : size} />
+      <S.Label htmlFor={`toggle-${id}`} size={background ? "s" : size} />
       {auxText && <S.AuxText data-testid="toggle-auxtext">{auxText}</S.AuxText>}
     </S.Wrapper>
   );

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

@@ -1,11 +1,10 @@
 import React, { memo, useEffect, useState } from "react";
 
-import { IconAction, TextField, FloatingPanel, FieldsBehavior } from "@ax/components";
+import { IconAction, TextField, FloatingPanel, FieldsBehavior, PageFinder } from "@ax/components";
 import { useModal } from "@ax/hooks";
 import { isReqOk } from "@ax/helpers";
 import { IPage, IUrlField, Field, ISelectOption } from "@ax/types";
 import { pages as pagesApi } from "@ax/api";
-import PageFinder from "./PageFinder";
 import { findAnchorsFromPage, findAnchorsFromTab, findTabsFromPage } from "./utils";
 
 import * as S from "./style";
@@ -77,17 +76,18 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
     resetValidation && resetValidation();
   };
 
-  const handleSetPage = (page: IPage) => {
+  const handleSetPage = (page: IPage | IPage[]) => {
     toggleModal();
+    const selectedPage = Array.isArray(page) ? page[0] : page;
     onChange({
       ...value,
       href: null,
-      linkTo: page.id,
-      linkToURL: page.fullUrl,
-      title: page.title,
-      noFollow: !page.follow ? true : false,
+      linkTo: selectedPage.id,
+      linkToURL: selectedPage.fullUrl,
+      title: selectedPage.title,
+      noFollow: !selectedPage.follow ? true : false,
     });
-    handleValidation && handleValidation(page.id.toString(), validators);
+    handleValidation && handleValidation(selectedPage.id.toString(), validators);
     handlePanel && handlePanel(isOpen);
   };