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

Author: jasminevle

i18n/en-US.properties

@@ -1268,6 +1268,8 @@ boxui.unifiedShare.previewerUploaderLevelButtonLabel = Invite as Previewer Uploa
 boxui.unifiedShare.previewerUploaderLevelDescription = Upload and preview
 # Text for Previewer Uploader permission level in invitee permission dropdown
 boxui.unifiedShare.previewerUploaderLevelText = Previewer Uploader
+# Tooltip description to explain recommendation for sharing tooltip
+boxui.unifiedShare.recommendedSharingTooltipCalloutText = Based on your usage, we think {fullName} would be interested in this file.
 # Description for confirmation modal to remove a Shared Link
 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?
 # Label for confirmation modal to remove a Shared Link

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

@@ -92,6 +92,8 @@ type Props = {
     onRequestClose?: Function,
     /** Handler function for clicks on the settings icon. If not provided, the settings icon won't be rendered. */
     onSettingsClick?: Function,
+    /** Shows a callout tooltip next to the names / email addresses input field explaining pre-populated recommendation */
+    recommendedSharingTooltipCalloutName: ?string,
     /**
      * Function to send collab invitations based on the given parameters object.
      * This function should return a Promise.
@@ -463,6 +465,7 @@ class UnifiedShareModal extends React.Component<Props, State> {
             contactLimit,
             getCollaboratorContacts,
             item,
+            recommendedSharingTooltipCalloutName = null,
             sendInvitesError,
             showEnterEmailsCallout = false,
             showCalloutForUser = false,
@@ -513,17 +516,32 @@ class UnifiedShareModal extends React.Component<Props, State> {
                 </div>
             </div>
         );
+        const ftuxTooltipProps = {
+            className: 'usm-ftux-tooltip',
+            isShown: shouldRenderFTUXTooltip && showCalloutForUser,
+            position: 'middle-left',
+            showCloseButton: true,
+            text: ftuxTooltipText,
+            theme: 'callout',
+        };
+        const recommendedSharingTooltipProps = {
+            isShown: !!recommendedSharingTooltipCalloutName,
+            position: 'middle-left',
+            text: (
+                <FormattedMessage
+                    {...messages.recommendedSharingTooltipCalloutText}
+                    values={{ fullName: recommendedSharingTooltipCalloutName }}
+                />
+            ),
+            theme: 'callout',
+        };
+        const tooltipPropsToRender = recommendedSharingTooltipCalloutName
+            ? recommendedSharingTooltipProps
+            : ftuxTooltipProps;
 
         return (
             <React.Fragment>
-                <Tooltip
-                    className="usm-ftux-tooltip"
-                    isShown={shouldRenderFTUXTooltip && showCalloutForUser}
-                    position="middle-left"
-                    showCloseButton
-                    text={ftuxTooltipText}
-                    theme="callout"
-                >
+                <Tooltip {...tooltipPropsToRender}>
                     <div className="invite-collaborator-container">
                         <EmailForm
                             contactLimit={contactLimit}

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

@@ -406,6 +406,13 @@ const messages = defineMessages({
         description: 'Text to display for a group of users who have accepted an invitation to collaborate',
         id: 'boxui.unifiedShare.collaboration.groupCollabText',
     },
+
+    // Recommended Sharing Tooltip messages
+    recommendedSharingTooltipCalloutText: {
+        defaultMessage: 'Based on your usage, we think {fullName} would be interested in this file.',
+        description: 'Tooltip description to explain recommendation for sharing tooltip',
+        id: 'boxui.unifiedShare.recommendedSharingTooltipCalloutText',
+    },
 });
 
 export default messages;