feat: add toggling for the hardcode support link (for master) (opened…

…x#864)

* feat: add toggling for the hardcode support link (master)

Add a toggling mechanism for the "unlink all social media
accounts" text to show it as a link or text depending on
the MFE env setting.

* fix(deps): update dependency @edx/frontend-platform to v5.3.0

* Revert "fix(deps): update dependency @edx/frontend-platform to v5.3.0" (openedx#870)

This reverts commit 757e446.

* feat: add toggling for the hardcode support link (master)

Add a toggling mechanism for the "unlink all social media
accounts" text to show it as a link or text depending on
the MFE env setting.

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Muhammad Abdullah Waheed <[email protected]>

.env

@@ -33,3 +33,4 @@ APP_ID=
 MFE_CONFIG_API_URL=
 PASSWORD_RESET_SUPPORT_LINK=''
 LEARNER_FEEDBACK_URL=''
+SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'

.env.development

@@ -34,3 +34,4 @@ APP_ID=
 MFE_CONFIG_API_URL=
 PASSWORD_RESET_SUPPORT_LINK='mailto:[email protected]'
 LEARNER_FEEDBACK_URL=''
+SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'

.env.test

@@ -32,3 +32,4 @@ MARKETING_EMAILS_OPT_IN=''
 APP_ID=
 MFE_CONFIG_API_URL=
 LEARNER_FEEDBACK_URL=''
+SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'

src/account-settings/delete-account/BeforeProceedingBanner.jsx

@@ -25,10 +25,12 @@ const BeforeProceedingBanner = (props) => {
         defaultMessage="Before proceeding, please {actionLink}."
         description="Error that appears if you are trying to delete your account, but something about your account needs attention first.  The actionLink will be instructions, such as 'unlink your Facebook account'."
         values={{
-          actionLink: (
+          actionLink: supportArticleUrl ? (
             <Hyperlink destination={supportArticleUrl}>
               {intl.formatMessage(messages[instructionMessageId])}
             </Hyperlink>
+          ) : (
+            intl.formatMessage(messages[instructionMessageId])
           ),
           siteName: getConfig().SITE_NAME,
         }}

src/account-settings/delete-account/BeforeProceedingBanner.test.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
+import { IntlProvider, injectIntl, createIntl } from '@edx/frontend-platform/i18n';
+
+ReactDOM.createPortal = node => node;
+
+import BeforeProceedingBanner from './BeforeProceedingBanner'; // eslint-disable-line import/first
+
+const IntlBeforeProceedingBanner = injectIntl(BeforeProceedingBanner);
+
+describe('BeforeProceedingBanner', () => {
+  it('should match the snapshot if SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT does not have a support link', () => {
+    const props = {
+      instructionMessageId: 'account.settings.delete.account.please.unlink',
+      intl: createIntl({ locale: 'en' }),
+      supportArticleUrl: '',
+    };
+    const tree = renderer
+      .create((
+        <IntlProvider locale="en">
+          <IntlBeforeProceedingBanner
+            {...props}
+          />
+        </IntlProvider>
+      ))
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should match the snapshot when SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT has a support link', () => {
+    const props = {
+      instructionMessageId: 'account.settings.delete.account.please.unlink',
+      intl: createIntl({ locale: 'en' }),
+      supportArticleUrl: 'http://test-support.edx',
+    };
+    const tree = renderer
+      .create((
+        <IntlProvider locale="en">
+          <IntlBeforeProceedingBanner
+            {...props}
+          />
+        </IntlProvider>
+      ))
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/account-settings/delete-account/DeleteAccount.jsx

@@ -59,6 +59,7 @@ export class DeleteAccount extends React.Component {
       hasLinkedTPA, isVerifiedAccount, status, errorType, intl,
     } = this.props;
     const canDelete = isVerifiedAccount && !hasLinkedTPA;
+    const supportArticleUrl = process.env.SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT;
 
     // TODO: We lack a good way of providing custom language for a particular site.  This is a hack
     // to allow edx.org to fulfill its business requirements.
@@ -122,7 +123,7 @@ export class DeleteAccount extends React.Component {
         {hasLinkedTPA ? (
           <BeforeProceedingBanner
             instructionMessageId="account.settings.delete.account.please.unlink"
-            supportArticleUrl="https://support.edx.org/hc/en-us/articles/207206067"
+            supportArticleUrl={supportArticleUrl}
           />
         ) : null}
 

src/account-settings/delete-account/__snapshots__/BeforeProceedingBanner.test.jsx.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BeforeProceedingBanner should match the snapshot if SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT does not have a support link 1`] = `
+<div
+  className="alert d-flex align-items-start alert-warning mt-n2"
+>
+  <div>
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
+      data-icon="exclamation-triangle"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 576 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </div>
+  <div>
+    Before proceeding, please unlink all social media accounts.
+  </div>
+</div>
+`;
+
+exports[`BeforeProceedingBanner should match the snapshot when SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT has a support link 1`] = `
+<div
+  className="alert d-flex align-items-start alert-warning mt-n2"
+>
+  <div>
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
+      data-icon="exclamation-triangle"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 576 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </div>
+  <div>
+    Before proceeding, please 
+    <a
+      className="pgn__hyperlink default-link standalone-link"
+      href="http://test-support.edx"
+      onClick={[Function]}
+      target="_self"
+    >
+      unlink all social media accounts
+    </a>
+    .
+  </div>
+</div>
+`;