@griddo/ax 10.2.11 → 10.2.12

package/src/modules/Settings/Integrations/IntegrationForm/VariablePanel/index.tsx

@@ -54,75 +54,77 @@ function VariablePanel(props: IProps): JSX.Element {
   return (
     <FloatingPanel title={title} toggleModal={toggleModal} isOpen={isOpen}>
       <S.Wrapper>
-        <S.NoteWrapper>
-          <NoteField value={{ title: "", text: "Make sure you include the variable key in the code." }} />
-        </S.NoteWrapper>
-        <FieldsBehavior
-          title="Is this variable language-dependent?"
-          name="isMultilanguage"
-          fieldType="RadioGroup"
-          value={!!state.multilanguage?.length}
-          options={variableOptions}
-          onChange={handleIsMultilanguage}
-        />
-        <FieldsBehavior
-          title="Variable Name"
-          name="variableName"
-          fieldType="TextField"
-          placeholder="Type a variable name"
-          mandatory
-          value={state.variableName}
-          onChange={handleNameChange}
-        />
-        <FieldsBehavior
-          title="Variable Key"
-          name="variableKey"
-          fieldType="TextField"
-          placeholder="Type a variable {key}"
-          mandatory
-          value={state.variableKey}
-          onChange={handleKeyChange}
-          helptext="Define a Key to this variable"
-        />
-        {!state.multilanguage?.length && (
+        <S.ContentWrapper>
+          <S.NoteWrapper>
+            <NoteField value={{ title: "", text: "Make sure you include the variable key in the code." }} />
+          </S.NoteWrapper>
           <FieldsBehavior
-            title="Default Value"
-            name="defaulValue"
-            fieldType="TextArea"
-            placeholder="Type a default value"
-            value={state.defaultValue}
-            onChange={handleValueChange}
-            helptext="You can define a default value to this variable"
+            title="Is this variable language-dependent?"
+            name="isMultilanguage"
+            fieldType="RadioGroup"
+            value={!!state.multilanguage?.length}
+            options={variableOptions}
+            onChange={handleIsMultilanguage}
           />
-        )}
-        {state.multilanguage?.map((field: IVariableLang, index: number) => {
-          const language = langs.find((lang: ILanguage) => lang.id === field.languageId);
-
-          const handleLangChange = (value: string) => {
-            const langs = state.multilanguage ? [...state.multilanguage] : [];
-            langs[index].value = value;
-            setState({ ...state, multilanguage: langs });
-          };
-
-          return (
+          <FieldsBehavior
+            title="Variable Name"
+            name="variableName"
+            fieldType="TextField"
+            placeholder="Type a variable name"
+            mandatory
+            value={state.variableName}
+            onChange={handleNameChange}
+          />
+          <FieldsBehavior
+            title="Variable Key"
+            name="variableKey"
+            fieldType="TextField"
+            placeholder="Type a variable {key}"
+            mandatory
+            value={state.variableKey}
+            onChange={handleKeyChange}
+            helptext="Define a Key to this variable"
+          />
+          {!state.multilanguage?.length && (
             <FieldsBehavior
-              title={`Default ${language?.language} Value`}
+              title="Default Value"
               name="defaulValue"
               fieldType="TextArea"
               placeholder="Type a default value"
-              value={field.value}
-              onChange={handleLangChange}
-              helptext={`You can define a ${language?.language} default value to this variable`}
-              key={field.languageId}
+              value={state.defaultValue}
+              onChange={handleValueChange}
+              helptext="You can define a default value to this variable"
             />
-          );
-        })}
+          )}
+          {state.multilanguage?.map((field: IVariableLang, index: number) => {
+            const language = langs.find((lang: ILanguage) => lang.id === field.languageId);
+
+            const handleLangChange = (value: string) => {
+              const langs = state.multilanguage ? [...state.multilanguage] : [];
+              langs[index].value = value;
+              setState({ ...state, multilanguage: langs });
+            };
+
+            return (
+              <FieldsBehavior
+                title={`Default ${language?.language} Value`}
+                name="defaulValue"
+                fieldType="TextArea"
+                placeholder="Type a default value"
+                value={field.value}
+                onChange={handleLangChange}
+                helptext={`You can define a ${language?.language} default value to this variable`}
+                key={field.languageId}
+              />
+            );
+          })}
+        </S.ContentWrapper>
+        <S.ActionWrapper>
+          <Button type="button" onClick={handleButtonClick}>
+            {title}
+          </Button>
+        </S.ActionWrapper>
       </S.Wrapper>
-      <S.ActionWrapper>
-        <Button type="button" onClick={handleButtonClick}>
-          {title}
-        </Button>
-      </S.ActionWrapper>
     </FloatingPanel>
   );
 }

