Added Payfast & TimeshareWeek Delete

package-lock.json

       "integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==",
       "dev": true
     },
+    "js-md5": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
+      "integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ=="
+    },
     "js-message": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.5.tgz",

package.json

     "aos": "^3.0.0-beta.6",
     "axios": "^0.19.2",
     "core-js": "^2.6.11",
+    "crypto-js": "^4.0.0",
     "datatables.net": "^1.10.20",
     "jquery": "^3.4.1",
+    "js-md5": "^0.7.3",
     "jspdf": "^2.1.0",
     "jspdf-autotable": "^3.5.9",
     "lodash": "^4.17.15",

src/components/admin/status/timeshareAdminList.vue

       </div>
       <div class="row">
         <div class="col-lg-6 offset-3">
-          <input
-            class="form-control uniSelect"
-            type="text"
-            placeholder="SEARCH"
-            v-model="filter"
-          />
+          <input class="form-control uniSelect" type="text" placeholder="SEARCH" v-model="filter" />
         </div>
       </div>
       <div class="row">
                 <td>{{ item.status.description }}</td>
                 <td v-if="!item.publish">
                   <a v-on:click="Publish(item)">
-                    <img
-                      src="../../../../public/img/icons/Upload.png"
-                      height="25"
-                      width="25"
-                    />
+                    <img src="../../../../public/img/icons/Upload.png" height="25" width="25" />
                   </a>
                 </td>
                 <td v-else>
                 </td>
                 <td>
                   <a v-on:click="Edit(item)">
-                    <img
-                      src="../../../../public/img/icons/Edit.png"
-                      height="25"
-                      width="25"
-                    />
+                    <img src="../../../../public/img/icons/Edit.png" height="25" width="25" />
                   </a>
                 </td>
                 <td>
                   <a v-on:click="Delete(item)">
-                    <img
-                      src="../../../../public/img/icons/delete.png"
-                      height="25"
-                      width="25"
-                    />
+                    <img src="../../../../public/img/icons/delete.png" height="25" width="25" />
                   </a>
                 </td>
               </tr>
           </table>
           <div class="d-flex justify-content-between" v-if="showPager">
             <div class="p-1">
-              {{
-                currentPage +
-                " / " +
-                PageCount +
-                (" - (" + FilteredListings.length + " items)")
-              }}
+              {{ currentPage + " / " + PageCount + (" - (" + FilteredListings.length + " items)") }}
             </div>
             <div class="p-1">
               <BasePagination
           <div class="p-2">
             <div class="d-flex flex-row">
               <div>
-                <button
-                  v-if="sortKey !== 'id'"
-                  class="btn-solid-blue"
-                  @click="ClearSort"
-                >
+                <button v-if="sortKey !== 'id'" class="btn-solid-blue" @click="ClearSort">
                   Clear Sort
                 </button>
               </div>
 
 export default {
   components: {
-    BasePagination,
+    BasePagination
   },
   data() {
     return {
         "Region",
         "Amount",
         "Submitted",
-        "Status",
+        "Status"
       ],
       columns: [
         "owner",
         "season",
         "region",
         "sellPrice",
-        "weekStatus",
-      ],
+        "weekStatus"
+      ]
     };
   },
   methods: {
       "editSave",
       "publishWeek",
       "unpublishWeek",
+      "deleteListing"
     ]),
     Publish(item) {
       // var today = new Date();
       // this.$router.push(`/editTimeShare/${item.id}`);
     },
     Delete(item) {
-      this.deleteProperty(item.id);
+      this.deleteListing(item.id);
     },
     async pageChangeHandle(value) {
       switch (value) {
     ClearSort() {
       this.reverse = true;
       this.sortKey = "id";
-    },
+    }
   },
   computed: {
     ...mapState("propertyList", ["properties"]),
     ...mapGetters({ getNeedsVerify: "myWeeks/getNeedsVerify" }),
     FilteredListings() {
       if (this.filter) {
-        const list = _.filter(this.getNeedsVerify, (item) =>
+        const list = _.filter(this.getNeedsVerify, item =>
           Object.values(item).some(
-            (i) =>
+            i =>
               JSON.stringify(i)
                 .toLowerCase()
                 .indexOf(this.filter.toLowerCase()) > -1
     },
     PageCount() {
       return this.visibleItemsPerPageCount !== 0
-        ? Math.ceil(
-            this.FilteredListings.length / this.visibleItemsPerPageCount
-          )
+        ? Math.ceil(this.FilteredListings.length / this.visibleItemsPerPageCount)
         : 1;
     },
     DisplayItems() {
     },
     SortDirection() {
       return this.reverse ? "desc" : "asc";
-    },
+    }
   },
   created() {
     this.getItems(this.userId).then(() => {
         if (val != oldVal) {
           this.currentPage = 1;
         }
-      },
-    },
-  },
+      }
+    }
+  }
 };
 </script>
 

