feat(script editor): add opt out language warning (#1436)

Reviewed-by: @bchrobot
Reviewed-by: @hiemanshu

src/components/ScriptEditor.tsx

@@ -119,6 +119,7 @@ interface Props {
   scriptText: string;
   scriptFields: string[];
   campaignVariables: CampaignVariable[];
+  isRootStep: boolean;
   integrationSourced: boolean;
   onChange: (value: string) => Promise<void> | void;
   receiveFocus?: boolean;
@@ -320,6 +321,38 @@ class ScriptEditor extends React.Component<Props, State> {
     }
   }
 
+  renderOptOutLanguageWarning() {
+    const lowercaseText = this.state.editorState
+      .getCurrentContent()
+      .getPlainText()
+      .toLowerCase();
+
+    // 2022-09-24 - stop as a separate word is best for avoiding spam blocks
+    if (
+      this.props.isRootStep &&
+      lowercaseText.length > 0 &&
+      !lowercaseText.includes("stop ")
+    )
+      return (
+        <div style={{ color: baseTheme.colors.red }}>
+          <br />
+          WARNING! This script does not include opt out language. You must let
+          the recipient know they can opt out of receiving future texts, or your
+          messages are very likely to be blocked as spam. We recommend a phrase
+          with the individual word STOP, such as "Reply STOP to quit." Please
+          see our{" "}
+          <a
+            href="https://docs.spokerewired.com/article/168-spoke-101-tips-for-a-successful-mass-text"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            deliverability checklist
+          </a>{" "}
+          for other best practices for improving deliverability.
+        </div>
+      );
+  }
+
   renderCustomFields() {
     const { scriptFields, campaignVariables } = this.props;
     return (
@@ -376,6 +409,7 @@ class ScriptEditor extends React.Component<Props, State> {
         {this.renderCustomFields()}
         <div>
           {this.renderAttachmentWarning()}
+          {this.renderOptOutLanguageWarning()}
           <br />
           Estimated Segments: {info.msgCount} <br />
           Characters left in current segment:{" "}

src/components/forms/GSScriptOptionsField.jsx

@@ -96,6 +96,7 @@ class GSScriptOptionsField extends GSFormField {
       name,
       customFields,
       campaignVariables,
+      isRootStep,
       value: scriptVersions,
       integrationSourced,
       orgSettings
@@ -154,6 +155,7 @@ class GSScriptOptionsField extends GSFormField {
             scriptFields={scriptFields}
             campaignVariables={campaignVariables}
             integrationSourced={integrationSourced}
+            isRootStep={isRootStep}
             receiveFocus
             expandable
             onChange={(val) => this.setState({ scriptDraft: val.trim() })}
@@ -230,6 +232,7 @@ GSScriptOptionsField.propTypes = {
       value: PropTypes.string
     })
   ).isRequired,
+  isRootStep: PropTypes.bool.isRequired,
   name: PropTypes.string,
   className: PropTypes.string,
   hintText: PropTypes.string,

src/containers/AdminCampaignEdit/sections/CampaignInteractionStepsForm/components/InteractionStepCard.tsx

@@ -245,6 +245,7 @@ export const InteractionStepCard: React.FC<Props> = (props) => {
               hintText="This is what your texters will send to your contacts. E.g. Hi, {firstName}. It's {texterFirstName} here."
               customFields={customFields}
               campaignVariables={campaignVariables}
+              isRootStep={isRootStep}
               integrationSourced={integrationSourced}
               fullWidth
               multiLine