slice-machine-ui 2.2.2-beta.9 → 2.3.0

package/src/features/onboarding/OnboardingGuide.tsx

@@ -0,0 +1,45 @@
+import { Card, CardContent, Text } from "@prismicio/editor-ui";
+
+import { OnboardingProgressStepper } from "@/features/onboarding/OnboardingProgressStepper";
+import {
+  OnboardingProvider,
+  useOnboardingContext,
+} from "@/features/onboarding/OnboardingProvider";
+import { useOnboardingExperiment } from "@/features/onboarding/useOnboardingExperiment";
+
+const OnboardingGuideContent = () => {
+  const { steps, completedStepCount, isComplete } = useOnboardingContext();
+
+  if (isComplete) return null;
+
+  return (
+    <Card color="grey2" variant="outlined" paddingBlock={16}>
+      <CardContent>
+        <div>
+          <Text variant="bold" color="grey12">
+            Welcome
+          </Text>
+          <Text color="grey11" variant="small">
+            Get started in {steps.length} steps
+          </Text>
+        </div>
+        <Text color="grey11" variant="small" align="end">
+          {completedStepCount}/{steps.length}
+        </Text>
+        <OnboardingProgressStepper />
+      </CardContent>
+    </Card>
+  );
+};
+
+export const OnboardingGuide = () => {
+  const { eligible } = useOnboardingExperiment();
+
+  if (!eligible) return null;
+
+  return (
+    <OnboardingProvider>
+      <OnboardingGuideContent />
+    </OnboardingProvider>
+  );
+};

package/src/features/onboarding/OnboardingProgressStepper.tsx

