feat: file section for configurable products

client-app/core/api/graphql/cart/fragments/fullLineItem.graphql

@@ -44,5 +44,9 @@ fragment fullLineItem on LineItemType {
     name
     customText
     type
+    files {
+      name
+      url
+    }
   }
 }

client-app/core/api/graphql/catalog/queries/getConfigurationItems/getConfigurationItems.graphql

@@ -20,6 +20,12 @@ query GetConfigurationItems(
       productId
       sectionId
       type
+      files {
+        contentType
+        name
+        size
+        url
+      }
     }
   }
 }

client-app/core/api/graphql/fragments/orderLineItemFields.graphql

@@ -59,5 +59,9 @@ fragment orderLineItemFields on OrderLineItemType {
     name
     customText
     type
+    files {
+      name
+      url
+    }
   }
 }

client-app/core/composables/useThemeContext.ts

@@ -56,7 +56,7 @@ function _useThemeContext() {
 
   async function fetchPreset(themePresetName: string): Promise<IThemeConfigPreset | void> {
     try {
-      const module = (await import(`@/assets/presets/${themePresetName}.json`)) as {
+      const module = (await import(`../../assets/presets/${themePresetName}.json`)) as {
         default: IThemeConfigPreset;
       };
       return module.default;

client-app/shared/catalog/components/configuration/option-file.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="option-file">
+    <VcFileUploader
+      :files="files"
+      v-bind="fileOptions"
+      removable
+      @add-files="onAddFiles"
+      @remove-files="onRemoveFiles"
+      @download="onFileDownload"
+    />
+    <div class="option-file__errors">
+      <VcAlert
+        v-for="(file, index) in filesWithErrors"
+        :key="index"
+        color="danger"
+        variant="solid-light"
+        size="sm"
+        icon
+      >
+        {{ file.errorMessage }}
+      </VcAlert>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, toRefs, onMounted } from "vue";
+import { downloadFile, useFiles } from "@/shared/files";
+import { toAttachedFile } from "@/ui-kit/utilities";
+import type { CartConfigurationItemFileType } from "@/core/api/graphql/types";
+import type { DeepReadonly } from "vue";
+
+const emit = defineEmits<IEmits>();
+const props = defineProps<IProps>();
+
+const { value } = toRefs(props);
+
+const DEFAULT_FILES_SCOPE = "product-configuration";
+
+interface IProps {
+  value?: DeepReadonly<CartConfigurationItemFileType[]>;
+}
+
+interface IEmits {
+  (e: "input", value: CartConfigurationItemFileType[]): void;
+}
+
+const initialFiles = computed(
+  () => value.value?.map((file) => toAttachedFile(file.name, file.size, file.contentType, file.url)) ?? [],
+);
+
+const {
+  files,
+  attachedAndUploadedFiles,
+  addFiles,
+  validateFiles,
+  removeFiles,
+  uploadFiles,
+  fetchOptions: fetchFileOptions,
+  options: fileOptions,
+} = useFiles(DEFAULT_FILES_SCOPE, initialFiles);
+
+async function onAddFiles(items: INewFile[]) {
+  addFiles(items);
+  validateFiles();
+  await uploadFiles();
+  emit("input", attachedAndUploadedFiles.value);
+}
+
+const filesWithErrors = computed(() => files.value.filter((file) => file.errorMessage));
+
+async function onRemoveFiles(filesToRemove: FileType[]) {
+  await removeFiles(filesToRemove);
+  validateFiles();
+  emit("input", attachedAndUploadedFiles.value);
+}
+
+function onFileDownload(file: FileType) {
+  if (file && file.url) {
+    void downloadFile(file.url, file.name);
+  }
+}
+
+onMounted(() => {
+  void fetchFileOptions();
+});
+</script>
+
+<style lang="scss">
+.option-file {
+  &__errors {
+    @apply mt-2 flex flex-col gap-2;
+  }
+}
+</style>

client-app/shared/catalog/components/configuration/product-configuration.vue

@@ -16,7 +16,10 @@
         :collapsed="index !== 0"
       >
         <template #title>
-          {{ section.name }}
+          <div class="product-configuration__title">
+            {{ section.name }}
+            <span v-if="section.isRequired" class="product-configuration__required">*</span>
+          </div>
 
           <div class="product-configuration__subtitle">
             {{ section.description }}
@@ -25,7 +28,18 @@
               {{ validationErrors.get(section.id) }}
             </div>
 
-            <div v-else>{{ getSectionSubtitle(section) }}</div>
+            <div
+              v-else
+              class="product-configuration__value"
+              :class="[
+                hasSelectedOption(section.id)
+                  ? 'product-configuration__value--selected'
+                  : 'product-configuration__value--not-selected',
+                section.isRequired ? 'product-configuration__value--required' : '',
+              ]"
+            >
+              {{ getSectionSubtitle(section) }}
+            </div>
           </div>
         </template>
 
@@ -41,9 +55,10 @@
                 :extended-price="option.extendedPrice"
                 :name="section.id"
                 @input="
-                  handleInput({
+                  selectSectionValue({
                     sectionId: section.id,
-                    option: { productId: option.product.id, quantity: option.quantity ?? 1 },
+                    productId: option.product.id,
+                    quantity: option.quantity ?? 1,
                     type: section.type,
                   })
                 "
@@ -55,9 +70,8 @@
               :name="section.id"
               :selected="selectedConfiguration[section.id]?.productId === undefined"
               @input="
-                handleInput({
+                selectSectionValue({
                   sectionId: section.id,
-                  option: undefined,
                   type: section.type,
                 })
               "
@@ -71,7 +85,7 @@
               :value="selectedConfiguration[section.id]?.selectedOptionTextValue"
               :selected="!!selectedConfiguration[section.id]"
               @input="
-                handleInput({
+                selectSectionValue({
                   sectionId: section.id,
                   customText: $event,
                   type: section.type,
@@ -84,9 +98,42 @@
               :name="section.id"
               :selected="selectedConfiguration[section.id]?.selectedOptionTextValue === undefined"
               @input="
-                handleInput({
+                selectSectionValue({
+                  sectionId: section.id,
+                  type: section.type,
+                })
+              "
+            />
+          </template>
+
+          <template v-if="section.type === CONFIGURABLE_SECTION_TYPES.file">
+            <OptionFile
+              :is-required="section.isRequired"
+              :name="section.id"
+              :value="selectedConfiguration[section.id]?.files"
+              @input="
+                selectSectionValue({
+                  sectionId: section.id,
+                  files: $event,
+                  type: section.type,
+                })
+              "
+              @remove-files="
+                selectSectionValue({
+                  sectionId: section.id,
+                  files: $event,
+                  type: section.type,
+                })
+              "
+            />
+
+            <OptionNone
+              v-if="!section.isRequired"
+              :name="section.id"
+              :selected="selectedConfiguration[section.id]?.selectedOptionTextValue === undefined"
+              @input="
+                selectSectionValue({
                   sectionId: section.id,
-                  customText: undefined,
                   type: section.type,
                 })
               "
@@ -109,11 +156,12 @@ import { CONFIGURABLE_SECTION_TYPES } from "@/shared/catalog/constants/configura
 import { SaveChangesModal } from "@/shared/common";
 import { useModal } from "@/shared/modal";
 import { useNotifications } from "@/shared/notification";
+import OptionFile from "./option-file.vue";
 import OptionNone from "./option-none.vue";
 import OptionProductNone from "./option-product-none.vue";
 import OptionProduct from "./option-product.vue";
 import OptionText from "./option-text.vue";
-import type { ConfigurationSectionInput, ConfigurationSectionType } from "@/core/api/graphql/types";
+import type { ConfigurationSectionType } from "@/core/api/graphql/types";
 import type { DeepReadonly } from "vue";
 
 const props = defineProps<IProps>();
@@ -163,22 +211,17 @@ watch(
   },
 );
 
-function handleInput(payload: ConfigurationSectionInput) {
-  selectSectionValue(payload);
+function hasSelectedOption(sectionId: string) {
+  return !!selectedConfiguration.value?.[sectionId]?.selectedOptionTextValue;
 }
 
 function getSectionSubtitle(section: DeepReadonly<ConfigurationSectionType>) {
-  if (selectedConfiguration.value?.[section.id]?.selectedOptionTextValue) {
+  if (hasSelectedOption(section.id)) {
     return selectedConfiguration.value?.[section.id]?.selectedOptionTextValue;
   }
-  switch (section.type) {
-    case CONFIGURABLE_SECTION_TYPES.product:
-      return t("shared.catalog.product_details.product_configuration.nothing_selected");
-    case CONFIGURABLE_SECTION_TYPES.text:
-      return t("shared.catalog.product_details.product_configuration.no_text");
-    default:
-      return t("shared.catalog.product_details.product_configuration.nothing_selected");
-  }
+  return section.isRequired
+    ? t("shared.catalog.product_details.product_configuration.required_no_selected")
+    : t("shared.catalog.product_details.product_configuration.optional_no_selected");
 }
 
 async function canChangeRoute(): Promise<boolean> {
@@ -228,10 +271,16 @@ async function openSaveChangesModal(): Promise<boolean> {
 
 <style lang="scss">
 .product-configuration {
+  $required: "";
+
   &__widgets {
     @apply space-y-5;
   }
 
+  &__required {
+    @apply text-danger;
+  }
+
   &__subtitle {
     @apply mt-1 text-xs font-normal normal-case text-neutral max-w-3xl;
   }
@@ -245,7 +294,25 @@ async function openSaveChangesModal(): Promise<boolean> {
   }
 
   &__error {
-    @apply text-danger;
+    @apply text-danger-700;
+  }
+
+  &__value {
+    &--selected {
+      @apply text-success-600;
+    }
+
+    &--required {
+      $required: &;
+    }
+
+    &--not-selected {
+      @apply text-info-800;
+
+      &#{$required} {
+        @apply text-danger-800;
+      }
+    }
   }
 }
 </style>