feat: allow add myself feature for embeds (#2754)

apps/docs/content/docs/developers/embedding/authoring/v2.mdx

@@ -102,17 +102,18 @@ const EnvelopeEditor = ({ presignToken, envelopeId }) => {
 
 ### All V2 Authoring Components
 
-| Prop               | Type      | Required | Description                                              |
-| ------------------ | --------- | -------- | -------------------------------------------------------- |
-| `presignToken`     | `string`  | Yes      | Authentication token from your backend                   |
-| `externalId`       | `string`  | No       | Your reference ID to link with the envelope              |
-| `host`             | `string`  | No       | Custom host URL. Defaults to `https://app.documenso.com` |
-| `css`              | `string`  | No       | Custom CSS string (Platform Plan)                        |
-| `cssVars`          | `object`  | No       | [CSS variable](/docs/developers/embedding/css-variables) overrides (Platform Plan) |
-| `darkModeDisabled` | `boolean` | No       | Disable dark mode (Platform Plan)                        |
-| `language`         | `string`  | No       | Set the UI language. See [Supported Languages](https://github.com/documenso/documenso/tree/main/packages/lib/constants/locales.ts) |
-| `className`        | `string`  | No       | CSS class for the iframe                                 |
-| `features`         | `object`  | No       | Feature toggles for the authoring experience             |
+| Prop             | Type      | Required | Description                                              |
+| ---------------- | --------- | -------- | -------------------------------------------------------- |
+| `presignToken`   | `string`  | Yes      | Authentication token from your backend                   |
+| `externalId`     | `string`  | No       | Your reference ID to link with the envelope              |
+| `host`           | `string`  | No       | Custom host URL. Defaults to `https://app.documenso.com` |
+| `css`            | `string`  | No       | Custom CSS string (Platform Plan)                        |
+| `cssVars`        | `object`  | No       | [CSS variable](/docs/developers/embedding/css-variables) overrides (Platform Plan) |
+| `darkModeDisabled` | `boolean` | No     | Disable dark mode (Platform Plan)                        |
+| `language`       | `string`  | No       | Set the UI language. See [Supported Languages](https://github.com/documenso/documenso/tree/main/packages/lib/constants/locales.ts) |
+| `className`      | `string`  | No       | CSS class for the iframe                                 |
+| `user`           | `object`  | No       | Current user info. When provided, enables the "Add Myself" button in the recipients list. Object with optional `email` and `name` fields |
+| `features`       | `object`  | No       | Feature toggles for the authoring experience             |
 
 ### Create Component Only
 

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

@@ -208,8 +208,14 @@ export const EnvelopeEditorRecipientForm = () => {
       envelope.fields.filter((field) => field.recipientId === signer.id).length === 0,
   );
 
+  const currentEditorEmail = isEmbedded ? editorConfig.embedded?.user?.email : user?.email;
+
+  const currentEditorName = isEmbedded ? editorConfig.embedded?.user?.name : user?.name;
+
+  const hasCurrentEditorInfo = Boolean(currentEditorEmail || currentEditorName);
+
   const isUserAlreadyARecipient = watchedSigners.some(
-    (signer) => signer.email.toLowerCase() === user?.email?.toLowerCase(),
+    (signer) => signer.email.toLowerCase() === currentEditorEmail?.toLowerCase(),
   );
 
   const hasDocumentBeenSent = recipients.some(
@@ -344,11 +350,11 @@ export const EnvelopeEditorRecipientForm = () => {
 
   const onAddSelfSigner = () => {
     if (emptySignerIndex !== -1) {
-      setValue(`signers.${emptySignerIndex}.name`, user?.name ?? '', {
+      setValue(`signers.${emptySignerIndex}.name`, currentEditorName ?? '', {
         shouldValidate: true,
         shouldDirty: true,
       });
-      setValue(`signers.${emptySignerIndex}.email`, user?.email ?? '', {
+      setValue(`signers.${emptySignerIndex}.email`, currentEditorEmail ?? '', {
         shouldValidate: true,
         shouldDirty: true,
       });
@@ -358,8 +364,8 @@ export const EnvelopeEditorRecipientForm = () => {
       appendSigner(
         {
           formId: nanoid(12),
-          name: user?.name ?? '',
-          email: user?.email ?? '',
+          name: currentEditorName ?? '',
+          email: currentEditorEmail ?? '',
           role: RecipientRole.SIGNER,
           actionAuth: [],
           signingOrder:
@@ -635,7 +641,7 @@ export const EnvelopeEditorRecipientForm = () => {
             </Tooltip>
           )}
 
-          {!isEmbedded && (
+          {(!isEmbedded || hasCurrentEditorInfo) && (
             <Button
               variant="outline"
               className="flex flex-row items-center"

apps/remix/app/routes/embed+/v2+/authoring+/envelope.create._index.tsx

@@ -298,6 +298,7 @@ const EnvelopeCreatePage = ({ embedAuthoringOptions }: EnvelopeCreatePageProps)
       mode: 'create' as const,
       onCreate: async (envelope: Omit<TEditorEnvelope, 'id'>) => createEmbeddedEnvelope(envelope),
       customBrandingLogo: Boolean(teamSettings.brandingEnabled && teamSettings.brandingLogo),
+      user: embedAuthoringOptions.user,
     }),
     [token],
   );

apps/remix/app/routes/embed+/v2+/authoring+/envelope.edit.$id.tsx

@@ -314,6 +314,7 @@ const EnvelopeEditPage = ({ embedAuthoringOptions }: EnvelopeEditPageProps) => {
       mode: 'edit' as const,
       onUpdate: async (envelope: TEditorEnvelope) => updateEmbeddedEnvelope(envelope),
       brandingLogo,
+      user: embedAuthoringOptions.user,
     }),
     [token],
   );