@@ -0,0 +1,71 @@
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  Icon,
+} from "@prismicio/editor-ui";
+import { useState } from "react";
+
+import { useOnboardingContext } from "@/features/onboarding/OnboardingProvider";
+import { OnboardingStepDialog } from "@/features/onboarding/OnboardingStepDialog";
+import type { OnboardingStep } from "@/features/onboarding/types";
+
+const EndCtaIcon = () => <Icon name="playCircle" size="small" color="grey11" />;
+
+export const OnboardingProgressStepper = () => {
+  const { completedStepCount, steps, isStepComplete } = useOnboardingContext();
+
+  const [isDialogOpen, setDialogOpen] = useState(false);
+  const [activeStep, setActiveStep] = useState(steps[0]);
+
+  const showStep = (step: OnboardingStep) => {
+    setActiveStep(step);
+    setDialogOpen(true);
+  };
+
+  return (
+    <>
+      <OnboardingStepDialog
+        step={activeStep}
+        isOpen={isDialogOpen}
+        onClose={() => setDialogOpen(false)}
+      />
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button
+            color="grey"
+            sx={{ width: "100%" }}
+            renderEndIcon={EndCtaIcon}
+          >
+            {completedStepCount > 0 ? "Continue" : "Start"}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuLabel>Progress</DropdownMenuLabel>
+          {steps.map((step) => {
+            const isCompleted = isStepComplete(step.id);
+
+            return (
+              <DropdownMenuItem
+                key={step.id}
+                onSelect={() => showStep(step)}
+                startIcon={
+                  <Icon
+                    color={isCompleted ? "green10" : "currentColor"}
+                    name={isCompleted ? "checkBox" : "checkBoxOutlinedBlank"}
+                  />
+                }
+                description={step.description}
+              >
+                {step.title}
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+};

package/src/features/onboarding/OnboardingProvider.tsx

@@ -0,0 +1,82 @@
+import { createContext, ReactNode, useContext } from "react";
+
+import { onboardingSteps as steps } from "@/features/onboarding/content";
+import {
+  type OnboardingStep,
+  type OnboardingStepStatuses,
+  onboardingStepStatusesSchema,
+  type OnboardingStepType,
+} from "@/features/onboarding/types";
+import { usePersistedState } from "@/hooks/usePersistedState";
+
+type OnboardingContext = {
+  steps: OnboardingStep[];
+  completedStepCount: number;
+  toggleStepComplete: (step: OnboardingStepType) => void;
+  getStepIndex: (stepId: OnboardingStepType) => number;
+  isStepComplete: (stepId: OnboardingStepType) => boolean;
+  isComplete: boolean;
+};
+
+export const OnboardingContext = createContext<OnboardingContext | undefined>(
+  undefined,
+);
+
+const getInitialState = (): OnboardingStepStatuses => {
+  // if the old guide was dismissed, all steps start as complete
+  const wasOldGuideDismissed =
+    localStorage.getItem("slice-machine_isInAppGuideOpen") === "false";
+
+  return Object.fromEntries(
+    steps.map((step) => [step.id, wasOldGuideDismissed]),
+  ) as OnboardingStepStatuses;
+};
+
+export const OnboardingProvider = ({ children }: { children: ReactNode }) => {
+  const [stepStatus, setStepStatus] = usePersistedState(
+    "onboardingSteps",
+    getInitialState(),
+    { schema: onboardingStepStatusesSchema },
+  );
+
+  const toggleStepComplete = (step: OnboardingStepType) => {
+    setStepStatus((current) => ({ ...current, [step]: !current[step] }));
+  };
+
+  const getStepIndex = (stepId: OnboardingStepType) => {
+    return steps.findIndex(({ id }) => id === stepId);
+  };
+
+  const isStepComplete = (stepId: OnboardingStepType) => {
+    return stepStatus[stepId] ?? false;
+  };
+
+  const completedStepCount = Object.values(stepStatus).filter(Boolean).length;
+
+  return (
+    <OnboardingContext.Provider
+      value={{
+        steps,
+        toggleStepComplete,
+        isStepComplete,
+        getStepIndex,
+        completedStepCount,
+        isComplete: completedStepCount === steps.length,
+      }}
+    >
+      {children}
+    </OnboardingContext.Provider>
+  );
+};
+
+export const useOnboardingContext = () => {
+  const context = useContext(OnboardingContext);
+
+  if (context == null) {
+    throw new Error(
+      "useOnboardingContext must be used within an OnboardingProvider",
+    );
+  }
+
+  return context;
+};

package/src/features/onboarding/OnboardingStepDialog/OnboardingStepDialog.tsx

@@ -0,0 +1,46 @@
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+} from "@prismicio/editor-ui";
+
+import { useOnboardingContext } from "@/features/onboarding/OnboardingProvider";
+import { OnboardingStepDialogContent } from "@/features/onboarding/OnboardingStepDialog/OnboardingStepDialogContent";
+import type { OnboardingStep } from "@/features/onboarding/types";
+
+type OnboardingStepDialogProps = {
+  step: OnboardingStep;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const OnboardingStepDialog = ({
+  step,
+  isOpen,
+  onClose,
+}: OnboardingStepDialogProps) => {
+  const { toggleStepComplete, isStepComplete } = useOnboardingContext();
+
+  const markAsDone = () => {
+    if (!isOpen) return;
+    toggleStepComplete(step.id);
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogHeader title="Learn" />
+      <DialogContent>
+        <OnboardingStepDialogContent step={step} />
+        <DialogActions
+          ok={{
+            text: isStepComplete(step.id) ? "Undo step" : "Mark as done",
+            onClick: markAsDone,
+          }}
+          cancel={{ text: "Close" }}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/features/onboarding/OnboardingStepDialog/OnboardingStepDialogContent.tsx

@@ -0,0 +1,38 @@
+import { Box, ScrollArea, Text, Video } from "@prismicio/editor-ui";
+
+import { getOnboardingStepsContent } from "@/features/onboarding/content";
+import { useOnboardingContext } from "@/features/onboarding/OnboardingProvider";
+import { OnboardingStep } from "@/features/onboarding/types";
+import { useRepositoryInformation } from "@/hooks/useRepositoryInformation";
+
+type OnboardingStepDialogContentProps = {
+  step: OnboardingStep;
+};
+
+export const OnboardingStepDialogContent = ({
+  step,
+}: OnboardingStepDialogContentProps) => {
+  const { getStepIndex } = useOnboardingContext();
+  const { repositoryUrl } = useRepositoryInformation();
+
+  const {
+    content: Content,
+    videoUrl,
+    title = step.title,
+  } = getOnboardingStepsContent({ repositoryUrl })[step.id];
+
+  return (
+    <ScrollArea>
+      <Box as="article" flexDirection="column" padding={16} gap={16}>
+        <section>
+          <Text sx={{ marginBottom: 4 }} color="purple9" variant="bold">
+            Step {getStepIndex(step.id) + 1}
+          </Text>
+          <Text variant="h3">{title}</Text>
+          <Content />
+        </section>
+        <Video src={videoUrl} sizing="contain" autoPlay loop />
+      </Box>
+    </ScrollArea>
+  );
+};

package/src/features/onboarding/OnboardingStepDialog/index.ts

@@ -0,0 +1 @@
+export { OnboardingStepDialog } from "./OnboardingStepDialog";

package/src/features/onboarding/content.tsx

@@ -0,0 +1,99 @@
+import { Text } from "@prismicio/editor-ui";
+
+import type {
+  OnboardingStep,
+  OnboardingStepContentDefinition,
+  OnboardingStepType,
+} from "@/features/onboarding/types";
+
+export const onboardingSteps: OnboardingStep[] = [
+  {
+    id: "addSlice",
+    title: "Add Slices",
+    description: "Add slices to your page type.",
+  },
+  {
+    id: "codePage",
+    title: "Code your page",
+    description: "Build your page's structure",
+  },
+  {
+    id: "pushModels",
+    title: "Push Your Page",
+    description: "Push to your Page Builder.",
+  },
+  {
+    id: "createContent",
+    title: "Create content",
+    description: "Create engaging content.",
+  },
+  {
+    id: "renderPage",
+    title: "Render your page",
+    description: "Render your page on localhost.",
+  },
+];
+
+type GetOnboardingStepsContentProps = {
+  repositoryUrl: string;
+};
+
+export const getOnboardingStepsContent = ({
+  repositoryUrl,
+}: GetOnboardingStepsContentProps): Record<
+  OnboardingStepType,
+  OnboardingStepContentDefinition
+> => ({
+  addSlice: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/ADD_SLICE.mp4",
+    content: () => (
+      <Text>Use slice templates and add them to your page type.</Text>
+    ),
+  },
+  codePage: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/CODE_SNIP.mp4",
+    content: () => (
+      <Text>
+        If you don't already have a page component, copy-paste the page snippets
+        provided in your page type to create one.
+      </Text>
+    ),
+  },
+  pushModels: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PUSH.mp4",
+    content: () => (
+      <Text>
+        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.
+      </Text>
+    ),
+  },
+  createContent: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PREVIEW.mp4",
+    content: () => (
+      <Text>
+        Open your{" "}
+        <Text href={repositoryUrl} underline>
+          Page Builder
+        </Text>
+        , create a page, add slices, save, and publish. Then, come back here.
+      </Text>
+    ),
+  },
+  renderPage: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/WRITE.mp4",
+    content: () => (
+      <Text>
+        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>).
+      </Text>
+    ),
+  },
+});

package/src/features/onboarding/types.ts

@@ -0,0 +1,32 @@
+import { z } from "zod";
+
+export const onboardingStepStatusesSchema = z.object({
+  addSlice: z.boolean(),
+  codePage: z.boolean(),
+  pushModels: z.boolean(),
+  createContent: z.boolean(),
+  renderPage: z.boolean(),
+});
+
+export type OnboardingStepStatuses = z.infer<
+  typeof onboardingStepStatusesSchema
+>;
+
+export type OnboardingStepType = keyof OnboardingStepStatuses;
+
+export type OnboardingStep = {
+  id: OnboardingStepType;
+  title: string;
+  description: string;
+};
+
+export type OnboardingStepContentDefinition = {
+  title?: string;
+  content: () => JSX.Element;
+  videoUrl: string;
+};
+
+export type OnboardingStepContent = Record<
+  OnboardingStepType,
+  OnboardingStepContentDefinition
+>;

package/src/features/onboarding/useOnboardingExperiment.ts

@@ -0,0 +1,6 @@
+import { useExperimentVariant } from "@/hooks/useExperimentVariant";
+
+export const useOnboardingExperiment = () => {
+  const variant = useExperimentVariant("slice-machine-onboarding");
+  return { eligible: variant?.value === "on" };
+};

package/src/hooks/usePersistedState.ts

@@ -1,20 +1,37 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { ZodType, ZodTypeDef } from "zod";
 
 type PersistedState<T> = [T, Dispatch<SetStateAction<T>>];
 
 const SLICE_MACHINE_STORAGE_PREFIX = "slice-machine";
 
+type UsePersistedStateOptions<T> = {
+  schema?: ZodType<T, ZodTypeDef, unknown>;
+};
+
+export function usePersistedState<T>(
+  key: string,
+): PersistedState<T | undefined>;
 export function usePersistedState<T>(
   key: string,
   defaultValue: T,
-): PersistedState<T> {
+  options?: UsePersistedStateOptions<T>,
+): PersistedState<T>;
+export function usePersistedState<T>(
+  key: string,
+  defaultValue?: T,
+  options?: UsePersistedStateOptions<T>,
+): PersistedState<T | undefined> {
+  const { schema } = options ?? {};
   const computedKey = `${SLICE_MACHINE_STORAGE_PREFIX}_${key}`;
 
-  const [value, setValue] = useState<T>(() => {
+  const [value, setValue] = useState<T | undefined>(() => {
     try {
       const value = localStorage.getItem(computedKey);
 
-      return value !== null ? (JSON.parse(value) as T) : defaultValue;
+      if (value == null) return defaultValue;
+      if (!schema) return JSON.parse(value) as T;
+      return schema.parse(JSON.parse(value));
     } catch (error) {
       console.warn(`Error reading localStorage key “${computedKey}”:`, error);
 

package/src/legacy/components/Navigation/index.tsx

@@ -17,6 +17,7 @@ import { ErrorBoundary } from "@/ErrorBoundary";
 import { CUSTOM_TYPES_CONFIG } from "@/features/customTypes/customTypesConfig";
 import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
 import { MasterSliceLibraryPreviewModal } from "@/features/masterSliceLibrary/SliceLibraryPreviewModal";
+import { OnboardingGuide } from "@/features/onboarding/OnboardingGuide";
 import { useGitIntegrationExperiment } from "@/features/settings/git/useGitIntegrationExperiment";
 import { useMarketingContent } from "@/hooks/useMarketingContent";
 import { useRepositoryInformation } from "@/hooks/useRepositoryInformation";
@@ -123,6 +124,7 @@ const Navigation: FC = () => {
       </ErrorBoundary>
 
       <SideNavList position="bottom">
+        <OnboardingGuide />
         {masterSliceLibrary !== undefined && (
           <SideNavListItem>
             <MasterSliceLibraryPreviewModal

package/out/_next/static/chunks/212-58a99ab312f8a03b.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[212],{9502:function(e,n,t){"use strict";t.d(n,{R$:function(){return f},Qj:function(){return v},T9:function(){return m},nf:function(){return h},u2:function(){return p},_T:function(){return y}});var r=t(67557),o=t(62230),i=t(85244),s=t(98240),a=t(52322),c=t(7729),l=t(6277),u=t(98484),d=t.n(u),f=function(e){var n=e.backgroundImage,t=e.style,c=(0,s.Z)(e,["backgroundImage","style"]),u=void 0!==n;return(0,a.jsx)("article",(0,i.Z)((0,o.Z)({},c),{className:(0,l.W)(d().root,(0,r.Z)({},d().withBackground,u)),style:(0,o.Z)({backgroundImage:u?"url(".concat(n,")"):void 0},t)}))},p=function(e){return(0,a.jsx)("div",(0,i.Z)((0,o.Z)({},e),{className:d().image}))},m=function(e){return(0,a.jsx)("div",(0,i.Z)((0,o.Z)({},e),{className:d().content}))},y=function(e){return(0,a.jsx)(c.xv,(0,i.Z)((0,o.Z)({},e),{className:d().title}))},h=function(e){return(0,a.jsx)(c.xv,(0,i.Z)((0,o.Z)({},e),{className:d().desc,color:"grey11"}))},v=function(e){return(0,a.jsx)("div",(0,i.Z)((0,o.Z)({},e),{className:d().actions,color:"grey"}))}},65563:function(e,n,t){"use strict";t.d(n,{AK:function(){return Z},E3:function(){return m},EN:function(){return y},F$:function(){return x},HO:function(){return g},L4:function(){return j},Tr:function(){return p},Ue:function(){return _},gR:function(){return S},mf:function(){return h},vB:function(){return v},xS:function(){return b},y6:function(){return l}});var r=t(67557),o=t(62230),i=t(85244),s=t(17064),a=t(98863),c=t(88866);function l(e){var n;return null!==(n=e.format)&&void 0!==n?n:"custom"}function u(e){return Object.entries(e.json)}function d(e,n){return e.json[n]}function f(e,n){var t=d(e,n);if(void 0!==t)return Object.entries(t).find(function(e){var n=(0,s.Z)(e,2);return(n[0],n[1]).type===c.SlicesFieldType})}function p(e,n){if(t=e,d=f(t,a=n),(p=(0,s.Z)(null!=d?d:[],2))[0],null!==(l=null==(m=p[1])?void 0:m.config)&&void 0!==l?l:void 0)return e;var t,a,l,d,p,m,y=function(e,n){var t,r=u(e),o=r.findIndex(function(e){return(0,s.Z)(e,1)[0]===n}),i=r.flatMap(function(e){var n=(0,s.Z)(e,2),t=(n[0],n[1]);return Object.keys(t).filter(function(e){return t[e].type===c.SlicesFieldType})}),a=o;do t="slices".concat(0!==a?a.toString():""),a++;while(i.includes(t));return t}(e,n);return(0,i.Z)((0,o.Z)({},e),{json:(0,i.Z)((0,o.Z)({},e.json),(0,r.Z)({},n,(0,i.Z)((0,o.Z)({},e.json[n]),(0,r.Z)({},y,{type:c.SlicesFieldType,fieldset:"Slice Zone"}))))})}function m(e,n){var t=d(e,n);if(void 0===t)return e;var s=Object.keys(t).find(function(e){return t[e].type===c.SlicesFieldType});if(void 0===s)return e;var l=(0,a.ud)(t,s);return(0,i.Z)((0,o.Z)({},e),{json:(0,i.Z)((0,o.Z)({},e.json),(0,r.Z)({},n,l))})}function y(e){var n,t,s=e.customType,l=e.sectionId,u=e.sliceId,f=d(s,l);if(void 0===f)return s;var p=Object.keys(f).find(function(e){return f[e].type===c.SlicesFieldType});if(void 0===p)return s;var m=f[p];if(m.type!==c.SlicesFieldType)return s;var y=(0,a.ud)(null!==(t=null===(n=m.config)||void 0===n?void 0:n.choices)&&void 0!==t?t:{},u);return(0,i.Z)((0,o.Z)({},s),{json:(0,i.Z)((0,o.Z)({},s.json),(0,r.Z)({},l,(0,i.Z)((0,o.Z)({},f),(0,r.Z)({},p,(0,i.Z)((0,o.Z)({},m),{config:(0,i.Z)((0,o.Z)({},m.config),{choices:y})})))))})}function h(e){var n,t=(0,i.Z)((0,o.Z)({},e),{format:"page"}),r=u(e)[0];if(r){var a=(0,s.Z)(r,1)[0];t=p(t,a)}return t}function v(e,n){return(0,i.Z)((0,o.Z)({},e),{json:(0,i.Z)((0,o.Z)({},e.json),(0,r.Z)({},n,{}))})}function x(e,n){var t=(0,a.ud)(e.json,n);return(0,i.Z)((0,o.Z)({},e),{json:t})}function g(e,n,t){if(n===t)return e;var r=Object.keys(e.json).reduce(function(r,o){return o===n?r[t]=e.json[o]:r[o]=e.json[o],r},{});return(0,i.Z)((0,o.Z)({},e),{json:r})}function b(e){var n=e.customType,t=e.sectionId,a=e.newField,l=e.newFieldId,u=n.json[t],d=f(n,t),p=Object.fromEntries(Object.entries(u).filter(function(e){var n=(0,s.Z)(e,2);return(n[0],n[1]).type!==c.SlicesFieldType})),m=(0,i.Z)((0,o.Z)({},p),(0,r.Z)({},l,a));if(void 0!==d){var y=(0,s.Z)(d,2),h=y[0],v=y[1];m[h]=v}return I({customType:n,sectionId:t,updatedSection:m})}function Z(e){var n=e.customType,t=e.sectionId,r=e.fieldId,o=(0,a.ud)(n.json[t],r);return I({customType:n,sectionId:t,updatedSection:o})}function j(e){var n,t,r,o,i,a=e.customType,c=e.sectionId,l=e.previousFieldId,u=e.newFieldId,d=e.newField,f=(n={fields:a.json[c],previousFieldId:l,newFieldId:u,newField:d},t=n.fields,r=n.previousFieldId,o=n.newFieldId,i=n.newField,Object.entries(t).reduce(function(e,n){var t=(0,s.Z)(n,2),a=t[0],c=t[1];return a===r?e[o]=i:a!==o&&(e[a]=c),e},{}));return I({customType:a,sectionId:c,updatedSection:f})}function S(e){var n,t,r,o,i,a,l,u=e.customType,d=e.sectionId,p=e.sourceIndex,m=e.destinationIndex,y=u.json[d],h=f(u,d),v=(n={fields:Object.fromEntries(Object.entries(y).filter(function(e){var n=(0,s.Z)(e,2);return(n[0],n[1]).type!==c.SlicesFieldType})),sourceIndex:p,destinationIndex:m},t=n.fields,r=n.sourceIndex,o=n.destinationIndex,i=Object.entries(t),a=(0,s.Z)(i.splice(r,1),1)[0],i.splice(o,0,a),Object.fromEntries(i));if(void 0!==h){var x=(0,s.Z)(h,2),g=x[0],b=x[1];v[g]=b}return I({customType:u,sectionId:d,updatedSection:v})}function I(e){var n=e.customType,t=e.sectionId,s=e.updatedSection;return(0,i.Z)((0,o.Z)({},n),{json:(0,i.Z)((0,o.Z)({},n.json),(0,r.Z)({},t,s))})}function _(e){var n,t,r=e.id,i=e.label,s=e.repeatable,a=e.format,c=(n=s,t=a,!1===n&&"page"===t?(0,o.Z)({},C,F):!1===n?T:"page"===t?(0,o.Z)({},w,F):k);return{format:a,id:r,json:c,label:i,repeatable:s,status:!0}}var T={Main:{}},C={Main:{slices:{config:{choices:{}},fieldset:"Slice Zone",type:"Slices"}}},k={Main:{uid:{config:{label:"UID"},type:"UID"}}},w={Main:(0,o.Z)({},k.Main,C.Main)},F={"SEO & Metadata":{meta_title:{config:{label:"Meta Title",placeholder:"A title of the page used for social media and search engines"},type:"Text"},meta_description:{config:{label:"Meta Description",placeholder:"A brief summary of the page"},type:"Text"},meta_image:{config:{constraint:{height:1260,width:2400},label:"Meta Image",thumbnails:[]},type:"Image"}}}},56471:function(e,n,t){"use strict";t.d(n,{_:function(){return N}});var r=t(22710),o=t(99267),i=t(52322),s=t(7729),a=t(5632),c=t(2784),l=t(65186),u=t(59326),d=t(75289),f=t(88932),p=t(7604),m=t(64837);function y(){return(y=(0,r.Z)(function(e){var n,t,r,i,s,a;return(0,o.__generator)(this,function(o){switch(o.label){case 0:n=e.customType,t=e.onSuccess,r=m.$[n.format],o.label=1;case 1:return o.trys.push([1,3,,4]),[4,p.j.customTypes.deleteCustomType({id:n.id})];case 2:if((i=o.sent().errors).length>0)throw i;return t(),f.Am.success("".concat(r.name({start:!0,plural:!1})," deleted")),[3,4];case 3:return s=o.sent(),a="Internal Error: ".concat(r.name({start:!0,plural:!1})," could not be deleted"),console.error(a,s),f.Am.error(a),[3,4];case 4:return[2]}})})).apply(this,arguments)}var h=t(61107),v=t(2978),x=t(28199),g=t(7342),b=function(e){var n,t=e.customType,s=e.format,a=e.onClose,f=e.onDeleteCustomTypeSuccess,p=m.$[s],b=(0,c.useState)(!1),Z=b[0],j=b[1],S=(0,g.Z)().deleteCustomTypeSuccess,I=(n=(0,r.Z)(function(){return(0,o.__generator)(this,function(e){switch(e.label){case 0:return j(!0),[4,function(e){return y.apply(this,arguments)}({customType:t,onSuccess:function(){return S(t.id)}})];case 1:return e.sent(),f(),[2]}})}),function(){return n.apply(this,arguments)}),_=(0,u.B7)().theme;return(0,i.jsx)(x.Z,{isOpen:!0,shouldCloseOnOverlayClick:!0,style:{content:{maxWidth:612}},onRequestClose:function(){return a()},children:(0,i.jsx)(v.Z,{bodySx:{p:0,bg:"white",position:"relative",height:"100%",padding:16},footerSx:{position:"sticky",bottom:0,p:0},sx:{border:"none",overflow:"hidden"},borderFooter:!0,Header:function(){var e;return(0,i.jsxs)(d.kC,{sx:{position:"sticky",top:0,zIndex:1,p:"16px",alignItems:"center",justifyContent:"space-between",borderBottom:function(e){var n;return"1px solid ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.borders))}},children:[(0,i.jsxs)(d.kC,{sx:{alignItems:"center"},children:[(0,i.jsx)(l.$vK,{size:20,color:null===(e=_.colors)||void 0===e?void 0:e.greyIcon}),(0,i.jsxs)(d.X6,{sx:{fontSize:"14px",fontWeight:"bold",ml:1},children:["Delete"," ",p.name({start:!1,plural:!1})]})]}),(0,i.jsx)(d.x8,{type:"button",onClick:function(){return a()}})]})},Footer:function(){return(0,i.jsxs)(d.kC,{sx:{justifyContent:"flex-end",height:64,alignItems:"center",paddingRight:16,borderTop:function(e){var n;return"1px solid ".concat(String(null===(n=e.colors)||void 0===n?void 0:n.darkBorders))},backgroundColor:"gray"},children:[(0,i.jsx)(h.z,{label:"Cancel",variant:"secondary",onClick:function(){return a()},sx:{mr:"10px",fontWeight:"bold",color:"grey12",borderRadius:6}}),void 0!==t&&(0,i.jsx)(h.z,{label:"Delete",variant:"danger",isLoading:Z,onClick:function(){I()},sx:{minHeight:39,minWidth:78}})]})},children:(0,i.jsxs)("div",{children:["This action will immediately make the following change:",(0,i.jsx)("ul",{children:(0,i.jsxs)("li",{children:["Delete the"," ",(0,i.jsxs)(d.xv,{sx:{fontWeight:"bold"},children:["customtypes/",null==t?void 0:t.id,"/"]})," ","directory."]})}),"The next time you push your changes to Prismic, the following change will happen:",(0,i.jsx)("ul",{children:(0,i.jsxs)("li",{children:["Remove the"," ",p.name({start:!1,plural:!1})," and any associated Documents from your repository."]})})]})})})},Z=t(62230),j=t(85244),S=t(56580);function I(){return(I=(0,r.Z)(function(e){var n,t,r,i,s,a,c,l;return(0,o.__generator)(this,function(o){switch(o.label){case 0:n=e.model,t=e.newLabel,r=e.onSuccess,i=m.$[n.format],o.label=1;case 1:return o.trys.push([1,3,,4]),s=(0,j.Z)((0,Z.Z)({},n),{label:t}),[4,p.j.customTypes.renameCustomType({model:s})];case 2:if((a=o.sent().errors).length>0)throw a;return r(s),f.Am.success("".concat(i.name({start:!0,plural:!1})," renamed")),[3,4];case 3:return c=o.sent(),l="Internal Error: ".concat(i.name({start:!0,plural:!1})," could not be renamed"),console.error(l,c),f.Am.error(l),[3,4];case 4:return[2]}})})).apply(this,arguments)}var _=t(35393),T=t(7781),C=t(4995),k=t(44570),w=function(e){var n,t,s,a=e.isChangesLocal,l=e.customType,u=e.format,f=e.onClose,p=e.setLocalCustomType,y=null!==(n=null==l?void 0:l.label)&&void 0!==n?n:"",h=null!==(t=null==l?void 0:l.id)&&void 0!==t?t:"",v=(0,g.Z)().renameCustomTypeSuccess,x=(0,_.g)().syncChanges,b=(0,c.useState)(!1),w=b[0],F=b[1],O=(s=(0,r.Z)(function(e){return(0,o.__generator)(this,function(n){switch(n.label){case 0:if(F(!0),!(a&&p))return[3,1];return p((0,j.Z)((0,Z.Z)({},l),{label:e.customTypeName})),[3,3];case 1:return[4,function(e){return I.apply(this,arguments)}({model:l,newLabel:e.customTypeName,onSuccess:function(e){v(e),x()}})];case 2:n.sent(),n.label=3;case 3:return F(!1),f(),[2]}})}),function(e){return s.apply(this,arguments)}),B=(0,S.v9)(function(e){return{customTypeLabels:(0,T.YS)(e)}}).customTypeLabels,L=m.$[u];return(0,i.jsx)(C.Z,{isOpen:!0,testId:"rename-custom-type-modal",widthInPx:"530px",formId:"rename-custom-type-modal-".concat(h),buttonLabel:"Rename",close:f,onSubmit:function(e){O(e)},initialValues:{customTypeName:y},isLoading:w,content:{title:"Rename a ".concat(L.name({start:!1,plural:!1}))},validate:function(e){var n=e.customTypeName,t={};return n&&n.length||(t.customTypeName="Cannot be empty."),void 0!=t.customTypeName&&B.includes(n)&&y!==n&&(t.customTypeName="".concat(L.name({start:!0,plural:!1})," name is already taken.")),Object.keys(t).length>0?t:void 0},children:function(e){var n=e.errors;return(0,i.jsx)(d.xu,{children:(0,i.jsx)(k.W,{name:"customTypeName",label:"".concat(L.name({start:!0,plural:!1})," Name"),placeholder:"A display name for the ".concat(L.name({start:!1,plural:!1})),error:n.customTypeName,testId:"custom-type-name-input"})})}})},F=t(12189),O=t(65563);function B(){return(B=(0,r.Z)(function(e,n){var t,r,i,s,a;return(0,o.__generator)(this,function(o){switch(o.label){case 0:t=m.$[e.format],o.label=1;case 1:return o.trys.push([1,3,,4]),r=(0,O.mf)(e),[4,(0,F.KA)(r)];case 2:if((i=o.sent().errors).length>0)throw i;return n(r),f.Am.success("".concat(t.name({start:!0,plural:!1})," converted to page type")),[3,4];case 3:return s=o.sent(),a="Internal Error: ".concat(t.name({start:!0,plural:!1})," not converted to page type"),console.error(a,s),f.Am.error(a),[3,4];case 4:return[2]}})})).apply(this,arguments)}var L=t(99526),N=function(e){var n,t=e.format,l=e.customType,u=e.isChangesLocal,d=e.setLocalCustomType,f=(0,a.useRouter)(),p=(0,g.Z)().saveCustomTypeSuccess,m=(0,c.useState)(!1),y=m[0],h=m[1],v=(0,c.useState)(!1),x=v[0],Z=v[1],j=(0,c.useState)(!1),S=j[0],I=j[1],_=(n=(0,r.Z)(function(){var e,n;return(0,o.__generator)(this,function(t){switch(t.label){case 0:return I(!0),[4,function(e,n){return B.apply(this,arguments)}(l,p)];case 1:return t.sent(),e=L.cd.custom.getBuilderPagePathname(l.id),f.asPath===e&&(n=L.cd.page.getBuilderPagePathname(l.id),f.replace(n)),I(!1),[2]}})}),function(){return n.apply(this,arguments)}),T=function(){var e,n=L.cd[null!==(e=l.format)&&void 0!==e?e:"custom"].tablePagePathname;f.asPath!==n?f.replace(n):h(!1)};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.h_,{modal:!0,children:[(0,i.jsx)(s.$F,{disabled:S,children:(0,i.jsx)(s.hU,{color:"grey","data-testid":"editDropdown",hiddenLabel:"Custom type actions",icon:"moreVert",loading:S,variant:"solid"})}),(0,i.jsxs)(s.AW,{align:"end",children:[(0,i.jsx)(s.Xi,{startIcon:(0,i.jsx)(s.I5,{name:"edit"}),onSelect:function(){Z(!0)},children:"Rename"}),"custom"===t&&!u&&(0,i.jsx)(s.Xi,{startIcon:(0,i.jsx)(s.I5,{name:"driveFileMove"}),onSelect:function(){_()},children:"Convert to page type"}),(0,i.jsx)(s.Xi,{color:"tomato",startIcon:(0,i.jsx)(s.I5,{name:"delete"}),onSelect:function(){h(!0)},children:"Remove"})]})]}),y?(0,i.jsx)(b,{format:t,customType:l,onClose:function(){return h(!1)},onDeleteCustomTypeSuccess:T}):null,x?(0,i.jsx)(w,{format:t,customType:l,isChangesLocal:u,onClose:function(){return Z(!1)},setLocalCustomType:d}):null]})}},61107:function(e,n,t){"use strict";t.d(n,{z:function(){return d}});var r=t(62230),o=t(85244),i=t(98240),s=t(52322),a=t(2784),c=t(75289),l=function(e,n){return e?"".concat(e,"-").concat(n):""},u=function(e){switch(e){case"white":case"secondaryMedium":case"secondarySmall":case"secondary":return"#1A1523";default:return"grey01"}},d=(0,a.forwardRef)(function(e,n){var t=e.label,a=e.Icon,d=e.type,f=e.form,p=e.isLoading,m=void 0!==p&&p,y=e.disabled,h=e.onClick,v=e.sx,x=e.iconSize,g=void 0===x?16:x,b=e.iconFill,Z=e.variant,j=void 0===Z?"primary":Z,S=(0,i.Z)(e,["label","Icon","type","form","isLoading","disabled","onClick","sx","iconSize","iconFill","variant"]);return(0,s.jsx)(c.zx,(0,o.Z)((0,r.Z)({ref:n,sx:(0,r.Z)((0,o.Z)((0,r.Z)({},void 0===v?{}:v),{display:"flex",alignItems:"center",justifyContent:"center",gap:"8px"}),m?{cursor:"wait !important"}:{}),type:d,form:f,disabled:void 0!==y&&y||m,onClick:m?void 0:h,variant:j},S),{children:m?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(c.$j,{size:g,color:u(j),"data-testid":l(S["data-testid"],"spinner")}),a&&t]}):(0,s.jsxs)(s.Fragment,{children:[a&&(0,s.jsx)(a,{size:g,fill:b,"data-testid":l(S["data-testid"],"icon")}),t]})}))})},44570:function(e,n,t){"use strict";t.d(n,{W:function(){return a}});var r=t(62230),o=t(52322),i=t(63397);t(2784);var s=t(75289),a=function(e){var n=e.name,t=e.label,a=e.placeholder,c=e.error,l=e.testId,u=e.onChange;return(0,o.jsxs)(s.xu,{mb:3,children:[(0,o.jsx)(s.__,{htmlFor:n,mb:2,children:t}),(0,o.jsx)(i.gN,(0,r.Z)({name:n,type:"text",placeholder:a,as:s.II,autoComplete:"off"},u?{onChange:u}:null,l?{"data-testid":l}:null)),c?(0,o.jsx)(s.xv,{"data-testid":l?"".concat(l,"-error"):"input-error",sx:{color:"error",mt:1},children:c}):null]})}},4995:function(e,n,t){"use strict";var r=t(62230),o=t(85244),i=t(52322),s=t(63397),a=t(37149),c=t.n(a),l=t(75289),u=t(61107),d=t(28199),f=t(2978);n.Z=function(e){var n=e.children,t=e.close,a=e.isOpen,p=e.formId,m=e.validate,y=e.onSubmit,h=e.widthInPx,v=e.initialValues,x=e.content.title,g=e.cardProps,b=e.omitFooter,Z=void 0!==b&&b,j=e.isLoading,S=void 0!==j&&j,I=e.buttonLabel,_=void 0===I?"Save":I,T=e.testId,C=e.actionMessage;return c().setAppElement("#__next"),(0,i.jsx)(d.Z,{isOpen:a,shouldCloseOnOverlayClick:!0,onRequestClose:t,contentLabel:x,style:{content:{width:null!=h?h:"900px"}},children:(0,i.jsx)(s.J9,{initialValues:v,validate:function(e){return m?m(e):void 0},onSubmit:function(e){y(e)},children:function(e){var a=e.isValid,c=e.isSubmitting,d=e.values,m=e.errors,y=e.touched,h=e.setFieldValue,v=e.setValues;return(0,i.jsx)(s.l0,(0,o.Z)((0,r.Z)({id:p},null!=T?{"data-testid":T}:null),{children:(0,i.jsx)(f.Z,(0,o.Z)((0,r.Z)({borderFooter:!0,footerSx:{p:3,position:"sticky",bottom:0,background:"gray"},bodySx:{px:4,py:4},sx:{border:"none"}},g),{Header:function(e){var n=e.radius;return(0,i.jsxs)(l.kC,{sx:{position:"sticky",top:0,zIndex:1,p:"16px",pl:4,bg:"headSection",alignItems:"center",justifyContent:"space-between",borderTopLeftRadius:n,borderTopRightRadius:n,borderBottom:function(e){var n;return"1px solid ".concat(null===(n=e.colors)||void 0===n?void 0:n.borders)}},children:[(0,i.jsx)(l.X6,{sx:{fontSize:"20px"},children:x}),(0,i.jsx)(l.x8,{type:"button",onClick:t})]})},Footer:Z?null:(0,i.jsxs)(l.kC,{sx:{alignItems:"space-between"},children:[(0,i.jsx)(l.kC,{sx:{fontSize:"14px",alignItems:"center"},children:"function"==typeof C?C(e):C}),(0,i.jsxs)(l.kC,{sx:{ml:"auto"},children:[(0,i.jsx)(l.zx,{mr:2,type:"button",onClick:t,variant:"secondary",disabled:c||S,children:"Cancel"}),(0,i.jsx)(u.z,{label:_,form:p,type:"submit",disabled:!a||c||S,isLoading:c||S,sx:{fontWeight:"400",paddingBlock:"8px",paddingInline:"16px",fontSize:"14px",borderRadius:"4px"}})]})]}),children:n({isValid:a,isSubmitting:c,values:d,errors:m,touched:y,setFieldValue:h,setValues:v})}))}))}})})}},98484:function(e){e.exports={column:"BlankSlate_column__ysDb2",root:"BlankSlate_root__DJ7wC BlankSlate_column__ysDb2",fadeIn:"BlankSlate_fadeIn__KMuKu",withBackground:"BlankSlate_withBackground___V5y5",image:"BlankSlate_image__rOe9w BlankSlate_column__ysDb2",content:"BlankSlate_content__wmOAI BlankSlate_column__ysDb2",title:"BlankSlate_title__5oTre",desc:"BlankSlate_desc__f6ZWf",actions:"BlankSlate_actions__6zYZr"}}}]);