Merge pull request #159 from buckaroo-it/BP-3295-Add-the-option-to-di…

…splay-giftcards-inline

Bp 3295 add the option to display giftcards inline

config/routes.yml

@@ -28,6 +28,30 @@ buckaroo_config_creditcards:
     options:
         expose: true
 
+buckaroo_config_giftcards:
+    path: buckaroo3/config/giftcards
+    methods: [POST, GET]
+    defaults:
+        _controller: 'Buckaroo\PrestaShop\Controllers\admin\Giftcards::initContent'
+    options:
+        expose: true
+
+buckaroo_edit_giftcard:
+    path: buckaroo3/config/giftcards/edit
+    methods: [POST]
+    defaults:
+        _controller: 'Buckaroo\PrestaShop\Controllers\admin\Giftcards::editGiftCard'
+    options:
+        expose: true
+
+buckaroo_remove_giftcard:
+    path: buckaroo3/config/giftcards/remove
+    methods: [POST]
+    defaults:
+        _controller: 'Buckaroo\PrestaShop\Controllers\admin\Giftcards::removeGiftCard'
+    options:
+        expose: true
+
 buckaroo_config_orderings:
     path: buckaroo3/config/orderings
     methods: [POST, GET]

config/services.yml

@@ -136,6 +136,12 @@ services:
     class: Buckaroo\PrestaShop\Controllers\admin\Creditcards
     public: true
 
+  Buckaroo\PrestaShop\Controllers\admin\Giftcards:
+    class: Buckaroo\PrestaShop\Controllers\admin\Giftcards
+    arguments:
+      - "@doctrine.orm.entity_manager"
+    public: true
+
   Buckaroo\PrestaShop\Controllers\admin\Orderings:
     class: Buckaroo\PrestaShop\Controllers\admin\Orderings
     arguments:

controllers/admin/Creditcards.php

