slice-machine-ui 1.20.1-dev-environments.2 → 1.20.1-dev-next-release.3

package/src/components/PageLayout/PageLayout.stories.tsx

@@ -6,21 +6,12 @@ import {
   PageLayoutHeader,
   PageLayoutPane,
 } from "./PageLayout";
-import { borderTop } from "./PageLayout.css";
 
 type Story = StoryObj<typeof meta>;
 
 const meta = {
   component: PageLayout,
-  argTypes: {
-    children: {
-      control: { disable: true },
-    },
-    activeEnvironmentKind: {
-      control: { type: "select" },
-      options: Object.keys(borderTop),
-    },
-  },
+  argTypes: { children: { control: { disable: true } } },
   parameters: {
     docs: { story: { height: 256, inline: false } },
     layout: "fullscreen",

package/src/components/PageLayout/PageLayout.tsx

@@ -2,18 +2,13 @@ import type { FC, PropsWithChildren } from "react";
 
 import * as styles from "./PageLayout.css";
 
-type PageLayoutProps = PropsWithChildren<{
-  activeEnvironmentKind?: "prod" | "stage" | "dev";
-}>;
-
-export const PageLayout: FC<PageLayoutProps> = ({
-  activeEnvironmentKind = "prod",
+export const PageLayout: FC<PropsWithChildren> = ({
   children,
   ...otherProps
 }) => (
   <div {...otherProps} className={styles.root}>
     {children}
-    <div className={styles.borderTop[activeEnvironmentKind]} />
+    <div className={styles.borderTop} />
   </div>
 );
 

package/src/components/SideNav/SideNav.css.ts

@@ -101,6 +101,7 @@ export const repositoryLinkIcon = style([
     borderWidth: 1,
     cursor: "pointer",
     height: 32,
+    marginRight: 8,
     width: 32,
     color: colors.grey12,
     backgroundColor: {
@@ -162,9 +163,15 @@ export const listTitle = style([
   },
 ]);
 
-export const separator = sprinkles({
-  marginTop: 8,
-});
+export const dashedLine = style([
+  blockWithDisplayRevert,
+  sprinkles({
+    borderColor: colors.grey6,
+    borderTopStyle: "dashed",
+    borderWidth: 1,
+    marginTop: 8,
+  }),
+]);
 
 export const link = style([
   block,

package/src/components/SideNav/SideNav.stories.tsx

@@ -5,6 +5,7 @@ import { LightningIcon } from "@src/icons/Lightning";
 
 import {
   SideNav,
+  SideNavLogo,
   SideNavList,
   SideNavListItem,
   SideNavLink,
@@ -14,7 +15,6 @@ import {
   SideNavRepository,
   RightElement,
 } from "./SideNav";
-import { SideNavEnvironmentSelector } from "./SideNavEnvironmentSelector";
 
 type Story = StoryObj<typeof meta>;
 
@@ -33,34 +33,7 @@ export const Default = {
   args: {
     children: (
       <>
-        <SideNavEnvironmentSelector
-          environments={[
-            {
-              name: "Production",
-              domain: "example-prismic-repo",
-              kind: "prod",
-              users: [{ id: "id" }],
-            },
-            {
-              name: "Staging",
-              domain: "example-prismic-repo-staging",
-              kind: "stage",
-              users: [{ id: "id" }],
-            },
-            {
-              name: "Development",
-              domain: "example-prismic-repo-development",
-              kind: "dev",
-              users: [{ id: "id" }],
-            },
-          ]}
-          activeEnvironment={{
-            name: "Production",
-            domain: "example-prismic-repo",
-            kind: "prod",
-            users: [{ id: "id" }],
-          }}
-        />
+        <SideNavLogo />
 
         <SideNavRepository
           repositoryName="really long repository name"

package/src/components/SideNav/SideNav.tsx

@@ -16,8 +16,6 @@ import type { UrlObject } from "node:url";
 import LogoIcon from "@src/icons/LogoIcon";
 import OpenIcon from "@src/icons/OpenIcon";
 
-import { Divider } from "../Divider";
-
 import * as styles from "./SideNav.css";
 
 type SideNavProps = PropsWithChildren<{ style?: CSSProperties }>;
@@ -92,9 +90,7 @@ export const SideNavListTitle: FC<PropsWithChildren> = (props) => (
   <h3 {...props} className={styles.listTitle} />
 );
 
-export const SideNavSeparator = () => (
-  <Divider color="grey6" className={styles.separator} />
-);
+export const SideNavSeparator = () => <hr className={styles.dashedLine} />;
 
 export type SideNavLinkProps = {
   title: string;

package/src/components/SideNav/index.ts

@@ -1,2 +1 @@
 export * from "./SideNav";
-export { SideNavEnvironmentSelector } from "./SideNavEnvironmentSelector";

package/src/features/customTypes/__tests__/CustomTypeBuilderPage.test.tsx

@@ -178,10 +178,9 @@ async function renderCustomTypesBuilderPage({
   const renderResults = render(<CustomTypesBuilderPage />, customTypeMockStore);
 
   const folder = customType.format === "page" ? "Page types" : "Custom types";
-  const breadcrumb = await screen.findByTestId(
-    `breadcrumb-${folder}-${customType.label as string}`,
-  );
-  expect(breadcrumb).toBeVisible();
+  expect(
+    screen.getByTestId(`breadcrumb-${folder}-${customType.label as string}`),
+  ).toBeVisible();
 
   return renderResults;
 }

package/src/features/inAppGuide/InAppGuideContext.tsx

@@ -0,0 +1,47 @@
+import {
+  Dispatch,
+  FC,
+  PropsWithChildren,
+  SetStateAction,
+  createContext,
+  useContext,
+  useMemo,
+} from "react";
+
+import { usePersistedState } from "@src/hooks/usePersistedState";
+
+type InAppGuideContextValue = {
+  isInAppGuideOpen: boolean;
+  setIsInAppGuideOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+export const InAppGuideContext = createContext<
+  InAppGuideContextValue | undefined
+>(undefined);
+
+export const InAppGuideProvider: FC<PropsWithChildren> = (props) => {
+  const { children } = props;
+  const [isInAppGuideOpen, setIsInAppGuideOpen] = usePersistedState(
+    "isInAppGuideOpen",
+    true,
+  );
+
+  const memoizedValue = useMemo(
+    () => ({ isInAppGuideOpen, setIsInAppGuideOpen }),
+    [isInAppGuideOpen, setIsInAppGuideOpen],
+  );
+
+  return (
+    <InAppGuideContext.Provider value={memoizedValue}>
+      {children}
+    </InAppGuideContext.Provider>
+  );
+};
+
+export const useInAppGuide = () => {
+  const context = useContext(InAppGuideContext);
+  if (context === undefined) {
+    throw new Error("useInAppGuide must be used within an InAppGuideProvider");
+  }
+  return context;
+};

package/src/features/inAppGuide/InAppGuideDialog.tsx

@@ -0,0 +1,97 @@
+import { FC } from "react";
+import {
+  Box,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  IconButton,
+  ScrollArea,
+  Separator,
+  Text,
+  Video,
+} from "@prismicio/editor-ui";
+
+import { Counter } from "@src/components/Counter";
+import { HelpIcon } from "@src/icons/HelpIcon";
+import { useIsEmptyProject } from "@src/hooks/useIsEmptyProject";
+
+import { useInAppGuideContent } from "./inAppGuideContent";
+import { useInAppGuide } from "./InAppGuideContext";
+
+export const InAppGuideDialog: FC = () => {
+  const isEmptyProject = useIsEmptyProject();
+  const { isInAppGuideOpen, setIsInAppGuideOpen } = useInAppGuide();
+  const inAppGuideContent = useInAppGuideContent();
+
+  const trigger =
+    isEmptyProject === false ? (
+      <Box position="fixed" right={16} bottom={16}>
+        <IconButton
+          color="purple"
+          icon={<HelpIcon />}
+          onClick={() => {
+            setIsInAppGuideOpen(!isInAppGuideOpen);
+          }}
+          radius="full"
+          variant="solid"
+        />
+      </Box>
+    ) : undefined;
+
+  return (
+    <Dialog
+      trigger={trigger}
+      modal={false}
+      open={isInAppGuideOpen && isEmptyProject === false}
+      onOpenChange={(open) => {
+        setIsInAppGuideOpen(open);
+      }}
+      position="bottomRight"
+      size={{
+        width: 360,
+        height: 456,
+      }}
+    >
+      <DialogHeader title={inAppGuideContent.title} />
+      <DialogContent>
+        <ScrollArea>
+          <Box flexDirection="column" padding={{ inline: 16, block: 8 }}>
+            <Text>{inAppGuideContent.description}</Text>
+          </Box>
+
+          <Box>
+            <Separator />
+          </Box>
+
+          {inAppGuideContent.steps.map((content, index) => (
+            <Box key={index} flexDirection="column">
+              <Box flexDirection="column" padding={16} gap={8}>
+                <Box alignItems="center" gap={8}>
+                  <Counter>{index + 1}</Counter>
+                  <Text component="h3" variant="bold">
+                    {content.title}
+                  </Text>
+                </Box>
+                <Video
+                  src={content.videoUrl}
+                  sizing="contain"
+                  autoPlay
+                  controls
+                  loop
+                />
+                <Text>{content.description}</Text>
+              </Box>
+
+              <Separator />
+            </Box>
+          ))}
+
+          <Box flexDirection="column" padding={16} gap={4}>
+            <Text variant="bold">{inAppGuideContent.successTitle}</Text>
+            <Text>{inAppGuideContent.successDescription}</Text>
+          </Box>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/features/inAppGuide/inAppGuideContent.tsx

@@ -0,0 +1,65 @@
+import { TextLink, Text } from "@prismicio/editor-ui";
+
+import { useRepositoryInformation } from "@src/hooks/useRepositoryInformation";
+
+export function useInAppGuideContent() {
+  const { repositoryUrl } = useRepositoryInformation();
+
+  return {
+    title: "Build a page in 5 minutes",
+    description:
+      "Great, now that you have a page type, let's make it a live page!",
+    steps: [
+      {
+        title: "Add slices to your page type",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/ADD_SLICE.mp4",
+        description: "Use slice templates and add them to your page type.",
+      },
+      {
+        title: "Code your page",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/CODE_SNIP.mp4",
+        description:
+          "If you don't already have a page component, copy-paste the page snippets provided in your page type to create one.",
+      },
+      {
+        title: "Push to your Page Builder",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PUSH.mp4",
+        description:
+          "You have just created some models, but you can't use them yet. First, you must push them to the Page Builder. The Page Builder is where you create content. Go head — push your models.",
+      },
+      {
+        title: "Create content",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/WRITE.mp4",
+        description: (
+          <>
+            Open your{" "}
+            <TextLink href={repositoryUrl} underline>
+              Page Builder
+            </TextLink>
+            , create a page, add slices, save, and publish. Then, come back
+            here.
+          </>
+        ),
+      },
+      {
+        title: "Render your page",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PREVIEW.mp4",
+        description: (
+          <>
+            To render the page, run your project in your terminal and visit the
+            page on localhost (e.g.{" "}
+            <Text component="code">localhost:3000/example-page</Text>).
+          </>
+        ),
+      },
+    ],
+    successTitle: "Next",
+    successDescription:
+      "Create more slices and then go back to the Page Builder to build out your website.",
+  };
+}

package/src/hooks/usePersistedState.ts

@@ -0,0 +1,34 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+type PersistedState<T> = [T, Dispatch<SetStateAction<T>>];
+
+const SLICE_MACHINE_STORAGE_PREFIX = "slice-machine";
+
+export function usePersistedState<T>(
+  key: string,
+  defaultValue: T,
+): PersistedState<T> {
+  const computedKey = `${SLICE_MACHINE_STORAGE_PREFIX}_${key}`;
+
+  const [value, setValue] = useState<T>(() => {
+    try {
+      const value = localStorage.getItem(computedKey);
+
+      return value !== null ? (JSON.parse(value) as T) : defaultValue;
+    } catch (error) {
+      console.warn(`Error reading localStorage key “${computedKey}”:`, error);
+
+      return defaultValue;
+    }
+  });
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(computedKey, JSON.stringify(value));
+    } catch (error) {
+      console.warn(`Error setting localStorage key “${computedKey}”:`, error);
+    }
+  }, [computedKey, value]);
+
+  return [value, setValue];
+}

package/src/hooks/useRepositoryInformation.ts

@@ -0,0 +1,24 @@
+import { useSelector } from "react-redux";
+
+import { SliceMachineStoreType } from "@src/redux/type";
+import { getApiEndpoint, getRepoName } from "@src/modules/environment";
+
+// TODO: This hook should be extracted to a new manager endpoint
+export function useRepositoryInformation() {
+  const { repositoryName, apiEndpoint } = useSelector(
+    (store: SliceMachineStoreType) => ({
+      repositoryName: getRepoName(store),
+      apiEndpoint: getApiEndpoint(store),
+    }),
+  );
+  const repositoryDomain = new URL(apiEndpoint).hostname.replace(".cdn", "");
+  const repositoryUrl = apiEndpoint
+    .replace(".cdn.", ".")
+    .replace("/api/v2", "");
+
+  return {
+    repositoryName,
+    repositoryDomain,
+    repositoryUrl,
+  };
+}

package/src/icons/FlowerBackgroundIcon.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react";
+
+export const FlowerBackgroundIcon: FC = (props) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16 8C15.9847 7.44998 15.8169 6.91443 15.5147 6.45381C15.2133 5.99404 14.7893 5.62622 14.2903 5.39293C14.4802 4.87612 14.5202 4.31673 14.4095 3.77778C14.298 3.23797 14.0375 2.74074 13.6586 2.34142C13.2584 1.96254 12.762 1.70285 12.2222 1.59046C11.6833 1.47978 11.1239 1.5198 10.6071 1.70966C10.3746 1.20988 10.0077 0.785015 9.54704 0.48361C9.08642 0.182205 8.55087 0.0136228 8 0C7.44998 0.0144742 6.91613 0.181354 6.45636 0.48361C5.99659 0.785866 5.63133 1.21073 5.4006 1.70966C4.88293 1.5198 4.32184 1.47808 3.78118 1.59046C3.24053 1.70115 2.74244 1.96169 2.34227 2.34142C1.96339 2.74159 1.70456 3.23968 1.59472 3.77863C1.48404 4.31758 1.52661 4.87697 1.71733 5.39293C1.21754 5.62622 0.791826 5.99319 0.488719 6.45296C0.185611 6.91273 0.0161771 7.44913 0 8C0.0170285 8.55087 0.185611 9.08642 0.488719 9.54704C0.791826 10.0068 1.21754 10.3746 1.71733 10.6071C1.52661 11.123 1.48404 11.6824 1.59472 12.2214C1.70541 12.7612 1.96339 13.2584 2.34142 13.6586C2.74159 14.0358 3.23882 14.2946 3.77778 14.4061C4.31673 14.5185 4.87612 14.4777 5.39293 14.2903C5.62622 14.7893 5.99319 15.2133 6.45381 15.5155C6.91358 15.8169 7.44998 15.9847 8 16C8.55087 15.9864 9.08642 15.8186 9.54704 15.5172C10.0077 15.2158 10.3746 14.7901 10.6071 14.2912C11.1213 14.4947 11.685 14.5432 12.2273 14.4308C12.7688 14.3184 13.2661 14.0502 13.6577 13.6586C14.0494 13.2669 14.3184 12.7697 14.4308 12.2273C14.5432 11.685 14.4947 11.1213 14.2903 10.6071C14.7893 10.3738 15.2133 10.0068 15.5155 9.54619C15.8169 9.08642 15.9847 8.55002 16 8Z"
+      fill="#6E56CF"
+    />
+  </svg>
+);

package/src/icons/HelpIcon.tsx

@@ -0,0 +1,19 @@
+import type { FC, SVGProps } from "react";
+
+export const HelpIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.5 18.9824C15.9675 18.7377 18.7377 15.9675 18.9824 12.5H15.9691C15.7434 14.3094 14.3094 15.7434 12.5 15.9691V18.9824ZM15.9691 11.5H18.9824C18.7377 8.03251 15.9675 5.2623 12.5 5.01758V8.03095C14.3094 8.25657 15.7434 9.69064 15.9691 11.5ZM11.5 18.9824V15.9691C9.69064 15.7434 8.25657 14.3094 8.03095 12.5H5.01758C5.2623 15.9675 8.03251 18.7377 11.5 18.9824ZM5.01758 11.5H8.03095C8.25657 9.69064 9.69064 8.25657 11.5 8.03095V5.01758C8.03251 5.2623 5.2623 8.03251 5.01758 11.5ZM9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z"
+      fill="#EDEDEF"
+    />
+  </svg>
+);

package/test/pages/slices.test.tsx

@@ -167,14 +167,18 @@ describe("slices", () => {
       },
     });
 
-    const createOneButton = await screen.findByTestId("create-slice");
+    const createOneButton = document.querySelector('[data-cy="create-slice"]');
     await act(async () => {
-      fireEvent.click(createOneButton);
+      if (createOneButton) {
+        fireEvent.click(createOneButton);
+      }
     });
 
-    const nameInput = await screen.findByPlaceholderText(/slice api id/i);
+    const nameInput = document.querySelector('[data-cy="slice-name-input"]');
     await act(async () => {
-      fireEvent.change(nameInput, { target: { value: "FooBar" } });
+      if (nameInput) {
+        fireEvent.change(nameInput, { target: { value: "FooBar" } });
+      }
     });
 
     const createSliceModal = screen.getByLabelText("Create a new slice");

package/test/src/modules/__fixtures__/serverState.ts

@@ -36,8 +36,6 @@ export const dummyServerState: Pick<
         "https://0yyeb2g040.execute-api.us-east-1.amazonaws.com/prod/",
       PrismicOembed: "https://oembed.prismic.io",
       PrismicUnsplash: "https://unsplash.prismic.io",
-      SliceMachineV1:
-        "https://21vvgrh0s6.execute-api.us-east-1.amazonaws.com/v1/",
     },
     shortId: "shortId",
     supportsSliceSimulator: true,

package/components/Navigation/Environment.tsx

@@ -1,47 +0,0 @@
-import {
-  Environment as EnvironmentType,
-  isUnauthenticatedError,
-  isUnauthorizedError,
-} from "@slicemachine/manager/client";
-
-import { useEnvironments } from "@src/features/environments/useEnvironments";
-import { setEnvironment } from "@src/features/environments/actions/setEnvironment";
-import { useActiveEnvironment } from "@src/features/environments/useActiveEnvironment";
-import { getLegacySliceMachineState } from "@src/features/legacyState/actions/getLegacySliceMachineState";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-
-import { SideNavEnvironmentSelector } from "@src/components/SideNav";
-
-export function Environment() {
-  const { environments, error: useEnvironmentsError } = useEnvironments();
-  const { activeEnvironment } = useActiveEnvironment();
-  const { refreshState, openLoginModal } = useSliceMachineActions();
-
-  async function onSelect(environment: EnvironmentType) {
-    await setEnvironment(environment);
-
-    const legacySliceMachineState = await getLegacySliceMachineState();
-
-    refreshState(legacySliceMachineState);
-  }
-
-  if (
-    isUnauthenticatedError(useEnvironmentsError) ||
-    isUnauthorizedError(useEnvironmentsError)
-  ) {
-    return (
-      <SideNavEnvironmentSelector
-        variant="unauthorized"
-        onLogInClick={() => openLoginModal()}
-      />
-    );
-  }
-
-  return (
-    <SideNavEnvironmentSelector
-      environments={environments}
-      activeEnvironment={activeEnvironment}
-      onSelect={onSelect}
-    />
-  );
-}

package/components/Navigation/index.css.ts

@@ -1,6 +0,0 @@
-import { sprinkles } from "@prismicio/editor-ui";
-
-export const environmentDivider = sprinkles({
-  marginTop: 16,
-  marginBottom: 32,
-});

package/out/_next/static/chunks/840-5b485c737b24324b.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[840],{80131:function(e,n,t){"use strict";t.d(n,{M:function(){return w}});var r=t(62230),s=t(85244),a=t(52322),l=t(2784),c=t(75289),i=t(56580),d=t(68780),o=t(70041),u=t(17064),h=t(63397),x=t(78656),C=t(98240),f=function(e){var n=e.selected,t=(0,C.Z)(e,["selected"]);return(0,a.jsx)(c.kC,(0,r.Z)({sx:{p:"24px",mb:3,alignItems:"top",cursor:"pointer",borderRadius:"6px",backgroundColor:"grayLight",boxShadow:n?function(e){var n;return"0 0 0 2px ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.primary))}:"none","&:hover":{boxShadow:function(e){var n;return"0 0 0 2px ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.primary))}}}},t))},p=function(e){var n=e.format,t=(0,u.Z)((0,h.U$)("repeatable"),3),r=t[0],s=t[2],l=x.$[n];return(0,a.jsxs)(c.xu,{mb:2,children:[(0,a.jsxs)(f,{selected:r.value,onClick:function(){return s.setValue(!0)},children:[(0,a.jsx)(c.Y8,{checked:r.value,onChange:function(){},"data-cy":"repeatable-type-radio-btn"}),(0,a.jsxs)(c.xu,{sx:{marginLeft:2},children:["Reusable type",(0,a.jsx)(c.xu,{as:"p",sx:{fontSize:"12px",color:"textClear",mt:1},children:l.hintRepeatable})]})]}),(0,a.jsxs)(f,{selected:!r.value,onClick:function(){return s.setValue(!1)},children:[(0,a.jsx)(c.Y8,{checked:!r.value,onChange:function(){},"data-cy":"single-type-radio-btn"}),(0,a.jsxs)(c.xu,{sx:{marginLeft:2},children:["Single type",(0,a.jsx)(c.xu,{as:"p",sx:{fontSize:"12px",color:"textClear",mt:1},children:l.hintSingle})]})]})]})},m=t(90374),j=t(49471),g=t(77174),v=t(24340),_=t(32665),y=t(3098),b=t(82770),T=t(38876),L=t(75329),w=function(e){var n=e.format,t=e.origin,u=void 0===t?"table":t,h=(0,m.Z)(),C=h.createCustomType,f=h.closeModals,w=(0,i.v9)(function(e){return{customTypeIds:(0,j.W6)(e),customTypeLabels:(0,j.YS)(e),isCreateCustomTypeModalOpen:(0,g.gP)(e,v.q.CREATE_CUSTOM_TYPE),isCreatingCustomType:(0,_.hg)(e,y.z.CREATE_CUSTOM_TYPE)}}),S=w.customTypeIds,k=w.isCreateCustomTypeModalOpen,Z=w.isCreatingCustomType,H=w.customTypeLabels,M=x.$[n],N=(0,l.useState)(!0),E=N[0],I=N[1],R=function(e){var t=e.id,r=e.label,s=e.repeatable,a=r||t;b.Xe.track({event:"custom-type:created",id:t,name:a,format:n,type:s?"repeatable":"single",origin:u}),C(t,a,s,n),f(),I(!0)},V=function(e,n,t){t(E?(0,s.Z)((0,r.Z)({},n),{label:e.target.value,id:(0,T.lV)(e.target.value)}):(0,s.Z)((0,r.Z)({},n),{label:e.target.value}))},z=function(e,n){n("id",e.target.value),I(!1)};return(0,a.jsx)(d.Z,{dataCy:"create-ct-modal",isOpen:k,widthInPx:"530px",formId:"create-custom-type",buttonLabel:"Create",close:function(){f(),I(!0)},onSubmit:R,isLoading:Z,initialValues:{repeatable:!0,id:"",label:""},validate:function(e){var n=e.id,t=e.label,r={};return t&&t.length||(r.label="Cannot be empty."),!r.label&&H.includes(t)&&(r.label="".concat(M.name({start:!0,plural:!1})," name is already taken.")),n&&n.length||(r.id="ID cannot be empty."),r.id||!n||L.xo.exec(n)||(r.id="Invalid id: No special characters allowed."),!r.id&&n&&S.map(function(e){return e.toLowerCase()}).includes(n)&&(r.id='ID "'.concat(n,'" exists already.')),Object.keys(r).length>0?r:void 0},content:{title:"Create a new ".concat(M.name({start:!1,plural:!1}))},children:function(e){var t=e.errors,r=e.setValues,s=e.setFieldValue,l=e.values,i=e.touched;return(0,a.jsxs)(c.xu,{children:[(0,a.jsx)(p,{format:n}),(0,a.jsx)(o.W,{name:"label",label:"".concat(M.name({start:!0,plural:!1})," Name"),dataCy:"ct-name-input",placeholder:"A display name for the ".concat(M.name({start:!1,plural:!1})),error:i.label?t.label:void 0,onChange:function(e){return V(e,l,r)}}),(0,a.jsx)(o.W,{name:"id",dataCy:"ct-id-input",label:"".concat(M.name({start:!0,plural:!1})," ID"),placeholder:M.inputPlaceholder,error:i.id?t.id:void 0,onChange:function(e){return z(e,s)}})]})}})}},840:function(e,n,t){"use strict";t.d(n,{F:function(){return D}});var r=t(52322),s=t(2784),a=t(22715),l=t(97729),c=t.n(l),i=t(56580),d=t(5327),o=t(90374),u=t(32665),h=t(3098),x=t(80131),C=t(78656),f=t(5632),p=t(67557),m=t(50002),j=t(6277);t(80207);var g=function(e){var n=e.children;return(0,r.jsx)("div",{className:"_1ecs97de7i _1ecs97de7n _1ecs97d39c _1ecs97d3gp _1ecs97de99 _1ecs97deal _1ecs97deaz _1ecs97de89",children:(0,r.jsx)("table",{className:"gdfsm51 _1ecs97de7i _1ecs97de7n _1ecs97dec6 _1ecs97ded9",children:n})})},v=(0,s.createContext)("body");function _(){return(0,s.useContext)(v)}var y=function(e){var n=e.children;return(0,r.jsx)(v.Provider,{value:"head",children:(0,r.jsx)("thead",{className:"gdfsm52 _1ecs97de7i _1ecs97de7n _1ecs97d18 _1ecs97d8l",children:n})})},b=function(e){var n=e.children;return(0,r.jsx)(v.Provider,{value:"body",children:(0,r.jsx)("tbody",{className:"gdfsm53 _1ecs97de7i _1ecs97de7n",children:n})})},T=function(e){var n,t=e.children,s=e.onClick,a=_();return(0,r.jsx)("tr",{className:(0,j.W)("_1ecs97de7i _1ecs97de7n _1ecs97deff",(n={},(0,p.Z)(n,"_1ecs97decf",!!s),(0,p.Z)(n,"_1ecs97dm _1ecs97d7z _1ecs97d3c _1ecs97dap _1ecs97d2w _1ecs97da9 _1ecs97defi _1ecs97der0 _1ecs97de8v _1ecs97der3","body"===a),n)),onClick:function(e){var n,t=e.target;if(s&&e.currentTarget.contains(t)){var r=(0,m.JY)(t);(null===(n=null==r?void 0:r.contains(e.currentTarget))||void 0===n||n)&&s(e)}},children:t})},L=function(e){var n=e.children,t=_();return(0,r.jsx)("head"===t?"th":"td",{className:"gdfsm55 _1ecs97de7i _1ecs97de7n _1ecs97d39c _1ecs97d3gp _1ecs97deaz _1ecs97de7j _1ecs97d9nq _1ecs97d9v3 _1ecs97decj _1ecs97depd",children:(0,r.jsx)("div",{className:"gdfsm56 _1ecs97de7i _1ecs97de7k",children:n})})},w=function(){return(0,r.jsxs)("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,r.jsx)("path",{d:"M8 28H24C25.1046 28 26 27.1046 26 26V9L21 4H8C6.89543 4 6 4.89543 6 6V26C6 27.1046 6.89543 28 8 28Z",fill:"#6E56CF"}),(0,r.jsx)("path",{d:"M23 9H26L21 4V7C21 8.10457 21.8954 9 23 9Z",fill:"#9E8CFC"}),(0,r.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.0912 12C13.2794 12 11 14.2794 11 17.0912C11 19.903 13.2794 22.1824 16.0912 22.1824C17.9763 22.1824 19.6215 21.1577 20.501 19.6372C20.6563 19.3688 20.7878 19.0849 20.8926 18.7883C20.9846 18.5279 20.8482 18.2422 20.5878 18.1502C20.3275 18.0582 20.0418 18.1947 19.9498 18.455C19.8657 18.693 19.7601 18.9209 19.6354 19.1365C18.9273 20.3606 17.6049 21.1824 16.0912 21.1824C13.8317 21.1824 12 19.3507 12 17.0912C12 14.8317 13.8317 13 16.0912 13C17.4478 13 18.6507 13.66 19.3955 14.6782H17.6216C17.3455 14.6782 17.1216 14.9021 17.1216 15.1782C17.1216 15.4544 17.3455 15.6782 17.6216 15.6782H20.2998C20.576 15.6782 20.7998 15.4544 20.7998 15.1782V12.5C20.7998 12.2239 20.576 12 20.2998 12C20.0237 12 19.7998 12.2239 19.7998 12.5V13.6032C18.8717 12.6167 17.5536 12 16.0912 12Z",fill:"white"})]})},S=function(){return(0,r.jsxs)("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,r.jsx)("path",{d:"M8 28H24C25.1046 28 26 27.1046 26 26V9L21 4H8C6.89543 4 6 4.89543 6 6V26C6 27.1046 6.89543 28 8 28Z",fill:"#6E56CF"}),(0,r.jsx)("path",{d:"M23 9H26L21 4V7C21 8.10457 21.8954 9 23 9Z",fill:"#9E8CFC"}),(0,r.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14.0869 14.6818L14.6627 12.3787C14.7183 12.1561 14.9183 12 15.1477 12C15.473 12 15.7117 12.3057 15.6328 12.6213L15.1177 14.6818H17.7232L18.299 12.3787C18.3547 12.1561 18.5547 12 18.7841 12C19.1094 12 19.3481 12.3057 19.2692 12.6213L18.754 14.6818H21C21.2761 14.6818 21.5 14.9057 21.5 15.1818C21.5 15.458 21.2761 15.6818 21 15.6818H18.504L17.8449 18.3182H20C20.2761 18.3182 20.5 18.542 20.5 18.8182C20.5 19.0943 20.2761 19.3182 20 19.3182H17.5949L17.0192 21.6213C16.9635 21.8439 16.7635 22 16.5341 22C16.2088 22 15.9701 21.6943 16.049 21.3787L16.5642 19.3182H13.9586L13.3828 21.6213C13.3272 21.8439 13.1272 22 12.8977 22C12.5724 22 12.3338 21.6943 12.4127 21.3787L12.9278 19.3182H11C10.7239 19.3182 10.5 19.0943 10.5 18.8182C10.5 18.542 10.7239 18.3182 11 18.3182H13.1778L13.8369 15.6818H12C11.7239 15.6818 11.5 15.458 11.5 15.1818C11.5 14.9057 11.7239 14.6818 12 14.6818H14.0869ZM16.8142 18.3182L17.4732 15.6818H14.8677L14.2086 18.3182H16.8142Z",fill:"white"})]})},k=t(67445),Z=t(22710),H=t(99267),M=t(17329),N=t(40147),E=t(49471),I=t(7819),R=t(75708);function V(e){return z.apply(this,arguments)}function z(){return(z=(0,Z.Z)(function(e){var n,t,r;return(0,H.__generator)(this,function(s){switch(s.label){case 0:return[4,N.j.customTypes.readAllCustomTypes({format:e})];case 1:if(t=(n=s.sent()).errors,r=n.models,t.length>0)throw t;return[2,r.map(function(e){return e.model})]}})})).apply(this,arguments)}var P=t(2754),O=t(62607),A=function(e){var n,t,l,c,d,u,h=e.format,x=e.isCreatingCustomType,p=(0,o.Z)().openCreateCustomTypeModal,m=(0,f.useRouter)(),j=(t=(0,s.useCallback)(function(e){return(0,M.VA)(V,[h],e)},[h]),{customTypes:(0,M.QT)(V,[h]),updateCustomTypes:t}),v=j.customTypes,_=j.updateCustomTypes,Z=v.sort(function(e,n){return e.id.localeCompare(n.id)}),H=k.cd[h],N=C.$[h];return(u=(0,i.v9)(function(e){return{storeCustomTypes:(0,E.Ch)(e).filter(I.TG)}}).storeCustomTypes,(0,s.useEffect)(function(){var e=u.filter(function(e){return e.local.format===h});(e.length!==v.length||e.some(function(e){var n=v.find(function(n){return n.id===e.local.id});return!n||JSON.stringify(R.Dc.fromSM(e.local))!==JSON.stringify(n)}))&&_(e.map(function(e){var n=e.local;return R.Dc.fromSM(n)}))},[h,_,v,u]),0===Z.length)?(0,r.jsxs)(P.R$,{style:{alignSelf:"center",marginTop:a.TV.size[72]},children:[(0,r.jsx)(P.u2,{children:(0,r.jsx)(a.Ee,{src:H.blankSlateImage,sizing:"cover"})}),(0,r.jsxs)(P.T9,{children:[(0,r.jsx)(P._T,{children:N.name({start:!0,plural:!0})}),(0,r.jsx)(P.nf,{children:N.blankSlateDescription}),(0,r.jsx)(P.Qj,{children:(0,r.jsx)(a.zx,{onClick:p,loading:x,children:"Create"})})]})]}):(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)(g,{children:[(0,r.jsx)(y,{children:(0,r.jsxs)(T,{children:[(0,r.jsx)(L,{children:(0,r.jsx)(a.I5,{name:"notes",size:"medium"})}),(0,r.jsx)(L,{children:"Label"}),(0,r.jsx)(L,{children:"API ID"}),(0,r.jsx)(L,{children:"Limit"}),(0,r.jsx)(L,{})]})}),(0,r.jsx)(b,{children:Z.map(function(e){var n=e.repeatable,t=e.label,s=e.id;return(0,r.jsxs)(T,{onClick:function(){m.push(k.cd[h].getBuilderPagePathname(s))},children:[(0,r.jsx)(L,{children:n?(0,r.jsx)(w,{}):(0,r.jsx)(S,{})}),(0,r.jsx)(L,{children:t}),(0,r.jsx)(L,{children:s}),(0,r.jsx)(L,{children:n?"Reusable":"Single"}),(0,r.jsx)(L,{children:(0,r.jsx)(O._,{isChangesLocal:!1,format:h,customType:e})})]},s)})})]})})},D=function(e){var n=e.format,t=C.$[n],l=(0,o.Z)().openCreateCustomTypeModal,f=(0,i.v9)(function(e){return{isCreatingCustomType:(0,u.hg)(e,h.z.CREATE_CUSTOM_TYPE)}}).isCreatingCustomType;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(c(),{children:(0,r.jsxs)("title",{children:[t.name({start:!0,plural:!0})," - Slice Machine"]})}),(0,r.jsx)(a.SV,{renderError:function(){return(0,r.jsx)(d.LN,{children:(0,r.jsx)(d.RN,{children:(0,r.jsx)(a.xu,{alignItems:"center",justifyContent:"center",children:(0,r.jsx)(a.Iq,{title:"Request failed",description:"An error occurred while fetching your ".concat(t.name({start:!1,plural:!0}),".")})})})})},children:(0,r.jsx)(s.Suspense,{fallback:(0,r.jsxs)(d.LN,{children:[(0,r.jsxs)(d.wd,{children:[(0,r.jsx)(d.Cx,{folder:t.name({start:!0,plural:!0})}),(0,r.jsx)(d.K2,{children:(0,r.jsx)(a.zx,{disabled:!0,startIcon:"add",children:"Create"})})]}),(0,r.jsx)(d.RN,{children:(0,r.jsx)(a._3,{})})]}),children:(0,r.jsxs)(d.LN,{children:[(0,r.jsxs)(d.wd,{children:[(0,r.jsx)(d.Cx,{folder:t.name({start:!0,plural:!0})}),(0,r.jsx)(d.K2,{children:(0,r.jsx)(a.zx,{"data-cy":"create-ct",loading:f,onClick:l,startIcon:"add",children:"Create"})})]}),(0,r.jsx)(d.RN,{children:(0,r.jsxs)(a.xu,{flexDirection:"column",children:[(0,r.jsx)(A,{format:n,isCreatingCustomType:f}),(0,r.jsx)(x.M,{format:n})]})})]})})})]})}},80207:function(){}}]);