@griddo/ax 10.1.70 → 10.1.72

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

@@ -45,4 +45,23 @@ const ModalContent = styled.div`
   padding: ${(p) => p.theme.spacing.m};
 `;
 
-export { Wrapper, ContentWrapper, TitleWrapper, Title, Description, TableWrapper, EmptyWrapper, ModalContent };
+const OrderNote = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+export {
+  Wrapper,
+  ContentWrapper,
+  TitleWrapper,
+  Title,
+  Description,
+  TableWrapper,
+  EmptyWrapper,
+  ModalContent,
+  OrderNote,
+};

package/src/modules/Sites/SitesList/index.tsx

@@ -35,6 +35,9 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     error,
     config,
     setListConfig,
+    hasAnimation,
+    setHasAnimation,
+    isLoading,
   } = props;
 
   const isMount = useIsMount();
@@ -335,12 +338,18 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     </TableList>
   );
 
-  const AllSitesList = () => (displayMode === "grid" ? <GridList /> : <ListTable />);
+  const AllSitesList = () => (
+    <S.AllSitesListWrapper className={hasAnimation ? "animate" : ""} onAnimationEnd={handleAnimationEnd}>
+      {displayMode === "grid" ? <GridList /> : <ListTable />}
+    </S.AllSitesListWrapper>
+  );
+
+  const handleAnimationEnd = () => setHasAnimation(false);
 
   return (
-    <MainWrapper title="Sites" rightButton={rightButtonProps} searchAction={setSearchQuery}>
+    <MainWrapper title="Sites" rightButton={rightButtonProps} searchAction={setSearchQuery} hasAnimation={hasAnimation}>
       <ErrorToast ref={errorRef} />
-      <S.SitesListWrapper>
+      <S.SitesListWrapper className={hasAnimation ? "animate" : ""}>
         {currentRecentSites?.length > 0 ? <RecentSitesList /> : null}
         <AllSitesHeader />
         <AllSitesList />
@@ -367,6 +376,8 @@ interface ISitesProps {
   token: string;
   error: IError;
   config: ISiteListConfig;
+  hasAnimation: boolean;
+  isLoading: boolean;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -377,6 +388,8 @@ const mapStateToProps = (state: IRootState) => ({
   recentSites: state.sites.recentSites,
   error: state.app.error,
   config: state.sites.config,
+  hasAnimation: state.app.hasAnimation,
+  isLoading: state.app.isLoading,
 });
 
 interface IDispatchProps {
@@ -386,6 +399,7 @@ interface IDispatchProps {
   publishSitesBulk(ids: number[], params?: IGetSitesParams): Promise<void>;
   unpublishSitesBulk(ids: number[], params?: IGetSitesParams): Promise<void>;
   setListConfig(config: ISiteListConfig): void;
+  setHasAnimation(hasAnimation: boolean): void;
 }
 
 const mapDispatchToProps = {
@@ -395,6 +409,7 @@ const mapDispatchToProps = {
   publishSitesBulk: sitesActions.publishSitesBulk,
   unpublishSitesBulk: sitesActions.unpublishSitesBulk,
   setListConfig: sitesActions.setListConfig,
+  setHasAnimation: appActions.setHasAnimation,
 };
 
 export type ISitesListProps = ISitesProps & IDispatchProps;

package/src/modules/Sites/SitesList/style.tsx

@@ -1,4 +1,16 @@
-import styled, { css } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
+
+const OpacityAnimation = keyframes`
+  to {
+    opacity: 1;
+  }
+}`;
+
+const TranslateAnimation = keyframes`
+  to {
+    transform: translateY(0);
+  }
+}`;
 
 const SectionHeader = styled.div<{ isRecentSites?: boolean }>`
   display: flex;
@@ -108,6 +120,12 @@ const RecentSitesItemsWrapper = styled.div<{ isHidden: boolean }>`
 
 const SitesListWrapper = styled.div`
   max-width: calc(100vw - calc(24px * 3));
+
+  &.animate {
+    animation: ${OpacityAnimation} 1.5s ease-in 1.5s;
+    animation-fill-mode: forwards;
+    opacity: 0;
+  }
 `;
 
 const GridList = styled.div<{ isEmpty: boolean; fullWidth: boolean }>`
@@ -158,6 +176,14 @@ const PaginationWrapper = styled.div`
   padding-right: ${(p) => p.theme.spacing.m};
 `;
 
+const AllSitesListWrapper = styled.div`
+  &.animate {
+    transform: translateY(50px);
+    animation: ${TranslateAnimation} 1s ease-out 1.5s;
+    animation-fill-mode: forwards;
+  }
+`;
+
 export {
   SectionHeader,
   CollapseButton,
@@ -175,4 +201,5 @@ export {
   Thumbnail,
   ItemName,
   PaginationWrapper,
+  AllSitesListWrapper,
 };

package/src/modules/Sites/index.tsx

@@ -23,6 +23,7 @@ const Sites = (props: ISitesProps): JSX.Element => {
     getAllDataPacks,
     getUser,
     globalLangs,
+    hasAnimation,
   } = props;
 
   useLayoutEffect(() => {
@@ -48,19 +49,21 @@ const Sites = (props: ISitesProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
 
-  return isLoading ? <Loading /> : <SitesList />;
+  return isLoading && !hasAnimation ? <Loading /> : <SitesList />;
 };
 
 const mapStateToProps = (state: IRootState) => ({
   isLoading: state.app.isLoading,
   token: state.app.token,
   globalLangs: state.app.globalLangs,
+  hasAnimation: state.app.hasAnimation,
 });
 
 interface IStateProps {
   isLoading: boolean;
   token: string;
   globalLangs: any[];
+  hasAnimation: boolean;
 }
 
 interface IDispatchProps {

package/src/themes/theme.json

@@ -40,6 +40,10 @@
         "description": "",
         "value": "#E6E7F8"
       },
+      "uiBackground04": {
+        "description": "",
+        "value": "#20224C"
+      },
       "uiBarBackground": {
         "description": "",
         "value": "#FFFFFF"

package/src/types/index.tsx

@@ -809,6 +809,8 @@ export interface IIntegration {
   };
   active?: boolean;
   variables: undefined | IIntegrationVariable[];
+  scriptOrder: number;
+  correlativeScriptOrder?: number;
 }
 
 export interface IIntegrationVariable {