@@ -38,11 +38,11 @@ public function __construct()
      */
     public function initContent()
     {
-        $countries = $this->creditCardsRepository->getCreditCardsFromDB();
+        $creditcards = $this->creditCardsRepository->getCreditCardsFromDB();
 
         $data = [
             'status' => true,
-            'creditcards' => $countries,
+            'creditcards' => $creditcards,
         ];
 
         return $this->sendResponse($data);

controllers/admin/Giftcards.php

@@ -0,0 +1,146 @@
+<?php
+/**
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License (AFL 3.0)
+ * It is available through the world-wide-web at this URL:
+ * http://opensource.org/licenses/afl-3.0.php
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this file
+ *
+ *  @author    Buckaroo.nl <[email protected]>
+ *  @copyright Copyright (c) Buckaroo B.V.
+ *  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
+ */
+
+namespace Buckaroo\PrestaShop\Controllers\admin;
+
+use Buckaroo\PrestaShop\Src\Entity\BkGiftcards;
+use Doctrine\ORM\EntityManager;
+
+if (!defined('_PS_VERSION_')) {
+    exit;
+}
+
+class Giftcards extends BaseApiController
+{
+    private $bkGiftCardsRepository;
+
+    public function __construct(EntityManager $entityManager)
+    {
+        parent::__construct();
+        $this->bkGiftCardsRepository = $entityManager->getRepository(BkGiftcards::class);
+    }
+
+    /**
+     * @throws \Exception
+     */
+    public function initContent()
+    {
+        switch ($_SERVER['REQUEST_METHOD']) {
+            case 'GET':
+                return $this->handleGet();
+            case 'POST':
+                return $this->handlePost();
+        }
+
+    }
+
+    private function handleGet()
+    {
+        $giftcards = $this->bkGiftCardsRepository->getGiftCards(false);
+        $customGiftcards = $this->bkGiftCardsRepository->getGiftCards(true);
+
+        $data = [
+            'status' => true,
+            'giftcards' => $giftcards,
+            'custom_giftcards' => $customGiftcards,
+        ];
+
+        return $this->sendResponse($data);
+    }
+
+    private function handlePost()
+    {
+        $data = $this->getJsonInput();
+
+        $name = $this->getValueOrNull($data, 'name');
+        $code = $this->getValueOrNull($data, 'service_code');
+        $logo = $this->getValueOrNull($data, 'logo_url');
+
+        if (!($name || $code || $logo)) {
+            return $this->sendResponse([
+                'status' => false,
+                'message' => 'Missing or invalid data',
+            ]);
+        }
+
+        $result = $this->bkGiftCardsRepository->createGiftCard($name, $code, $logo);
+        $data = [
+            'status' => true,
+            'custom_giftcard' => $result,
+        ];
+
+        return $this->sendResponse($data);
+    }
+
+    public function editGiftCard()
+    {
+        $data = $this->getJsonInput();
+
+        $id = $this->getValueOrNull($data, 'id');
+        $name = $this->getValueOrNull($data, 'name');
+        $code = $this->getValueOrNull($data, 'service_code');
+        $logo = $this->getValueOrNull($data, 'logo_url');
+
+        if (!($name || $code || $logo)) {
+            return $this->sendResponse([
+                'status' => false,
+                'message' => 'Missing or invalid data',
+            ]);
+        }
+
+        $result = $this->bkGiftCardsRepository->editGiftCard($id, $name, $code, $logo);
+        $data = [
+            'status' => true,
+            'custom_giftcard' => $result,
+        ];
+
+        return $this->sendResponse($data);
+    }
+
+    public function removeGiftCard()
+    {
+        $data = $this->getJsonInput();
+
+        $id = $this->getValueOrNull($data, 'id');
+
+        if (!$id) {
+            return $this->sendResponse([
+                'status' => false,
+                'message' => 'Missing or invalid ID',
+            ]);
+        }
+
+        $result = $this->bkGiftCardsRepository->removeGiftCard($id);
+
+        if ($result === false) {
+            return $this->sendResponse([
+                'status' => false,
+                'message' => "Failed to delete gift card with ID: $id",
+            ]);
+        }
+
+        return $this->sendResponse([
+            'status' => true,
+            'message' => "Gift card with ID: $id has been successfully deleted.",
+        ]);
+    }
+
+    private function getValueOrNull(array $data, $key)
+    {
+        return isset($data[$key]) && !empty($data[$key]) ? $data[$key] : null;
+    }
+}

dev/src/components/fields/ActiveGiftcards.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="p-5 space-y-5">
+    <div class="flex justify-between items-center">
+      <div class="space-y-2">
+        <h2 class="font-semibold text-sm">{{ $t(`dashboard.pages.payments.allowed_giftcards`) }}</h2>
+        <div class="text-gray-400 text-xs">{{ $t(`dashboard.pages.payments.allowed_giftcards_label`) }}</div>
+      </div>
+
+      <button
+          class="border border-blue-500 rounded text-blue-500 text-sm p-1 hover:bg-blue-500 hover:text-white hover:shadow-lg capitalize"
+          @click="$refs.giftCardModal.add()"
+      >
+        <i class="fa fa-plus-circle"></i>
+        {{ $t(`dashboard.pages.payments.add_custom_giftcard`) }}
+      </button>
+    </div>
+    <div class="relative rounded-lg border border-gray-300 max-h-96 overflow-y-auto">
+      <div class="relative">
+        <input
+            id="search-giftcard"
+            v-model="query"
+            class="bk-no-close block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent appearance-none focus:outline-none focus:ring-0 focus:border-primary peer"
+            placeholder=" "
+            type="text"
+        />
+        <label
+            class="bk-no-close absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-primary peer-placeholder-shown:scale-100 peer-placeholder-shown:top-8 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1"
+            for="search-giftcard "
+        >
+          {{ $t(`dashboard.pages.payments.search_giftcard`) }}
+        </label>
+      </div>
+
+      <ul class="text-sm">
+        <li
+            v-for="giftcard in filteredGiftcards"
+            class="p-3 flex space-x-2 cursor-pointer justify-between"
+            v-bind:class="{
+                        'bg-primary text-white':
+                            (giftcard.isCustom &&
+                                activatedGiftcards.customGiftcards &&
+                                activatedGiftcards.customGiftcards.find(cG => cG.id === giftcard.id)) ||
+                            (!giftcard.isCustom &&
+                                activatedGiftcards.giftcards &&
+                                activatedGiftcards.giftcards.find(g => g.id === giftcard.id)),
+                        'hover:bg-gray-200 hover:text-gray-700':
+                            (giftcard.isCustom &&
+                                activatedGiftcards.customGiftcards &&
+                                !activatedGiftcards.customGiftcards.find(cG => cG.id === giftcard.id)) ||
+                            (!giftcard.isCustom &&
+                                activatedGiftcards.giftcards &&
+                                !activatedGiftcards.giftcards.find(g => g.id === giftcard.id)),
+                    }"
+            @click="toggleGiftcard(giftcard)"
+        >
+          <div class="flex space-x-2">
+            <img :alt="giftcard.name" v-if="giftcard.logo_url" :src="giftcard.logo_url" class="w-4" />
+            <span class="block">{{ giftcard.name }}</span>
+          </div>
+
+          <button
+              v-if="giftcard.isCustom"
+              class="border border-green-500 hover:bg-green-500 text-green-500 hover:text-white py-1 px-2 rounded"
+              @click.stop.prevent="$refs.giftCardModal.edit(giftcard)"
+          >
+            <i class="fa fa-edit"></i>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <GiftcardModal
+      ref="giftCardModal"
+      @appendCustomGiftcard="appendCustomGiftcard"
+      @removeCustomGiftcard="removeCustomGiftcard"
+  />
+</template>
+
+<script>
+import { computed, ref } from 'vue';
+import { useApi } from '../../lib/api';
+import GiftcardModal from './GiftcardModal.vue';
+
+export default {
+  name: 'ActiveGiftcards.vue',
+  props: ['modelValue'],
+  components: {
+    GiftcardModal,
+  },
+  watch: {
+    modelValue(value) {
+      this.activatedGiftcards = value;
+    },
+    activatedGiftcards: {
+      handler(value, oldValue) {
+        this.$emit('update:modelValue', value);
+      },
+      deep: true,
+    },
+  },
+  setup(props, { emit }) {
+    const query = ref('');
+    const giftcards = ref([]);
+    const customGiftcards = ref([]);
+    const activatedGiftcards = ref(props.modelValue ?? []);
+
+    const { get, data } = useApi('buckaroo_config_giftcards');
+
+    get().then(() => {
+      if (data.value.status) {
+        giftcards.value = data.value.giftcards.map(giftcard => {
+          giftcard.logo_url = `/modules/buckaroo3/views/img/buckaroo/Giftcards/SVG/${giftcard.logo}`;
+          giftcard.giftcard = false;
+
+          return giftcard;
+        });
+
+        customGiftcards.value = data.value.custom_giftcards.map(giftcard => {
+          giftcard.isCustom = true;
+          giftcard.logo_url = giftcard.logo;
+          giftcard.service_code = giftcard.code;
+
+          return giftcard;
+        });
+      }
+    });
+
+    const filteredGiftcards = computed(() => {
+      if (query.value.trim().length === 0) {
+        return giftcards.value.concat(customGiftcards.value);
+      }
+
+      return giftcards.value
+          .filter(giftcardHasName(query.value))
+          .concat(customGiftcards.value.filter(giftcardHasName(query.value)));
+    });
+
+    const giftcardHasName = partialName => {
+      return giftcard => giftcard.name.toLowerCase().includes(partialName.toLowerCase());
+    };
+
+    const appendCustomGiftcard = customGiftcard => {
+      customGiftcards.value.push(customGiftcard);
+    };
+
+    const removeCustomGiftcard = customGiftcard => {
+      customGiftcards.value = customGiftcards.value.filter(giftcard => customGiftcard.id !== giftcard.id);
+    };
+
+    const toggleGiftcard = giftcard => {
+      const customGiftcards = activatedGiftcards.value.customGiftcards ?? [];
+      const giftcards = activatedGiftcards.value.giftcards ?? [];
+
+      if (giftcard.isCustom) {
+        if (customGiftcards.find(cg => cg.id === giftcard.id)) {
+          activatedGiftcards.value.customGiftcards = customGiftcards.filter(cg => cg.id !== giftcard.id);
+
+          return;
+        }
+
+        customGiftcards.push(giftcard);
+      }
+
+      if (!giftcard.isCustom) {
+        if (giftcards.find(g => g.id === giftcard.id)) {
+          activatedGiftcards.value.giftcards = giftcards.filter(g => g.id !== giftcard.id);
+
+          return;
+        }
+
+        giftcards.push(giftcard);
+      }
+
+      activatedGiftcards.value = {
+        customGiftcards: customGiftcards,
+        giftcards: giftcards,
+      };
+    };
+
+    return {
+      query,
+      customGiftcards,
+      filteredGiftcards,
+      toggleGiftcard,
+      activatedGiftcards,
+      appendCustomGiftcard,
+      removeCustomGiftcard,
+    };
+  },
+};
+</script>