Implementation of "Send a Link" Feature for MAX

[drashti1712]

Hi all,
We have a new functionality request for the Features pages (Ps, Pr, Lr, Ai, Id) for MAX, where the users should be able to copy and send themselves a link on the page.
The requirement is to be able to add the functionality (copy link and share) to any link/CTA authored in any block. The design and other details for this are provided in this jira ticket: https://jira.corp.adobe.com/browse/MWPW-157017

Long-term Solution:
To append a _copy-link parameter to the link, enabling the "Send a Link" feature to appear and function as intended.

Implementation Details:
The logic would be to check if the link has the _copy-link parameter and then use the Web Share API to invoke the share pop up on click.
This implementation would be done in milo's decorateLinks().
Here is a code snippet from my poc:

  copylinks.forEach((sl) => {
    const link = sl.href.split("#_copy-link")[0];
    sl.href = '';
    const isConButton = sl.parentElement.nodeName === 'EM' || sl.parentElement.nodeName === 'STRONG' || sl.classList.contains('con-button');
    if (!isConButton) sl.classList.add('copy-link'); // to add specifc styling as per the design
    sl.addEventListener('click', async () => {
      if (navigator.share) await navigator.share({ title: link, url: link });
    });
  });

POC: https://share-link-milo--milo--drashti1712.hlx.page/drafts/drashti/share-links

Screenshots:

Timeline:
Since this is a critical requirement for MAX, we are targeting Thursday, 9/5 as the feature delivery date.

I am looking for some community insights on this. Please do let me know if you have any suggestions or feedback on the implementation.
Thanks in advance.

cc: @dstrong23 @salonijain3 @narcis-radu @mokimo @rgclayton @overmyheadandbody @aishwaryamathuria @Ruchika4 @suhjainadobe

[narcis-radu]

@drashti1712 - we've done similar work for custom "login" actions, the code is available in https://github.com/adobecom/milo/blob/stage/libs/utils/utils.js#L650. I think we can reuse the #_evt-<action> pattern and handle your use-case.

[drashti1712]

@narcis-radu Sure, I agree with your suggestion to reuse #_evt-<action> for this use-case as this is also a kind of custom action link. Should we rename the parameter as #_evt-copy-link?

[narcis-radu]

You can call it #_evt-copy

[overmyheadandbody]

Had a quick look and I have a few notes:

• there's a little jump when the link is clicked, tried this on mobile, that should be investigated;
• if you want to ensure this reaches production by next Thursday, since this is MAX-related, you should discuss with your PM to raise the priority in Jira so you can mark this as high priority as a label in your PR;
• should the link be checked for validity before adding it to the page/being shared?

@narcis-radu also has a point that you might be able to leverage an already existing pattern, but my comments still stand as well.

[drashti1712]

Hi @overmyheadandbody, thanks for your feedback.

• The jump is due to the page reloading when the link is clicked. I have fixed this and will be posting an updated poc with the code in a while.
• Sure, let me discuss on this with the team.
• Could you please elaborate on how can we check on the link's validity? I tried using fetch() but was getting a CORS error on my poc (.hlx.page)? You can check here: https://share-link-milo--milo--drashti1712.hlx.page/drafts/drashti/share-links

[drashti1712]

Hi All,
I have currently updated the POC as follows:

• Renamed the parameter as #_evt-copy-link and added the logic with custom action links
• Fixed the jump observed by @overmyheadandbody on clicking the link

POC link: https://share-link-updated--milo--drashti1712.hlx.live/drafts/drashti/share-links
Git diff: https://github.com/adobecom/milo/compare/stage...drashti1712:share-link-updated?expand=1

cc: @narcis-radu

[drashti1712]

Update:

• As confirmed by @narcis-radu, we have updated the parameter as #_evt-copy.
• I have raised a PR for this feature. Could I please get some reviews as this is urgent and high-priority?
  PR link: [MWPW-157017] Send a Link Feature - Implementation #2804

cc: @overmyheadandbody @ryanmparrish @rgclayton @Ruchika4 @mokimo @salonijain3 @aishwaryamathuria @suhjainadobe @robert-bogos

[drashti1712]

Closing this discussion as the implementation was completed. Thank you everyone for your inputs on this.