fix(foxy-user-invitation-form): fix when selfrevoked event is emitted

Author: pheekus

src/elements/public/UserInvitationForm/UserInvitationForm.test.ts

@@ -54,6 +54,13 @@ describe('UserInvitationForm', () => {
     });
   });
 
+  it('has a reactive property "currentStore"', () => {
+    expect(new Form()).to.have.property('currentStore', null);
+    expect(Form).to.have.deep.nested.property('properties.currentStore', {
+      attribute: 'current-store',
+    });
+  });
+
   it('has a reactive property "currentUser"', () => {
     expect(new Form()).to.have.property('currentUser', null);
     expect(Form).to.have.deep.nested.property('properties.currentUser', {
@@ -414,6 +421,7 @@ describe('UserInvitationForm', () => {
     const router = createRouter();
     const form = await fixture<Form>(html`
       <foxy-user-invitation-form
+        current-store="https://demo.api/hapi/stores/0"
         current-user="https://demo.api/hapi/users/0"
         layout="admin"
         href="https://demo.api/hapi/user_invitations/0"
@@ -440,6 +448,37 @@ describe('UserInvitationForm', () => {
     expect(await selfrevokedEvent).to.exist;
   });
 
+  it("renders a special async action for revoking current user's access in snapshot user layout", async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-user-invitation-form
+        current-store="https://demo.api/hapi/stores/0"
+        current-user="https://demo.api/hapi/users/0"
+        layout="user"
+        href="https://demo.api/hapi/user_invitations/0"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-user-invitation-form>
+    `);
+
+    await waitUntil(() => !!form.data, undefined, { timeout: 5000 });
+    const action = form.renderRoot.querySelector(
+      'foxy-internal-post-action-control[infer="leave"]'
+    );
+
+    expect(action).to.exist;
+    expect(action).to.have.attribute('href', form.data!._links['fx:revoke'].href);
+    expect(action).to.have.attribute('theme', 'error');
+    expect(action).to.have.attribute(
+      'message-options',
+      JSON.stringify({ store_domain: 'example', store_name: 'Example Store' })
+    );
+
+    const selfrevokedEvent = oneEvent(form, 'selfrevoked');
+    action!.dispatchEvent(new Event('success'));
+    expect(await selfrevokedEvent).to.exist;
+  });
+
   it('renders async action for resending invitation in snapshot admin layout', async () => {
     const router = createRouter();
     const form = await fixture<Form>(html`

src/elements/public/UserInvitationForm/UserInvitationForm.ts

@@ -21,6 +21,7 @@ export class UserInvitationForm extends Base<Data> {
       ...super.properties,
       getStorePageHref: { attribute: false },
       defaultDomain: { attribute: 'default-domain' },
+      currentStore: { attribute: 'current-store' },
       currentUser: { attribute: 'current-user' },
       layout: {},
     };
@@ -63,7 +64,10 @@ export class UserInvitationForm extends Base<Data> {
   /** Default host domain for stores that don't use a custom domain name, e.g. `foxycart.com`. */
   defaultDomain: string | null = null;
 
-  /** Currently logged in user resource URL. Used to display a warning when revoking access. */
+  /** Currently viewed store URL. Used for determining when to emit `selfrevoked` event. */
+  currentStore: string | null = null;
+
+  /** Currently logged in user resource URL. Used for determining when to emit `selfrevoked` event. */
   currentUser: string | null = null;
 
   /** Admin layout will display user info, user layout (default) will display store info. */
@@ -179,6 +183,14 @@ export class UserInvitationForm extends Base<Data> {
     const status = this.data?.status;
     const hidden = this.hiddenSelector;
 
+    const isOwnInvitationForCurrentStore =
+      this.currentStore &&
+      this.currentUser &&
+      _links?.['fx:store'] &&
+      _links?.['fx:user'] &&
+      this.currentStore === _links?.['fx:store'].href &&
+      this.currentUser === _links?.['fx:user'].href;
+
     return html`
       <div style="padding-top: 3.5rem">
         <div class="relative">
@@ -241,7 +253,7 @@ export class UserInvitationForm extends Base<Data> {
               hidden.matches('resend', true) &&
               hidden.matches('delete', true)}
             >
-              ${this.currentUser && _links['fx:user'] && this.currentUser === _links['fx:user'].href
+              ${isOwnInvitationForCurrentStore
                 ? html`
                     <foxy-internal-post-action-control
                       message-options=${JSON.stringify({
@@ -291,6 +303,14 @@ export class UserInvitationForm extends Base<Data> {
       'text-error': status === 'rejected',
     };
 
+    const isOwnInvitationForCurrentStore =
+      this.currentStore &&
+      this.currentUser &&
+      links?.['fx:store'] &&
+      links?.['fx:user'] &&
+      this.currentStore === links?.['fx:store'].href &&
+      this.currentUser === links?.['fx:user'].href;
+
     return html`
       <div class=${classMap({ 'flex items-center gap-m': true, ...textColorMap })}>
         <div class="border-t flex-1"></div>
@@ -339,13 +359,30 @@ export class UserInvitationForm extends Base<Data> {
       >
       </foxy-i18n>
 
-      <foxy-internal-user-invitation-form-async-action
-        theme="error"
-        class="flex-1"
-        infer="leave"
-        href=${ifDefined(links?.['fx:revoke']?.href ?? links?.['fx:reject']?.href)}
-      >
-      </foxy-internal-user-invitation-form-async-action>
+      ${isOwnInvitationForCurrentStore
+        ? html`
+            <foxy-internal-post-action-control
+              message-options=${JSON.stringify({
+                store_domain: this.__storeDomainGetValue(),
+                store_name,
+              })}
+              infer="leave"
+              class="flex-1"
+              theme="error"
+              href=${ifDefined(links?.['fx:revoke']?.href ?? links?.['fx:reject']?.href)}
+              @success=${() => this.dispatchEvent(new CustomEvent('selfrevoked'))}
+            >
+            </foxy-internal-post-action-control>
+          `
+        : html`
+            <foxy-internal-user-invitation-form-async-action
+              theme="error"
+              class="flex-1"
+              infer="leave"
+              href=${ifDefined(links?.['fx:revoke']?.href ?? links?.['fx:reject']?.href)}
+            >
+            </foxy-internal-user-invitation-form-async-action>
+          `}
 
       <div
         class="grid grid-cols-2 gap-m"

src/static/translations/user-invitation-form/en.json

@@ -27,7 +27,16 @@
   "leave": {
     "idle": "Leave this store",
     "busy": "Leaving...",
-    "fail": "Failed to leave"
+    "fail": "Failed to leave",
+    "message_idle": "You are about to remove your own access to {{ store_name }} ({{ store_domain }}). Are you sure you want to proceed? If you need access to this store again in the future, you will need to be re-invited by another user of the store.",
+    "message_fail": "Failed to revoke access. If you'd like to retry, close this dialog and click the revoke button again.",
+    "message_done": "Your access was revoked successfully. Close this dialog to continue.",
+    "button_close": "Close",
+    "button_confirm": "Leave this store",
+    "button_cancel": "Cancel",
+    "loading_busy": "Processing",
+    "header": "Confirmation Required",
+    "button": "Leave this store"
   },
   "revoke": {
     "idle": "Revoke access",
@@ -104,4 +113,4 @@
     "loading_busy": "Loading",
     "loading_error": "Unknown error"
   }
-}
+}