feat: Support custom fields in user-profile-widget + Edit/Delete flows

packages/widgets/user-profile-widget/jest.config.js

@@ -11,8 +11,8 @@ module.exports = {
     global: {
       branches: 0,
       functions: 12,
-      lines: 38,
-      statements: 37,
+      lines: 36,
+      statements: 36,
     },
   },
   globals: {

packages/widgets/user-profile-widget/src/lib/widget/mixins/initMixin/initComponentsMixins/initUserCustomAttributesMixin.ts

@@ -0,0 +1,144 @@
+import {
+  FlowDriver,
+  ModalDriver,
+  UserAttributeDriver,
+} from '@descope/sdk-component-drivers';
+import {
+  compose,
+  createSingletonMixin,
+  withMemCache,
+} from '@descope/sdk-helpers';
+import { loggerMixin, modalMixin } from '@descope/sdk-mixins';
+import { getUserCustomAttrs } from '../../../state/selectors';
+import { createFlowTemplate } from '../../helpers';
+import { stateManagementMixin } from '../../stateManagementMixin';
+import { initWidgetRootMixin } from './initWidgetRootMixin';
+
+export const initUserCustomAttributesMixin = createSingletonMixin(
+  <T extends CustomElementConstructor>(superclass: T) =>
+    class UserCustomAttributesMixinClass extends compose(
+      stateManagementMixin,
+      loggerMixin,
+      initWidgetRootMixin,
+      modalMixin,
+    )(superclass) {
+      customValueUserAttr: UserAttributeDriver;
+
+      // flow Id is key in all maps
+      #editModals: Record<string, ModalDriver> = {};
+
+      #editFlows: Record<string, FlowDriver> = {};
+
+      #deleteModals: Record<string, ModalDriver> = {};
+
+      #deleteFlows: Record<string, FlowDriver> = {};
+
+      #initEditModalContent(flowId: string) {
+        this.#editModals[flowId]?.setContent(
+          createFlowTemplate({
+            projectId: this.projectId,
+            flowId,
+            baseUrl: this.baseUrl,
+            baseStaticUrl: this.baseStaticUrl,
+          }),
+        );
+        this.#editFlows[flowId]?.onSuccess(() => {
+          this.#editModals[flowId]?.close();
+          this.actions.getMe();
+        });
+      }
+
+      // have 2 init functions for edit and delete modals in order to keep the same standards as the email/phone/name mixin
+      #initDeleteModalContent(flowId: string) {
+        this.#deleteModals[flowId]?.setContent(
+          createFlowTemplate({
+            projectId: this.projectId,
+            flowId,
+            baseUrl: this.baseUrl,
+            baseStaticUrl: this.baseStaticUrl,
+          }),
+        );
+        this.#deleteFlows[flowId]?.onSuccess(() => {
+          this.#deleteModals[flowId]?.close();
+          this.actions.getMe();
+        });
+      }
+
+      #updateCustomValueUserAttrs = withMemCache(
+        (customAttr: ReturnType<typeof getUserCustomAttrs>) => {
+          const allCustomAttributesComponents =
+            this.shadowRoot?.querySelectorAll(
+              'descope-user-attribute[data-id^="customAttributes."]',
+            );
+
+          Array.from(allCustomAttributesComponents).forEach((nodeEle) => {
+            const attrName = nodeEle.getAttribute('data-id');
+            const customAttrName = attrName.replace('customAttributes.', '');
+
+            const compInstance = new UserAttributeDriver(nodeEle, {
+              logger: this.logger,
+            });
+
+            compInstance.value = customAttr[customAttrName] || '';
+
+            const editFlowId = nodeEle.getAttribute('edit-flow-id');
+            if (editFlowId) {
+              this.#editModals[editFlowId] = this.createModal({
+                'data-id': `edit-${customAttrName}`,
+              });
+
+              this.#editFlows[editFlowId] = new FlowDriver(
+                () =>
+                  this.#editModals[editFlowId]?.ele?.querySelector(
+                    'descope-wc',
+                  ),
+                { logger: this.logger },
+              );
+              this.#editModals[editFlowId].afterClose =
+                this.#initEditModalContent.bind(this, editFlowId);
+
+              compInstance.onEditClick(() => {
+                this.#editModals?.[editFlowId]?.open();
+              });
+
+              this.#initEditModalContent(editFlowId);
+            }
+
+            const deleteFlowId = nodeEle.getAttribute('delete-flow-id');
+            if (deleteFlowId) {
+              this.#deleteModals[deleteFlowId] = this.createModal({
+                'data-id': `delete-${customAttrName}`,
+              });
+
+              this.#deleteFlows[deleteFlowId] = new FlowDriver(
+                () =>
+                  this.#deleteModals[deleteFlowId]?.ele?.querySelector(
+                    'descope-wc',
+                  ),
+                { logger: this.logger },
+              );
+              this.#deleteModals[deleteFlowId].afterClose =
+                this.#initDeleteModalContent.bind(this, deleteFlowId);
+
+              compInstance.onDeleteClick(() => {
+                this.#deleteModals?.[deleteFlowId]?.open();
+              });
+
+              this.#initDeleteModalContent(deleteFlowId);
+            }
+          });
+        },
+      );
+
+      async onWidgetRootReady() {
+        await super.onWidgetRootReady?.();
+
+        this.#updateCustomValueUserAttrs(getUserCustomAttrs(this.state));
+
+        this.subscribe(
+          this.#updateCustomValueUserAttrs.bind(this),
+          getUserCustomAttrs,
+        );
+      }
+    },
+);