package/src/modules/Settings/Integrations/IntegrationForm/VariablePanel/style.tsx

@@ -1,6 +1,11 @@
 import styled from "styled-components";
 
 const Wrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  height: 100%;
+`;
+
+const ContentWrapper = styled.div`
   overflow-y: scroll;
   border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
   position: absolute;
@@ -25,4 +30,4 @@ const NoteWrapper = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.m};
 `;
 
-export { Wrapper, ActionWrapper, NoteWrapper };
+export { Wrapper, ContentWrapper, ActionWrapper, NoteWrapper };

package/src/modules/Settings/Integrations/IntegrationForm/index.tsx

@@ -270,9 +270,11 @@ const IntegrationForm = (props: IProps) => {
           </S.SettingContent>
         </S.SettingsWrapper>
         <FloatingPanel title="Select pages" toggleModal={toggleModal} isOpen={isOpen}>
-          {isOpen && (
-            <PageFinder onClick={handleSetPage} isOpen={isOpen} multiple={true} hideSites={true} pages={pageIDs} />
-          )}
+          <S.ContentWrapper>
+            {isOpen && (
+              <PageFinder onClick={handleSetPage} isOpen={isOpen} multiple={true} hideSites={true} pages={pageIDs} />
+            )}
+          </S.ContentWrapper>
         </FloatingPanel>
         {isVariableOpen && (
           <VariablePanel

package/src/modules/Settings/Integrations/IntegrationForm/style.tsx

@@ -63,6 +63,11 @@ const PageElement = styled.div`
   white-space: nowrap;
 `;
 
+const ContentWrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  height: 100%;
+`;
+
 export {
   Wrapper,
   Heading,
@@ -74,4 +79,5 @@ export {
   PagesWrapper,
   ButtonWrapper,
   PageElement,
+  ContentWrapper,
 };

package/src/modules/Settings/Languages/LanguagePanel/index.tsx

@@ -42,18 +42,20 @@ const LanguagePanel = (props: IProps): JSX.Element => {
 
   return (
     <FloatingPanel title={title} toggleModal={toggleModal} isOpen={isOpen}>
-      <Form item={item} />
-      <S.Footer>
-        {item ? (
-          <Button className="button" type="button" onClick={editButton.action} disabled={editButton.disabled}>
-            {editButton.label}
-          </Button>
-        ) : (
-          <Button className="button" type="button" onClick={addButton.action} disabled={addButton.disabled}>
-            {addButton.label}
-          </Button>
-        )}
-      </S.Footer>
+      <S.Wrapper>
+        <Form item={item} />
+        <S.Footer>
+          {item ? (
+            <Button className="button" type="button" onClick={editButton.action} disabled={editButton.disabled}>
+              {editButton.label}
+            </Button>
+          ) : (
+            <Button className="button" type="button" onClick={addButton.action} disabled={addButton.disabled}>
+              {addButton.label}
+            </Button>
+          )}
+        </S.Footer>
+      </S.Wrapper>
     </FloatingPanel>
   );
 };

package/src/modules/Settings/Languages/LanguagePanel/style.tsx

@@ -1,7 +1,14 @@
 import styled from "styled-components";
 
-export const Footer = styled.div`
+const Wrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  height: 100%;
+`;
+
+const Footer = styled.div`
   position: absolute;
   bottom: ${(p) => p.theme.spacing.m};
   right: ${(p) => p.theme.spacing.m};
 `;
+
+export { Wrapper, Footer };