FileMaster

Edit File: Pricing.vue

<div class="am-segment-tooltip-box-mobile">
      <h2>{{ $root.labels.pricing }}</h2>

<el-tooltip placement="top" popper-class="am-tooltip-popper">
        <div slot="content" v-html="$root.labels.segment_tooltip_mobile"></div>
        <i class="el-icon-question am-tooltip-icon"></i>
      </el-tooltip>

</div>

<p>{{ $root.labels.view_pricing_for }}</p>

<el-form>
      <el-form-item>
        <el-select
            v-model="getCountryPriceList.selectedCountry"
            placeholder=""
            :disabled="fetched === false"
            @change="changeCountry"
            :class="'am-selected-flag am-selected-flag-' + getCountryPriceList.selectedCountry"
        >
          <el-option
              v-for="country in countries"
              :key="country.id"
              :label="country.nicename"
              :value="country.iso"
          >
            <span :class="'am-flag am-flag-'+country.iso"></span>
            <span style="float: left">{{ country.nicename }}</span>
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

<div class="am-sms-country-pricelist" v-if="fetched && error === false">

<div class="am-sms-country-pricelist-head">
        <el-row :gutter="10">

<el-col :lg="12"><p>{{ $root.labels.carrier }}</p></el-col>

<el-col :lg="12" class="am-segment-tooltip-box">
            <p>{{ $root.labels.price }} / {{ $root.labels.segment_colon }}</p>

<el-tooltip placement="top" popper-class="am-tooltip-popper">
              <div slot="content" v-html="$root.labels.segment_tooltip"></div>
              <i class="el-icon-question am-tooltip-icon"></i>
            </el-tooltip>

</el-col>

</el-row>
      </div>

<div class="am-sms-country-pricelist-body">
        <div class="am-sms-country-price" v-for="carrier in carriers">
          <el-row :gutter="16">

<el-col :lg="12"><span>{{ carrier.carrier }}</span></el-col>

<el-col :lg="12">
              <span>${{ getFormattedMessagePrice(carrier.price) }}</span>
            </el-col>

</el-row>
        </div>
      </div>

</div>

<div class="am-spinner am-section" v-if="!fetched">
      <img :src="$root.getUrl + 'public/img/spinner.svg'"/>
    </div>

<div class="am-empty-state am-section" v-show="error === true && fetched === true">
      <img :src="$root.getUrl + 'public/img/emptystate.svg'"/>
      <p>{{ $root.labels.no_results }}</p>
    </div>

</div>
</template>

export default {
    mixins: [notificationMixin, phoneCountriesMixin, notifyMixin],

data () {
      return {
        carriers: [],
        error: false,
        getCountryPriceList: {
          selectedCountry: 'us'
        },
        fetched: true
      }
    },

mounted () {
      this.changeCountry()
    },

methods: {
      changeCountry () {
        this.error = false
        this.fetched = false
        this.sendAmeliaSmsApiRequest('getCountryPriceList', this.onGetCountryPriceListSuccess, this.onGetCountryPriceListError)
      },

onGetCountryPriceListSuccess (data) {
        this.carriers = data['carriers']
        this.fetched = true
      },

onGetCountryPriceListError () {
        this.notify(this.$root.labels.error, this.$root.labels.pricing_error, 'error')
        this.error = true
        this.fetched = true
      }
    }
  }
</script>

Back