[2.x] Allow file uploads through file fields

README.md

@@ -31,6 +31,7 @@ This package does not create any "request invoice" buttons on the frontend by de
     sku: addToCart.simpleProduct.sku,
     qty: addToCart.qty,
     options: addToCart.customSelectedOptions,
+    customOptions: addToCart.customOptions,
 }">
     @lang('Request quote')
 </x-rapidez-quote::button>
@@ -42,12 +43,14 @@ You can also pass an array to `add-products`, which allows you to push an array
 <x-rapidez-quote::button v-bind:add-products="cart.items.map(item => ({
     sku: item.product.sku,
     qty: item.quantity,
-    options: item.options,
+    customizable_options: item.customizable_options,
 }))">
     @lang('Request quote')
 </x-rapidez-quote::button>
 ```
 
+Note that you can use `customizable_options` here, which will automatically handle cart data for you.
+
 ## Automatic PDF
 
 By default, this package will automatically generate a quote for you based on the products. However, you may not want this to happen for various reasons. To this end, you can disable this functionality by setting the `auto_send_quote` config setting to `false`.

resources/dist/build/manifest.json

@@ -1,11 +1,11 @@
 {
   "resources/css/cp.css": {
-    "file": "assets/cp-b8200a98.css",
+    "file": "assets/cp-8f1c8752.css",
     "isEntry": true,
     "src": "resources/css/cp.css"
   },
   "resources/js/cp.js": {
-    "file": "assets/cp-2a85ac64.js",
+    "file": "assets/cp-48d33a2b.js",
     "isEntry": true,
     "src": "resources/js/cp.js"
   }

resources/js/components/QuoteData.vue

@@ -1,5 +1,6 @@
 <script>
 import { useSessionStorage } from '@vueuse/core';
+import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'
 
 export default {
     props: {
@@ -9,37 +10,71 @@ export default {
     data() {
         return {
             products: [],
+            customOptions: useIDBKeyval('quote_custom_options', {}),
         }
     },
 
     mounted() {
         this.products = useSessionStorage('quote_products', [])
     },
-    
+
     render() {
         return this.$scopedSlots.default(this)
     },
 
     methods: {
-        pushProducts(products = null) {
+        async pushProducts(products = null) {
             if (products === null) {
                 products = this.addProducts
             }
-
-            if (Array.isArray(products)) {
-                this.products.push(...products)
-            } else {
-                this.products.push(products)
+
+            if (!Array.isArray(products)) {
+                products = [products]
             }
+
+            products = products.map(product => {
+                if (!('customizable_options' in product)) {
+                    return product
+                }
+
+                let options = Object.fromEntries(product.customizable_options
+                    .filter((option) => option.type != 'file')
+                    .map((option) => ([
+                        window.atob(option.customizable_option_uid).split('/')[1],
+                        option.values[0].value,
+                    ]))
+                )
+
+                let customOptions = product.customizable_options.filter((option) => option.type == 'file')
+
+                return {
+                    sku: product.sku,
+                    qty: product.qty,
+                    options: options,
+                    customOptions: customOptions,
+                }
+            })
+
+            products = products.map(product => ({...product, id: Math.random().toString(16)}))
+            let customOptions = Object.fromEntries(products.map(product => [product.id, product.customOptions ?? {}]))
+
+            await this.customOptions.set(customOptions)
+            this.products.push(...products.map(product => ({
+                id: product.id,
+                sku: product.sku,
+                qty: product.qty ?? 1,
+                options: product.options ?? {},
+            })))
         },
 
-        clearProducts() {
+        async clearProducts() {
+            await this.customOptions.set({})
             this.products = []
         },
 
-        newQuote(products = null) {
-            this.clearProducts()
-            this.pushProducts(products)
+        async newQuote(products = null) {
+            await this.clearProducts()
+            await this.pushProducts(products)
         },
 
         removeProduct(sku) {
@@ -59,9 +94,12 @@ export default {
             if (this.products.length === 0) {
                 return ''
             }
-
-            return JSON.stringify(this.products)
+
+            return JSON.stringify(this.products.map(product => ({
+                ...product,
+                customOptions: this.customOptions.data[product.id] ?? {}
+            })))
         },
     },
 }
-</script>
+</script>

resources/js/components/fieldtypes/Products.vue

@@ -21,6 +21,11 @@
                             <span class="ml-auto opacity-50">+{{ price(option.price) }}</span>
                         </div>
                     </template>
+                    <template v-for="upload in item.uploaded ?? {}">
+                        <div class="flex">
+                            <a v-bind:href="upload.path" class="opacity-75 underline" target="_blank">{{ upload.option }}: {{ upload.filename }}</a>
+                        </div>
+                    </template>
                 </div>
                 <div class="ml-auto">
                     {{ price(item.totalPrice) }}