packages/widgets/user-profile-widget/src/lib/widget/mixins/initMixin/initMixin.ts

@@ -1,13 +1,14 @@
 import { compose, createSingletonMixin } from '@descope/sdk-helpers';
 import { debuggerMixin, themeMixin } from '@descope/sdk-mixins';
+import { flowRedirectUrlMixin } from '../flowRedirectUrlMixin';
 import { initAvatarMixin } from './initComponentsMixins/initAvatarMixin';
 import { initEmailUserAttrMixin } from './initComponentsMixins/initEmailUserAttrMixin';
+import { initLogoutMixin } from './initComponentsMixins/initLogoutMixin';
 import { initNameUserAttrMixin } from './initComponentsMixins/initNameUserAttrMixin';
-import { initPhoneUserAttrMixin } from './initComponentsMixins/initPhoneUserAttrMixin';
 import { initPasskeyUserAuthMethodMixin } from './initComponentsMixins/initPasskeyUserAuthMethodMixin';
 import { initPasswordUserAuthMethodMixin } from './initComponentsMixins/initPasswordUserAuthMethodMixin';
-import { initLogoutMixin } from './initComponentsMixins/initLogoutMixin';
-import { flowRedirectUrlMixin } from '../flowRedirectUrlMixin';
+import { initPhoneUserAttrMixin } from './initComponentsMixins/initPhoneUserAttrMixin';
+import { initUserCustomAttributesMixin } from './initComponentsMixins/initUserCustomAttributesMixin';
 
 export const initMixin = createSingletonMixin(
   <T extends CustomElementConstructor>(superclass: T) =>
@@ -16,6 +17,7 @@ export const initMixin = createSingletonMixin(
       debuggerMixin,
       themeMixin,
       flowRedirectUrlMixin, // This mixin must be before all other mixins that loads flows
+      initUserCustomAttributesMixin,
       initEmailUserAttrMixin,
       initAvatarMixin,
       initNameUserAttrMixin,

packages/widgets/user-profile-widget/src/lib/widget/state/selectors.ts

@@ -17,3 +17,8 @@ export const getIsPhoneVerified = createSelector(
 );
 export const getHasPasskey = createSelector(getMe, (me) => me.webauthn);
 export const getHasPassword = createSelector(getMe, (me) => me.password);
+
+export const getUserCustomAttrs = createSelector(
+  getMe,
+  (me) => me.customAttributes,
+);