src/components/quotes/sendSMS.vue

<template>
  <v-card>
    <v-alert type="info" color="blue lighten-5 blue--text">
      To guarantee delivery, ensure to select the right country code.<br />
      Do not add a leading 0 to the phone number eg. enter something like
      <strong>23350xxxxxxx</strong> not <strong>233050xxxxxxx</strong>
    </v-alert>
    <phone-number-input
      :isEmailLogin="true"
      @input="(n) => (user_number = n)"
      :key="quote.id"
      :default_number="phone_number"
    ></phone-number-input>
    <v-list>
      <v-list-item class="border">
        <v-list-item-icon>
          <v-icon color="blue" x-large>mdi-message-text-outline</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>Send via SMS</v-list-item-title>
        </v-list-item-content>
        <v-list-item-action>
          <v-checkbox v-model="smsChecked" color="green"></v-checkbox>
        </v-list-item-action>
      </v-list-item>

      <v-list-item class="border mt-2" disabled>
        <v-list-item-icon>
          <v-icon color="green" x-large>mdi-whatsapp</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>Send via WhatsApp</v-list-item-title>
          <v-list-item-subtitle class="red--text"
            ><v-icon>mdi-info-circle</v-icon>Currently
            Unavailable</v-list-item-subtitle
          >
        </v-list-item-content>
        <v-list-item-action>
          <v-checkbox v-model="whatsappChecked" color="green"></v-checkbox>
        </v-list-item-action>
      </v-list-item>
    </v-list>
    <v-card-text>
      <v-textarea
        rows="2"
        auto-grow
        label="Compose a message for this quote(WhatsApp only)"
        v-model="message"
        outlined
      ></v-textarea>
    </v-card-text>
    <v-card-actions>
      <v-btn
        :loading="sending"
        @click="send"
        color="blue darken-4"
        dark
        rounded
        block
        depressed
        x-large
        >{{ $t("main.send") }} {{ $t("main.quote") }}
      </v-btn>
    </v-card-actions>
    <v-snackbar v-model="success">{{ success_message }}</v-snackbar>
    <v-snackbar v-model="error" color="red" dark>{{
      error_message
    }}</v-snackbar>
  </v-card>
</template>

<script>
import PhoneNumberInput from "../agents/PhoneNumberInput";

export default {
  components: { PhoneNumberInput },
  props: ["quote"],
  name: "sendSMS",
  data() {
    return {
      phone_number: "",
      sending: false,
      user_number: "",
      success_message: "",
      success: false,
      error: false,
      error_message: "",
      smsChecked: true,
      whatsappChecked: false,
      message: null,
    };
  },
  computed: {
    quoteID() {
      return this.quote.id;
    },
  },
  watch: {
    quoteID() {
      this.phone_number = this.quote.customer.business_phone;
    },
  },
  methods: {
    send() {
      this.sending = true;

      const formdata = new FormData();
      formdata.append("recipient_number", this.user_number);
      formdata.append("quote_id", this.quote.id);
      formdata.append("message", this.message);
      let url = "/api/quote/send/sms";
      url = url + "?wb=" + this.whatsappChecked + "&sms=" + this.smsChecked;

      axios
        .post(url, formdata)
        .then((res) => {
          this.success_message = "Quote sent to " + this.user_number;
          this.success = true;
          this.sending = false;
          this.$emit("closed");
        })
        .catch((error) => {
          this.error_message =
            "Something went wrong, we could not send the quote, please try again";
          this.error = true;
          this.sending = false;
        });
    },
  },
  mounted() {
    this.phone_number = this.quote.customer.business_phone;
  },
};
</script>

<style scoped>
</style>