Merge pull request #169 from w3bdesign/development

 @w3bdesign Remove VISA in Stripe info

Author: w3bdesign

package-lock.json

@@ -13,13 +13,13 @@
         "stylelint:vue": "./node_modules/.bin/stylelint **/*.vue --fix"
     },
     "devDependencies": {
-        "@vue/compiler-sfc": "^3.0.6",
+        "@vue/compiler-sfc": "^3.0.7",
         "cross-env": "^7.0.3",
         "eslint": "^7.21.0",
         "eslint-config-airbnb-base": "^14.2.1",
         "eslint-loader": "^4.0.2",
         "eslint-plugin-import": "^2.22.1",
-        "eslint-plugin-vue": "^7.6.0",
+        "eslint-plugin-vue": "^7.7.0",
         "postcss": "^8.2.6",
         "resolve-url-loader": "^3.1.2",
         "stylelint": "^13.11.0",

package.json

@@ -17995,7 +17995,7 @@ var _hoisted_22 = {
   "class": "flex justify-center w-full align-center"
 };
 
-var _hoisted_23 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createStaticVNode)("<div class=\"flex justify-center w-full align-center\" data-v-67966e56><span class=\"h-10 p-4 text-lg font-bold text-center text-red-500\" data-v-67966e56>Use the following card details for testing: <br data-v-67966e56>4242424242424242 <br data-v-67966e56>Visa <br data-v-67966e56>CVC any 3 digits <br data-v-67966e56>Any future date <br data-v-67966e56></span></div><h2 class=\"h-10 p-4 mt-32 text-2xl font-bold text-center\" data-v-67966e56> Stripe payment </h2><div class=\"flex justify-center w-full p-4 align-center\" data-v-67966e56><br data-v-67966e56><div id=\"card-element\" class=\"w-full h-16 mt-4 lg:w-5/12 xl:w-5/12\" data-v-67966e56> Stripe </div></div>", 3);
+var _hoisted_23 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createStaticVNode)("<div class=\"flex justify-center w-full align-center\" data-v-67966e56><span class=\"h-10 p-4 text-lg font-bold text-center text-red-500\" data-v-67966e56>Use the following card details for testing: <br data-v-67966e56>4242424242424242 <br data-v-67966e56>CVC any 3 digits <br data-v-67966e56>Any future date <br data-v-67966e56></span></div><h2 class=\"h-10 p-4 mt-32 text-2xl font-bold text-center\" data-v-67966e56> Stripe payment </h2><div class=\"flex justify-center w-full p-4 align-center\" data-v-67966e56><br data-v-67966e56><div id=\"card-element\" class=\"w-full h-16 mt-4 lg:w-5/12 xl:w-5/12\" data-v-67966e56> Stripe </div></div>", 3);
 
 var _hoisted_26 = {
   "class": "flex justify-center w-full align-center"
@@ -18413,8 +18413,15 @@ var _hoisted_1 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("
 var _hoisted_2 = {
   "class": "mt-4"
 };
+
+var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h2", {
+  "class": "h-10 p-6 text-2xl font-bold text-center"
+}, " Thank you for your order with transaction ID # ", -1
+/* HOISTED */
+);
+
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", null, [_hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("pre", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.order), 1
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", null, [_hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, [_hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("pre", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.order), 1
   /* TEXT */
   )])]);
 }

public/js/app.js

@@ -5,5 +5,3 @@
 <script>
 export default {};
 </script>
-
-<style></style>

resources/js/components/Categories/Categories.vue

@@ -9,7 +9,3 @@ export default {
 
 };
 </script>
-
-<style>
-
-</style>

resources/js/pages/Categories/Categories.vue

@@ -86,7 +86,7 @@
             <span
               class="h-10 p-4 text-lg font-bold text-center text-red-500"
             >Use the following card details for testing:
-              <br>4242424242424242 <br>Visa <br>CVC any 3
+              <br>4242424242424242 <br>CVC any 3
               digits <br>Any future date
               <br>
             </span>
@@ -150,10 +150,7 @@ export default defineComponent({
     const cartTotal = computed(() => store.getters.cartTotal);
     const cartContent = computed(() => store.state.cart);
     const customerDetails = computed(() => store.getters.customerDetails);
-
-    const checkoutFormIsValid = computed(
-      () => store.getters.checkoutFormIsValid,
-    );
+    const checkoutFormIsValid = computed(() => store.getters.checkoutFormIsValid);
 
     const removeProductFromCart = (product) => {
       localState.removingCartItem = true;
@@ -245,52 +242,54 @@ export default defineComponent({
 
 <style scoped>
 .disabledButton {
-    @apply cursor-not-allowed opacity-50;
+  @apply cursor-not-allowed opacity-50;
 }
 
 .checkoutButton {
-    @apply p-2 mt-4 mb-4 text-lg font-bold text-white bg-blue-500 rounded hover:bg-blue-700;
+  @apply p-2 mt-4 mb-4 text-lg font-bold text-white bg-blue-500 rounded hover:bg-blue-700;
 }
 
 .flex-container {
-    flex-wrap: wrap;
-    flex-direction: row;
-    justify-content: space-around;
-    align-items: center;
-    align-content: center;
-    max-width: 1380px;
-    @apply flex border border-gray-300 rounded-lg shadow;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  align-content: center;
+  max-width: 1380px;
+
+  @apply flex border border-gray-300 rounded-lg shadow;
 }
 
 .flex-container-total {
-    flex-wrap: wrap;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: flex-end;
-    align-content: center;
-    max-width: 1380px;
-    @apply flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-end;
+  align-content: center;
+  max-width: 1380px;
+
+  @apply flex;
 }
 
 .item {
-    @apply lg:m-2 xl:m-4 xl:w-1/6 lg:w-1/6 sm:m-2 w-auto;
+  @apply lg:m-2 xl:m-4 xl:w-1/6 lg:w-1/6 sm:m-2 w-auto;
 }
 
 .item-content {
-    @apply inline-block mt-4 lg:h-12 h-20 w-32 md:w-full lg:w-full xl:w-full;
+  @apply inline-block mt-4 lg:h-12 h-20 w-32 md:w-full lg:w-full xl:w-full;
 }
 
 .removing {
-    @apply animate-spin cursor-not-allowed;
+  @apply animate-spin cursor-not-allowed;
 }
 
 .fade-enter-active,
 .fade-leave-active {
-    transition: all 0.5s ease;
+  transition: all 0.5s ease;
 }
 
 .fade-enter-from,
 .fade-leave-to {
-    opacity: 0;
+  opacity: 0;
 }
 </style>

resources/js/pages/Checkout/Checkout.vue

@@ -4,6 +4,9 @@
       Order summary
     </h1>
     <div class="mt-4">
+      <h2 class="h-10 p-6 text-2xl font-bold text-center">
+        Thank you for your order with transaction ID #
+      </h2>
       <pre>{{ order }}</pre>
     </div>
   </div>
@@ -26,5 +29,3 @@ export default {
 
 };
 </script>
-
-<style></style>

resources/js/pages/Checkout/Summary.vue

@@ -28,7 +28,3 @@ export default defineComponent({
 
 });
 </script>
-
-<style>
-
-</style>