adjust the UX for SMS text opt-in, to show terms immediately

src/components/ChoiceButtonDialog.vue

@@ -25,6 +25,7 @@
                 <p :class="textClasses">{{ text }}</p>
 
                 <button
+                  v-if="option1Text"
                   :class="option1ButtonClasses"
                   @click="handleOption1(close)"
                 >
@@ -32,6 +33,7 @@
                 </button>
 
                 <button
+                  v-if="option2Text"
                   :class="option2ButtonClasses"
                   @click="handleOption2(close)"
                 >
@@ -39,6 +41,7 @@
                 </button>
 
                 <button
+                  v-if="option3Text"
                   :class="option3ButtonClasses"
                   @click="handleOption3(close)"
                 >

src/constants/accountView.ts

@@ -65,6 +65,10 @@ export const ACCOUNT_VIEW_CONSTANTS = {
       Standard message and data rates may apply, and you can turn it off at any time.
       Do you want more details?
     `,
+    SMS_OPT_IN_CHOICE: `
+      This is opt-in: by entering your phone number you agree to receive text messages when there is new relevant activity for you personally.
+      Standard message and data rates may apply, and you can turn it off at any time.
+    `,
     SMS_FORGET_PHONE_CONFIRM:
       "This will remove your phone number and turn off all text messages. You will have to verify a number again to re-enable them. Are you sure?",
     REMINDER_INFO: `

src/views/AccountViewView.vue

@@ -342,6 +342,7 @@
     </section>
     <PushNotificationPermission ref="pushNotificationPermission" />
     <SmsVerificationDialog ref="smsVerificationDialog" />
+    <ChoiceButtonDialog ref="smsOptInChoiceDialog" />
 
     <!-- User Profile -->
     <section
@@ -933,6 +934,7 @@ import { copyToClipboard } from "../services/ClipboardService";
 import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 import { Capacitor } from "@capacitor/core";
 
+import ChoiceButtonDialog from "../components/ChoiceButtonDialog.vue";
 import EntityIcon from "../components/EntityIcon.vue";
 import ImageMethodDialog from "../components/ImageMethodDialog.vue";
 import PushNotificationPermission from "../components/PushNotificationPermission.vue";
@@ -1012,6 +1014,7 @@ interface PushNotificationPermissionRef {
 
 @Component({
   components: {
+    ChoiceButtonDialog,
     EntityIcon,
     ImageMethodDialog,
     LMap,
@@ -1424,11 +1427,13 @@ export default class AccountViewView extends Vue {
    * Toggle the SMS channel as a whole ("Enable Text Messages" / "SMS Text
    * Message" master switch).
    *
-   * Enabling requires a verified phone number: the user enters a number, the
-   * service texts a code, and the toggle only turns on once the code is
-   * confirmed. Turning the toggle off pauses the channel but keeps the
-   * verified number, so re-enabling skips re-verification; "Forget Phone
-   * Number" is the destructive path.
+   * Enabling first shows an opt-in choice (see more info / enter phone
+   * number / cancel) before any phone number is requested. Only "Enter
+   * Phone Number" proceeds to SmsVerificationDialog, where the toggle turns
+   * on once the texted code is confirmed. Turning the toggle off pauses the
+   * channel but keeps the verified number, so re-enabling skips
+   * re-verification; "Forget Phone Number" is the destructive path that
+   * forces a full opt-in + re-verification next time.
    *
    * MOCK-UP: the verification round-trips are stubbed in
    * SmsVerificationDialog and all state is component-local.
@@ -1449,14 +1454,27 @@ export default class AccountViewView extends Vue {
       return;
     }
 
-    (this.$refs.smsVerificationDialog as SmsVerificationDialog).open(
-      async (success: boolean, phoneNumber?: string) => {
-        if (success && phoneNumber) {
-          this.notifyingNewActivitySmsPhone = phoneNumber;
-          this.smsEnabled = true;
-        }
+    (this.$refs.smsOptInChoiceDialog as ChoiceButtonDialog).open({
+      title: "Enable Text Messages",
+      text: ACCOUNT_VIEW_CONSTANTS.NOTIFICATIONS.SMS_OPT_IN_CHOICE,
+      option1Text: "See More Info",
+      option2Text: "Enter Phone Number",
+      onOption1: async () => {
+        await (this.$router as Router).push({
+          name: "help-notification-types",
+        });
       },
-    );
+      onOption2: () => {
+        (this.$refs.smsVerificationDialog as SmsVerificationDialog).open(
+          async (success: boolean, phoneNumber?: string) => {
+            if (success && phoneNumber) {
+              this.notifyingNewActivitySmsPhone = phoneNumber;
+              this.smsEnabled = true;
+            }
+          },
+        );
+      },
+    });
   }
 
   /**