src/components/financial/payFast.vue

+<template>
+  <div style="padding-top:550px">
+    <form
+      ref="form"
+      target="_parent"
+      action="https://sandbox.payfast.co.za​/eng/process"
+      method="post"
+    >
+      <input type="hidden" name="merchant_id" :value="paymentObj.merchant_id" />
+      <input type="hidden" name="merchant_key" :value="paymentObj.merchant_key" />
+      <input type="hidden" name="return_url" :value="paymentObj.return_url" />
+      <input type="hidden" name="cancel_url" :value="paymentObj.cancel_url" />
+      <input type="hidden" name="notify_url" :value="paymentObj.notify_url" />
+      <input type="hidden" name="name_first" :value="paymentObj.name_first" />
+      <input type="hidden" name="name_last" :value="paymentObj.name_last" />
+      <input type="hidden" name="email_address" :value="paymentObj.email_address" />
+      <!-- <input type="hidden" name="m_payment_id" :value="paymentObj.m_payment_id" /> -->
+      <input type="hidden" name="amount" :value="paymentObj.amount" />
+      <input type="hidden" name="item_name" :value="paymentObj.item_name" />
+      <input type="hidden" name="signature" :value="paymentObj.signature" />
+    </form>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+export default {
+  data() {
+    return {
+      loaded: false
+    };
+  },
+  props: {
+    paymentObj: {}
+  },
+  created() {
+    this.populateData();
+  },
+  methods: {
+    async populateData() {
+      setTimeout(() => (this.loaded = true), 100);
+      setTimeout(() => this.$refs.form.submit(), 100);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/router/index.js

 import PaymentError from '../components/financial/paymentError.vue';
 import PaymentOption from '../components/financial/paymentOption.vue'
 import EFTPage from '../components/financial/eftPage.vue'
+import PayFast from '../components/financial/payFast.vue'
 
 import LandingPages from "../components/marketing/landingPages.vue";
 import LandingPage from "../components/marketing/landingPage.vue";
       }),
       component: UpdateAgentProfile,
     },
+    {
+      path: "/financial/payfast",
+      name: "PayFast",
+      props: route => ({
+        ...route.params
+      }),
+      component: PayFast,
+    },
   ]
 });

src/store/modules/timeshare/myWeeks.js

     },
     updateUnpublished(state, item) {
       state.items.find(week => week.id === item.id).publish = false;
-    }
+    },
+    removeListing(state, id) {
+      var index = state.items.findIndex((item) => item.id == id)
+      state.items.splice(index, 1)
+    },
   },
   getters: {
     getNeedsVerify(state) {
       return state.items;
     }
-    // removeListing(state, id) {
-    //   state.myWeeks.pop(state.myWeeks.find(w => w.id === id));
-    // },
+    
   },
   actions: {
     async getItems({ commit }, id) {
         .then(result => commit("updateUnpublished", item))
         .catch(console.error);
     },
-    // deleteListing({ commit }, id) {
-    //   axios
-    //   .delete(`/api/myweeks/${id}`)
-    //   .then(result => commit('removeListing', id))
-    //   .catch(console.error);
-    // }
+    deleteListing({ commit }, id) {
+      axios
+      .delete(`/api/timeshareWeek/${id}`)
+      .then(result => commit('removeListing', id))
+      .catch(console.error);
+    },
     async getWeek({ commit }, id) {
       await axios
         .get(`/api/timeshareweek/${id}`)