Skip to content

Commit d7730c7

Browse files
jasminevlelaughnan
authored andcommitted
feat(unified-share-modal): invite section tooltip changes (#1499)
* feat(ghost): create ghost state helper component (#1498) * feat(ghost): create ghost state helper component * docs(ghost): update props * feat(unified-share-modal): invite section tooltip changes
1 parent ef4a7ee commit d7730c7

File tree

3 files changed

+35
-8
lines changed

3 files changed

+35
-8
lines changed

i18n/en-US.properties

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1268,6 +1268,8 @@ boxui.unifiedShare.previewerUploaderLevelButtonLabel = Invite as Previewer Uploa
12681268
boxui.unifiedShare.previewerUploaderLevelDescription = Upload and preview
12691269
# Text for Previewer Uploader permission level in invitee permission dropdown
12701270
boxui.unifiedShare.previewerUploaderLevelText = Previewer Uploader
1271+
# Tooltip description to explain recommendation for sharing tooltip
1272+
boxui.unifiedShare.recommendedSharingTooltipCalloutText = Based on your usage, we think {fullName} would be interested in this file.
12711273
# Description for confirmation modal to remove a Shared Link
12721274
boxui.unifiedShare.removeLinkConfirmationDescription = This will permanently remove the shared link. If this item is embedded on other sites it will also become inaccessible. Any custom properties, settings and expirations will be removed as well. Do you want to continue?
12731275
# Label for confirmation modal to remove a Shared Link

src/features/unified-share-modal/UnifiedShareModal.js

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,8 @@ type Props = {
9292
onRequestClose?: Function,
9393
/** Handler function for clicks on the settings icon. If not provided, the settings icon won't be rendered. */
9494
onSettingsClick?: Function,
95+
/** Shows a callout tooltip next to the names / email addresses input field explaining pre-populated recommendation */
96+
recommendedSharingTooltipCalloutName: ?string,
9597
/**
9698
* Function to send collab invitations based on the given parameters object.
9799
* This function should return a Promise.
@@ -463,6 +465,7 @@ class UnifiedShareModal extends React.Component<Props, State> {
463465
contactLimit,
464466
getCollaboratorContacts,
465467
item,
468+
recommendedSharingTooltipCalloutName = null,
466469
sendInvitesError,
467470
showEnterEmailsCallout = false,
468471
showCalloutForUser = false,
@@ -513,17 +516,32 @@ class UnifiedShareModal extends React.Component<Props, State> {
513516
</div>
514517
</div>
515518
);
519+
const ftuxTooltipProps = {
520+
className: 'usm-ftux-tooltip',
521+
isShown: shouldRenderFTUXTooltip && showCalloutForUser,
522+
position: 'middle-left',
523+
showCloseButton: true,
524+
text: ftuxTooltipText,
525+
theme: 'callout',
526+
};
527+
const recommendedSharingTooltipProps = {
528+
isShown: !!recommendedSharingTooltipCalloutName,
529+
position: 'middle-left',
530+
text: (
531+
<FormattedMessage
532+
{...messages.recommendedSharingTooltipCalloutText}
533+
values={{ fullName: recommendedSharingTooltipCalloutName }}
534+
/>
535+
),
536+
theme: 'callout',
537+
};
538+
const tooltipPropsToRender = recommendedSharingTooltipCalloutName
539+
? recommendedSharingTooltipProps
540+
: ftuxTooltipProps;
516541

517542
return (
518543
<React.Fragment>
519-
<Tooltip
520-
className="usm-ftux-tooltip"
521-
isShown={shouldRenderFTUXTooltip && showCalloutForUser}
522-
position="middle-left"
523-
showCloseButton
524-
text={ftuxTooltipText}
525-
theme="callout"
526-
>
544+
<Tooltip {...tooltipPropsToRender}>
527545
<div className="invite-collaborator-container">
528546
<EmailForm
529547
contactLimit={contactLimit}

src/features/unified-share-modal/messages.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -406,6 +406,13 @@ const messages = defineMessages({
406406
description: 'Text to display for a group of users who have accepted an invitation to collaborate',
407407
id: 'boxui.unifiedShare.collaboration.groupCollabText',
408408
},
409+
410+
// Recommended Sharing Tooltip messages
411+
recommendedSharingTooltipCalloutText: {
412+
defaultMessage: 'Based on your usage, we think {fullName} would be interested in this file.',
413+
description: 'Tooltip description to explain recommendation for sharing tooltip',
414+
id: 'boxui.unifiedShare.recommendedSharingTooltipCalloutText',
415+
},
409416
});
410417

411418
export default messages;

0 commit comments

Comments
 (0)