FileMaster

Edit File: WhatsNewLite.vue

<dismissible-banner></dismissible-banner>

<page-header></page-header>

<div class="am-whats-new-welcome-title">{{ $root.labels.welcome_to_amelia }}</div>

<div class="am-whats-new-welcome-subtitle">{{ $root.labels.welcome_congratz }}</div>

<a class="am-whats-new-btn" href="https://www.youtube.com/c/AmeliaWordPressBookingPlugin" target="_blank">
            {{ $root.labels.discover_amelia }}
          </a>

</div>

</div>

<div class="am-whats-new-blog-title am-whats-new-blog-title-text">
            {{ $root.labels.news_blog }}<img :src="$root.getUrl+'public/img/am-ringing-bel.png'" />
          </div>

<div class="am-whats-new-blog-list-item" v-for="post in blogPosts" :key="post.href">
              <p>{{post.title}}</p>
              <a :href="post.href" target="_blank" rel="nofollow"><img :src="$root.getUrl+'public/img/am-arrow-upper-right.svg'" /></a>
            </div>

</div>

<div class="am-whats-new-blog-subscribe-title">{{ $root.labels.keep_up_to_date }}</div>
              <div class="am-whats-new-blog-subscribe-subtitle am-whats-new-blog-subtitle-text">{{ $root.labels.never_miss_notifications }}</div>
              <div class="am-whats-new-blog-subscribe-form">

<form ref="emailForm" @submit.prevent="submitForm" action="https://acumbamail.com/newform/subscribe/ET8rshmNeLvQox6J8U99sSJZ8B1DZo1mhOgs408R0mHYiwgmM/31412/" method="post" class="am-whats-new-blog-subscribe-form">
                  <div class="">
                    <div style="width: 100%; position:relative;">
                      <span v-if="!isValidEmail" id="am-subscribe-error-msg" style="color: red;">Please enter a valid email address.</span><br>
                      <input v-model="email" @keyup="clearValidation" id="r0c0m2i1" name="email_1" type="email" :placeholder="$root.labels.enter_your_email" required=""/><br />

</div>

</div>

<div class="am-whats-new-blog-title-text">
              {{ $root.labels.have_questions }}
            </div>

<div class="am-whats-new-blog-support-subtitle am-whats-new-blog-subtitle-text">
              {{ $root.labels.our_support_team }}
            </div>

<a class="am-whats-new-btn" href="https://wpamelia.com/contact/" target="_blank">
              {{ $root.labels.contact_our_support }}
            </a>

</div>

<div class="am-whats-new-features-header">
            <div class="am-whats-new-features-title am-whats-new-blog-title-text">
              {{ $root.labels.amelia_features }}
            </div>
          </div>

<div class="am-whats-new-blog-success-stories-title am-whats-new-blog-title-text">
              {{ $root.labels.take_a_look }}
            </div>

<a class="am-whats-new-btn" href="https://wpamelia.com/success-stories/" target="_blank" rel="nofollow">
              {{ $root.labels.read_success_stories }}
            </a>

</div>
        </div>
      </div>

</div>
  </div>
</template>

export default {

data () {
    return {
      email: '',
      isValidEmail: true,
      blogPosts: [],
      features: [
        {
          icon: 'am-email-blue',
          name: this.$root.labels.email_notifications,
          url: 'notifications/'
        },
        {
          icon: 'am-card-blue',
          name: this.$root.labels.online_payments,
          url: 'configuring-payments/'
        },
        {
          icon: 'am-calendar-blue',
          name: this.$root.labels.events,
          url: 'working-with-events/'
        },
        {
          icon: 'am-package-blue',
          name: this.$root.labels.packages_services,
          url: 'packages/'
        },
        {
          icon: 'am-recurr-blue',
          name: this.$root.labels.recurring_appointments,
          url: 'recurring-appointments/'
        },
        {
          icon: 'am-gcalendar',
          name: this.$root.labels.google_sync,
          url: 'configuring-google-calendar/'
        },
        {
          icon: 'am-woocommerce',
          name: this.$root.labels.wc,
          url: 'woocommerce-integration/'
        },
        {
          icon: 'am-zoom-blue',
          name: this.$root.labels.zoom_meet,
          url: 'configuring-zoom/'
        },
        {
          icon: 'am-text-blue',
          name: this.$root.labels.custom_fields,
          url: 'custom-fields/'
        },
        {
          icon: 'am-sandclock-blue',
          name: this.$root.labels.custom_service_duration,
          url: 'custom-service-duration/'
        }
      ],
      loading: false
    }
  },

methods: {
    clearValidation () {
      this.isValidEmail = true
    },

submitForm () {
      let emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/

if (emailRegex.test(this.email)) {
        this.isValidEmail = true
        this.$refs.emailForm.submit()
      } else {
        this.isValidEmail = false
      }
    },

getNews () {
      this.loading = true

this.$http.get(`${this.$root.getAjaxUrl}/whats-new`)
        .then(response => {
          this.blogPosts = response.data.data.blogPosts.slice(0, 6)

this.loading = false
        })
        .catch(e => {
          this.loading = false
          console.log(e)
        })
    }
  },

created () {
    this.getNews()
  },

components: {
    DismissibleBanner,
    PageHeader
  }
}
</script>

Back