fix: change content embed variable

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx

@@ -268,7 +268,9 @@ export const EnvelopeEditorFieldsPage = () => {
     });
   };
 
-  if (!editorConfig.general?.allowAddFieldsStep && !editorConfig.general?.allowAddContentsStep) {
+  const { allowContents } = editorConfig.actions;
+
+  if (!editorConfig.general?.allowAddFieldsStep) {
     return null;
   }
 
@@ -371,7 +373,7 @@ export const EnvelopeEditorFieldsPage = () => {
                   customPageRenderer={EnvelopeEditorFieldsPageRenderer}
                   scrollParentRef={scrollableContainerRef}
                   errorMessage={PDF_VIEWER_ERROR_MESSAGES.editor}
-                  toolbar={['zoom', 'fields', 'contents']}
+                  toolbar={allowContents ? ['zoom', 'fields', 'contents'] : ['zoom', 'fields']}
                 />
               ) : (
                 <div className="flex flex-col items-center justify-center py-32">
@@ -391,7 +393,7 @@ export const EnvelopeEditorFieldsPage = () => {
           {currentEnvelopeItem && envelope.recipients.length > 0 && (
             <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-border border-l bg-background py-2">
               <Tabs value={selectedEditorTab} onValueChange={(value) => onEditorTabChange(value as EnvelopeEditorTab)}>
-                {editorConfig.general?.allowAddFieldsStep && editorConfig.general?.allowAddContentsStep && (
+                {allowContents && (
                   <TabsList className="-mt-4 flex w-full flex-row border-b pt-2 text-muted-foreground text-sm">
                     <TabsTrigger
                       className="group flex min-h-12 w-1/2 items-center justify-center px-2 text-center hover:text-muted-foreground/80 data-[state=active]:shadow-[inset_0_-2px_0_0_hsl(var(--primary))]"
@@ -623,43 +625,45 @@ export const EnvelopeEditorFieldsPage = () => {
                 </TabsContent>
 
                 {/* Contents tab */}
-                <TabsContent value="contents">
-                  <section className="px-4">
-                    <h3 className="mb-2 font-semibold text-foreground text-sm">
-                      <Trans>Add Content</Trans>
-                    </h3>
+                {allowContents && (
+                  <TabsContent value="contents">
+                    <section className="px-4">
+                      <h3 className="mb-2 font-semibold text-foreground text-sm">
+                        <Trans>Add Content</Trans>
+                      </h3>
 
-                    <EnvelopeEditorContentDragDrop selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null} />
-                  </section>
+                      <EnvelopeEditorContentDragDrop selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null} />
+                    </section>
 
-                  {/* Content details section. */}
-                  <AnimateGenericFadeInOut key={editorContents.selectedContent?.formId}>
-                    {selectedContent && (
-                      <section>
-                        <Separator className="my-4" />
+                    {/* Content details section. */}
+                    <AnimateGenericFadeInOut key={editorContents.selectedContent?.formId}>
+                      {selectedContent && (
+                        <section>
+                          <Separator className="my-4" />
 
-                        <div className="px-4 [&_label]:text-foreground/70 [&_label]:text-xs">
-                          <h3 className="font-semibold text-sm">
-                            {_(ContentSettingsTypeTranslations[selectedContent.contentMeta.type])}
-                          </h3>
+                          <div className="px-4 [&_label]:text-foreground/70 [&_label]:text-xs">
+                            <h3 className="font-semibold text-sm">
+                              {_(ContentSettingsTypeTranslations[selectedContent.contentMeta.type])}
+                            </h3>
 
-                          {match(selectedContent.contentMeta.type)
-                            .with(EnvelopeContentType.TEXT, () => <EditorContentTextForm />)
-                            .with(EnvelopeContentType.LINE, () => <EditorContentLineForm />)
-                            .with(EnvelopeContentType.SHAPE, () => <EditorContentShapeForm />)
-                            .with(EnvelopeContentType.HIGHLIGHT, () => <EditorContentHighlightForm />)
-                            .with(EnvelopeContentType.IMAGE, () => (
-                              <EditorContentImageSettings
-                                formId={selectedContent.formId}
-                                dataContentId={selectedContent.dataContentId ?? null}
-                              />
-                            ))
-                            .exhaustive()}
-                        </div>
-                      </section>
-                    )}
-                  </AnimateGenericFadeInOut>
-                </TabsContent>
+                            {match(selectedContent.contentMeta.type)
+                              .with(EnvelopeContentType.TEXT, () => <EditorContentTextForm />)
+                              .with(EnvelopeContentType.LINE, () => <EditorContentLineForm />)
+                              .with(EnvelopeContentType.SHAPE, () => <EditorContentShapeForm />)
+                              .with(EnvelopeContentType.HIGHLIGHT, () => <EditorContentHighlightForm />)
+                              .with(EnvelopeContentType.IMAGE, () => (
+                                <EditorContentImageSettings
+                                  formId={selectedContent.formId}
+                                  dataContentId={selectedContent.dataContentId ?? null}
+                                />
+                              ))
+                              .exhaustive()}
+                          </div>
+                        </section>
+                      )}
+                    </AnimateGenericFadeInOut>
+                  </TabsContent>
+                )}
               </Tabs>
             </div>
           )}

apps/remix/app/components/general/envelope-editor/envelope-editor.tsx

@@ -90,13 +90,7 @@ export const EnvelopeEditor = () => {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const {
-    general: {
-      minimizeLeftSidebar,
-      allowUploadAndRecipientStep,
-      allowAddFieldsStep,
-      allowAddContentsStep,
-      allowPreviewStep,
-    },
+    general: { minimizeLeftSidebar, allowUploadAndRecipientStep, allowAddFieldsStep, allowPreviewStep },
     actions: {
       allowDistributing,
       allowDirectLink,
@@ -114,7 +108,7 @@ export const EnvelopeEditor = () => {
       steps.push(UPLOAD_STEP);
     }
 
-    if (allowAddFieldsStep || allowAddContentsStep) {
+    if (allowAddFieldsStep) {
       steps.push(ADD_FIELDS_STEP);
     }
 
@@ -530,16 +524,11 @@ export const EnvelopeEditor = () => {
             pageToRender,
             allowUploadAndRecipientStep,
             allowAddFieldsStep,
-            allowAddContentsStep,
             allowPreviewStep,
           })
             .with({ pageToRender: 'loading' }, () => <SpinnerBox className="py-32" />)
             .with({ pageToRender: 'upload', allowUploadAndRecipientStep: true }, () => <EnvelopeEditorUploadPage />)
-            .with(
-              { pageToRender: 'addFields', allowAddFieldsStep: true },
-              { pageToRender: 'addFields', allowAddContentsStep: true },
-              () => <EnvelopeEditorFieldsPage />,
-            )
+            .with({ pageToRender: 'addFields', allowAddFieldsStep: true }, () => <EnvelopeEditorFieldsPage />)
             .with({ pageToRender: 'preview', allowPreviewStep: true }, () => <EnvelopeEditorPreviewPage />)
             .otherwise(() => null)}
         </div>

apps/remix/app/routes/embed+/playground.tsx

@@ -50,7 +50,6 @@ export default function EmbedPlaygroundPage() {
     allowConfigureEnvelopeTitle: true,
     allowUploadAndRecipientStep: true,
     allowAddFieldsStep: true,
-    allowAddContentsStep: true,
     allowPreviewStep: true,
     minimizeLeftSidebar: true,
   });
@@ -68,6 +67,7 @@ export default function EmbedPlaygroundPage() {
   });
 
   const [actionsFeatures, setActionsFeatures] = useState({
+    allowContents: true,
     allowAttachments: true,
     allowDistributing: false,
     allowDirectLink: false,

packages/lib/client-only/providers/envelope-editor-provider.tsx

@@ -206,9 +206,7 @@ export const EnvelopeEditorProvider = ({
     };
   }, [isCscMode, providedEditorConfig]);
 
-  const [selectedEditorTab, setSelectedEditorTab] = useState<EnvelopeEditorTab>(
-    editorConfig.general?.allowAddFieldsStep ? 'fields' : 'contents',
-  );
+  const [selectedEditorTab, setSelectedEditorTab] = useState<EnvelopeEditorTab>('fields');
 
   const externalFlushCallbacksRef = useRef<Map<string, () => Promise<void>>>(new Map());
   const pendingMutationsRef = useRef<Set<Promise<unknown>>>(new Set());

packages/lib/types/envelope-editor.ts

@@ -25,7 +25,6 @@ export const ZEnvelopeEditorSettingsSchema = z.object({
     allowConfigureEnvelopeTitle: z.boolean(),
     allowUploadAndRecipientStep: z.boolean(),
     allowAddFieldsStep: z.boolean(),
-    allowAddContentsStep: z.boolean(),
     allowPreviewStep: z.boolean(),
     minimizeLeftSidebar: z.boolean(),
   }),
@@ -54,6 +53,7 @@ export const ZEnvelopeEditorSettingsSchema = z.object({
    * Action related configurations.
    */
   actions: z.object({
+    allowContents: z.boolean(),
     allowAttachments: z.boolean(),
     allowDistributing: z.boolean(),
     allowDirectLink: z.boolean(),
@@ -113,7 +113,6 @@ export const DEFAULT_EDITOR_CONFIG: EnvelopeEditorConfig = {
     allowConfigureEnvelopeTitle: true,
     allowUploadAndRecipientStep: true,
     allowAddFieldsStep: true,
-    allowAddContentsStep: true,
     allowPreviewStep: true,
     minimizeLeftSidebar: false,
   },
@@ -130,6 +129,7 @@ export const DEFAULT_EDITOR_CONFIG: EnvelopeEditorConfig = {
     allowConfigureEmailReplyTo: true,
   },
   actions: {
+    allowContents: true,
     allowAttachments: true,
     allowDistributing: true,
     allowDirectLink: true,
@@ -173,7 +173,6 @@ export const DEFAULT_EMBEDDED_EDITOR_CONFIG = {
     allowConfigureEnvelopeTitle: true,
     allowUploadAndRecipientStep: true,
     allowAddFieldsStep: true,
-    allowAddContentsStep: true,
     allowPreviewStep: true,
     minimizeLeftSidebar: true,
   },
@@ -190,6 +189,7 @@ export const DEFAULT_EMBEDDED_EDITOR_CONFIG = {
     allowConfigureEmailReplyTo: true,
   },
   actions: {
+    allowContents: true,
     allowAttachments: true,
     allowDistributing: false, // These are not supported for embeds, and are directly excluded in the embedded repo.
     allowDirectLink: false, // These are not supported for embeds, and are directly excluded in the embedded repo.

packages/lib/utils/embed-config.ts

@@ -92,8 +92,6 @@ export const buildEmbeddedFeatures = (features: DeepPartial<EnvelopeEditorConfig
         DEFAULT_EMBEDDED_EDITOR_CONFIG.general.allowUploadAndRecipientStep,
       allowAddFieldsStep:
         features.general?.allowAddFieldsStep ?? DEFAULT_EMBEDDED_EDITOR_CONFIG.general.allowAddFieldsStep,
-      allowAddContentsStep:
-        features.general?.allowAddContentsStep ?? DEFAULT_EMBEDDED_EDITOR_CONFIG.general.allowAddContentsStep,
       allowPreviewStep: features.general?.allowPreviewStep ?? DEFAULT_EMBEDDED_EDITOR_CONFIG.general.allowPreviewStep,
       minimizeLeftSidebar:
         features.general?.minimizeLeftSidebar ?? DEFAULT_EMBEDDED_EDITOR_CONFIG.general.minimizeLeftSidebar,
@@ -136,6 +134,7 @@ export const buildEmbeddedFeatures = (features: DeepPartial<EnvelopeEditorConfig
         : null,
 
     actions: {
+      allowContents: features.actions?.allowContents ?? DEFAULT_EMBEDDED_EDITOR_CONFIG.actions.allowContents,
       allowAttachments: features.actions?.allowAttachments ?? DEFAULT_EMBEDDED_EDITOR_CONFIG.actions.allowAttachments,
       allowDistributing:
         features.actions?.allowDistributing ?? DEFAULT_EMBEDDED_EDITOR_CONFIG.actions.allowDistributing,