Phone number dropdown

web/package-lock.json

@@ -16262,16 +16262,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
-      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=12.20"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {

web/public/config.js

@@ -6,11 +6,11 @@
 // During web development, you may change values here for rapid testing.
 
 var config = {
-    base_url: window.location.origin, // Change to test against a different server
+    base_url: "http://127.0.0.1:2586", //window.location.origin, // Change to test against a different server
     app_root: "/app",
     enable_login: true,
     enable_signup: true,
-    enable_payments: true,
+    enable_payments: false,
     enable_reservations: true,
     enable_emails: true,
     enable_calls: true,

web/public/static/langs/de.json

@@ -357,8 +357,9 @@
     "account_upgrade_dialog_tier_features_reservations_one": "{{reservations}} reserviertes Thema",
     "account_upgrade_dialog_tier_features_emails_one": "{{emails}} tägliche E-Mail",
     "publish_dialog_call_label": "Telefonanruf",
-    "publish_dialog_call_placeholder": "Telefonnummer, die angerufen werden soll, z.B. +49123456789, oder 'yes'",
+    "publish_dialog_call_item": "Telefonnummer {{number}} anrufen",
     "publish_dialog_chip_call_label": "Telefonanruf",
+    "publish_dialog_chip_call_no_verified_numbers_tooltip": "Keine verifizierten Telefonnummern",
     "account_basics_phone_numbers_title": "Telefonnummern",
     "account_basics_phone_numbers_copied_to_clipboard": "Telefonnummer wurde in die Zwischenablage kopiert",
     "account_basics_phone_numbers_dialog_title": "Telefonnummer hinzufügen",

web/public/static/langs/en.json

@@ -130,7 +130,7 @@
   "publish_dialog_email_placeholder": "Address to forward the notification to, e.g. phil@example.com",
   "publish_dialog_email_reset": "Remove email forward",
   "publish_dialog_call_label": "Phone call",
-  "publish_dialog_call_placeholder": "Phone number to call with the message, e.g. +12223334444, or 'yes'",
+  "publish_dialog_call_item": "Call phone number {{number}}",
   "publish_dialog_call_reset": "Remove phone call",
   "publish_dialog_attach_label": "Attachment URL",
   "publish_dialog_attach_placeholder": "Attach file by URL, e.g. https://f-droid.org/F-Droid.apk",
@@ -144,6 +144,7 @@
   "publish_dialog_chip_click_label": "Click URL",
   "publish_dialog_chip_email_label": "Forward to email",
   "publish_dialog_chip_call_label": "Phone call",
+  "publish_dialog_chip_call_no_verified_numbers_tooltip": "No verified phone numbers",
   "publish_dialog_chip_attach_url_label": "Attach file by URL",
   "publish_dialog_chip_attach_file_label": "Attach local file",
   "publish_dialog_chip_delay_label": "Delay delivery",

web/src/components/PublishDialog.js

@@ -1,7 +1,17 @@
 import * as React from 'react';
-import {useEffect, useRef, useState} from 'react';
+import {useContext, useEffect, useRef, useState} from 'react';
 import theme from "./theme";
-import {Checkbox, Chip, FormControl, FormControlLabel, InputLabel, Link, Select, useMediaQuery} from "@mui/material";
+import {
+    Checkbox,
+    Chip,
+    FormControl,
+    FormControlLabel,
+    InputLabel,
+    Link,
+    Select,
+    Tooltip,
+    useMediaQuery
+} from "@mui/material";
 import TextField from "@mui/material/TextField";
 import priority1 from "../img/priority-1.svg";
 import priority2 from "../img/priority-2.svg";
@@ -29,9 +39,11 @@ import session from "../app/Session";
 import routes from "./routes";
 import accountApi from "../app/AccountApi";
 import {UnauthorizedError} from "../app/errors";
+import {AccountContext} from "./App";
 
 const PublishDialog = (props) => {
     const { t } = useTranslation();
+    const { account } = useContext(AccountContext);
     const [baseUrl, setBaseUrl] = useState("");
     const [topic, setTopic] = useState("");
     const [message, setMessage] = useState("");
@@ -416,20 +428,29 @@ const PublishDialog = (props) => {
                             setCall("");
                             setShowCall(false);
                         }}>
-                            <TextField
-                                margin="dense"
-                                label={t("publish_dialog_call_label")}
-                                placeholder={t("publish_dialog_call_placeholder")}
-                                value={call}
-                                onChange={ev => setCall(ev.target.value)}
-                                disabled={disabled}
-                                type="tel"
-                                variant="standard"
+                            <FormControl
                                 fullWidth
-                                inputProps={{
-                                    "aria-label": t("publish_dialog_call_label")
-                                }}
-                            />
+                                variant="standard"
+                                margin="dense"
+                            >
+                                <InputLabel/>
+                                <Select
+                                    label={t("publish_dialog_call_label")}
+                                    margin="dense"
+                                    value={call}
+                                    onChange={(ev) => setCall(ev.target.value)}
+                                    disabled={disabled}
+                                    inputProps={{
+                                        "aria-label": t("publish_dialog_call_label")
+                                    }}
+                                >
+                                    {account?.phone_numbers?.map((phoneNumber, i) =>
+                                        <MenuItem key={`phoneNumberMenuItem${i}`} value={phoneNumber} aria-label={phoneNumber}>
+                                            {t("publish_dialog_call_item", { number: phoneNumber })}
+                                        </MenuItem>
+                                    )}
+                                </Select>
+                            </FormControl>
                         </ClosableRow>
                     }
                     {showAttachUrl &&
@@ -536,11 +557,12 @@ const PublishDialog = (props) => {
                     <div>
                         {!showClickUrl && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_click_label")} aria-label={t("publish_dialog_chip_click_label")} onClick={() => setShowClickUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
                         {!showEmail && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_email_label")} aria-label={t("publish_dialog_chip_email_label")} onClick={() => setShowEmail(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
-                        {!showCall && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_call_label")} aria-label={t("publish_dialog_chip_call_label")} onClick={() => setShowCall(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
+                        {account?.phone_numbers?.length > 0 && !showCall && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_call_label")} aria-label={t("publish_dialog_chip_call_label")} onClick={() => { setShowCall(true); setCall(account.phone_numbers[0]); }} sx={{marginRight: 1, marginBottom: 1}}/>}
                         {!showAttachUrl && !showAttachFile && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_attach_url_label")} aria-label={t("publish_dialog_chip_attach_url_label")} onClick={() => setShowAttachUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
                         {!showAttachFile && !showAttachUrl && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_attach_file_label")} aria-label={t("publish_dialog_chip_attach_file_label")} onClick={() => handleAttachFileClick()} sx={{marginRight: 1, marginBottom: 1}}/>}
                         {!showDelay && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_delay_label")} aria-label={t("publish_dialog_chip_delay_label")} onClick={() => setShowDelay(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
                         {!showTopicUrl && <Chip clickable disabled={disabled} label={t("publish_dialog_chip_topic_label")} aria-label={t("publish_dialog_chip_topic_label")} onClick={() => setShowTopicUrl(true)} sx={{marginRight: 1, marginBottom: 1}}/>}
+                        {account && !account?.phone_numbers && <Tooltip title={t("publish_dialog_chip_call_no_verified_numbers_tooltip")}><span><Chip clickable disabled label={t("publish_dialog_chip_call_label")} aria-label={t("publish_dialog_chip_call_label")} sx={{marginRight: 1, marginBottom: 1}}/></span></Tooltip>}
                     </div>
                     <Typography variant="body1" sx={{marginTop: 1, marginBottom: 1}}>
                         <Trans