feat: add conditional and logic to show new upgrade copy (#2779)

* feat: add conditional and logic to show new upgrade copy

* fix: update format

* fix: fix optional type

Author: jackiejou

i18n/en-US.properties

@@ -1472,6 +1472,8 @@ boxui.timeInput.invalidTimeError = Invalid time format. Enter a time in the form
 boxui.unifiedShare.collaboration.groupCollabText = Group
 # Text to display for individual users who have accepted an invitation to collaborate
 boxui.unifiedShare.collaboration.userCollabText = User
+# Label for link to learn more about collaborator access
+boxui.unifiedShare.collaboratorAccessLink = collaborator access
 # Title for collaborator list modal
 boxui.unifiedShare.collaboratorListTitle = People in ‘{itemName}’
 # This string is displayed as tooltip on hovering over expire icon for collab
@@ -1632,10 +1634,14 @@ boxui.unifiedShare.sharedLinkSettings = Link Settings
 boxui.unifiedShare.sharedLinkSettingsCalloutText = Create a custom URL, enable password protection, enable link expiration, and much more
 # Title for suggested collaborators that can be added to the form
 boxui.unifiedShare.suggestedCollabsTitle = Suggested
+# Description for cta to upgrade to get collaborator access controls
+boxui.unifiedShare.upgradeCollaboratorAccessDescription = Set the level of {collaboratorAccessLink} and increase security through one of our paid plans. {upgradeGetMoreAccessControlsLink}.
 # Description for cta to upgrade to get more access controls for inviting collaborators to an item
 boxui.unifiedShare.upgradeGetMoreAccessControlsDescription = 62% of customers on your plan {upgradeGetMoreAccessControlsLink} to manage collaborators’ access and permission settings
 # Label for link to upgrade to get more access controls for inviting collaborators to an item
 boxui.unifiedShare.upgradeGetMoreAccessControlsLink = upgrade
+# Label for link to upgrade account
+boxui.unifiedShare.upgradeLink = Upgrade now
 # Text used in button label to describe permission level - uploader
 boxui.unifiedShare.uploaderLevelButtonLabel = Invite as Uploader
 # Description for Uploader permission level in invitee permission dropdown

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

@@ -540,28 +540,55 @@ class UnifiedShareForm extends React.Component<USFProps, State> {
     }
 
     renderUpgradeLinkDescription() {
-        const { openUpgradePlanModal = () => {}, trackingProps = {} } = this.props;
+        const { openUpgradePlanModal = () => {}, showNewUpgradeText = false, trackingProps = {} } = this.props;
         const { inviteCollabsEmailTracking = {} } = trackingProps;
         const { upgradeLinkProps = {} } = inviteCollabsEmailTracking;
 
         return (
             <div className="upgrade-description">
                 <UpgradeBadge />
-                <FormattedMessage
-                    values={{
-                        upgradeGetMoreAccessControlsLink: (
-                            <PlainButton
-                                className="upgrade-link"
-                                onClick={openUpgradePlanModal}
-                                type="button"
-                                {...upgradeLinkProps}
-                            >
-                                <FormattedMessage {...messages.upgradeGetMoreAccessControlsLink} />
-                            </PlainButton>
-                        ),
-                    }}
-                    {...messages.upgradeGetMoreAccessControlsDescription}
-                />
+                {showNewUpgradeText ? (
+                    <FormattedMessage
+                        values={{
+                            upgradeGetMoreAccessControlsLink: (
+                                <PlainButton
+                                    className="upgrade-link"
+                                    data-resin-target="external_collab_newcopy_upgrade_cta"
+                                    onClick={openUpgradePlanModal}
+                                    type="button"
+                                >
+                                    <FormattedMessage {...messages.upgradeLink} />
+                                </PlainButton>
+                            ),
+                            collaboratorAccessLink: (
+                                <Link
+                                    className="upgrade-link"
+                                    href="https://support.box.com/hc/en-us/articles/360044196413-Understanding-Collaborator-Permission-Levels"
+                                    target="_blank"
+                                >
+                                    <FormattedMessage {...messages.collaboratorAccessLink} />
+                                </Link>
+                            ),
+                        }}
+                        {...messages.upgradeCollaboratorAccessDescription}
+                    />
+                ) : (
+                    <FormattedMessage
+                        values={{
+                            upgradeGetMoreAccessControlsLink: (
+                                <PlainButton
+                                    className="upgrade-link"
+                                    onClick={openUpgradePlanModal}
+                                    type="button"
+                                    {...upgradeLinkProps}
+                                >
+                                    <FormattedMessage {...messages.upgradeGetMoreAccessControlsLink} />
+                                </PlainButton>
+                            ),
+                        }}
+                        {...messages.upgradeGetMoreAccessControlsDescription}
+                    />
+                )}
             </div>
         );
     }

src/features/unified-share-modal/__tests__/UnifiedShareForm.test.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 import { ITEM_TYPE_WEBLINK, ITEM_TYPE_FOLDER } from '../../../common/constants';
+import messages from '../messages';
+
 import { JUSTIFICATION_CHECKPOINT_EXTERNAL_COLLAB } from '../constants';
 
 import { UnifiedShareFormBase as UnifiedShareForm } from '../UnifiedShareForm';
@@ -214,6 +216,18 @@ describe('features/unified-share-modal/UnifiedShareForm', () => {
             expect(wrapper.exists('UpgradeBadge')).toBe(true);
         });
 
+        test('should render correct copy of upgrade CTA when showUpgradeOptions and showNewUpgradeText is enabled', () => {
+            const wrapper = getWrapper({
+                canInvite: true,
+                isFetching: false,
+                showNewUpgradeText: true,
+                showUpgradeOptions: true,
+            });
+            expect(wrapper.exists('UpgradeBadge')).toBe(true);
+            const msg = wrapper.find('FormattedMessage');
+            expect(msg.prop('id')).toEqual(messages.upgradeCollaboratorAccessDescription.id);
+        });
+
         test('should render a default component with correct Focus element and props when focusSharedLinkOnLoad is enabled', () => {
             const wrapper = getWrapper({
                 focusSharedLinkOnLoad: true,

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

@@ -393,6 +393,8 @@ export type USFProps = BaseUnifiedShareProps & {
     sharedLinkLoaded: boolean,
     /** Whether the FTUX tooltip should be rendered */
     shouldRenderFTUXTooltip: boolean,
+    /** Whether the new upgrade text should be rendered */
+    showNewUpgradeText?: boolean,
 };
 
 export type InviteCollaboratorsRequest = {

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

@@ -274,6 +274,22 @@ const messages = defineMessages({
         description: 'Label for link to upgrade to get more access controls for inviting collaborators to an item',
         id: 'boxui.unifiedShare.upgradeGetMoreAccessControlsLink',
     },
+    upgradeCollaboratorAccessDescription: {
+        defaultMessage:
+            'Set the level of {collaboratorAccessLink} and increase security through one of our paid plans. {upgradeGetMoreAccessControlsLink}.',
+        description: 'Description for cta to upgrade to get collaborator access controls',
+        id: 'boxui.unifiedShare.upgradeCollaboratorAccessDescription',
+    },
+    upgradeLink: {
+        defaultMessage: 'Upgrade now',
+        description: 'Label for link to upgrade account',
+        id: 'boxui.unifiedShare.upgradeLink',
+    },
+    collaboratorAccessLink: {
+        defaultMessage: 'collaborator access',
+        description: 'Label for link to learn more about collaborator access',
+        id: 'boxui.unifiedShare.collaboratorAccessLink',
+    },
     sharedLinkSettings: {
         defaultMessage: 'Link Settings',
         description: 'Description of the shared link settings modal entry point. This shows link-specific options.',