design updates

Author: BranDavidSebastian

src/core/integrations/integrations/integrations-show/containers/document-types/containers/remote-document-types/components/RemoteDocumentTypeEditForm.vue

@@ -10,16 +10,19 @@ import { TextInput } from '../../../../../../../../../shared/components/atoms/in
 import { Button } from '../../../../../../../../../shared/components/atoms/button';
 import { SecondaryButton } from '../../../../../../../../../shared/components/atoms/button-secondary';
 import { FieldQuery } from '../../../../../../../../../shared/components/organisms/general-form/containers/form-fields/field-query';
-import type { QueryFormField } from '../../../../../../../../../shared/components/organisms/general-form/formConfig';
+import type { CreateOnTheFly, QueryFormField } from '../../../../../../../../../shared/components/organisms/general-form/formConfig';
+import { FormType } from '../../../../../../../../../shared/components/organisms/general-form/formConfig';
 import { FieldType } from '../../../../../../../../../shared/utils/constants';
 import { Toast } from '../../../../../../../../../shared/modules/toast';
 import { processGraphQLErrors } from '../../../../../../../../../shared/utils';
 import { documentTypesQuerySelector } from '../../../../../../../../../shared/api/queries/documentTypes.js';
 import { getRemoteDocumentTypeQuery } from '../../../../../../../../../shared/api/queries/salesChannels.js';
+import { createDocumentTypeMutation } from '../../../../../../../../../shared/api/mutations/documentTypes.js';
 import {
   updateEbayDocumentTypeMutation,
   updateRemoteDocumentTypeMutation,
 } from '../../../../../../../../../shared/api/mutations/salesChannels.js';
+import { baseFormConfigConstructor as documentTypeBaseFormConfigConstructor } from '../../../../../../../../settings/document-types/configs';
 import RemoteDocumentTypeCategoriesList from './categories-lists/RemoteDocumentTypeCategoriesList.vue';
 
 type CategoryId = string | number;
@@ -85,6 +88,20 @@ const breadcrumbsLinks = computed(() => [
   { name: t('integrations.show.documentTypes.editTitle') },
 ]);
 
+const localDocumentTypeCreateOnTheFlyConfig = computed<CreateOnTheFly>(() => {
+  const defaultName = (form.value.translatedName || form.value.name || '').trim();
+
+  return {
+    config: documentTypeBaseFormConfigConstructor(
+      t,
+      FormType.CREATE,
+      createDocumentTypeMutation,
+      'createDocumentType',
+    ),
+    ...(defaultName ? { defaults: { name: defaultName } } : {}),
+  };
+});
+
 const localInstanceField = computed<QueryFormField>(() => ({
   type: FieldType.Query,
   name: 'localInstance',
@@ -97,6 +114,7 @@ const localInstanceField = computed<QueryFormField>(() => ({
   isEdge: true,
   multiple: false,
   filterable: true,
+  createOnFlyConfig: localDocumentTypeCreateOnTheFlyConfig.value,
 }));
 
 const localInstanceInitialOptions = computed(() =>

src/core/integrations/integrations/integrations-show/containers/document-types/containers/remote-document-types/components/categories-lists/AmazonDocumentTypeCategoriesList.vue

@@ -522,7 +522,7 @@ const setManualCategory = async () => {
       </Button>
     </div>
 
-    <div class="mt-3 space-y-2">
+    <div class="mt-3 space-y-2 max-h-72 overflow-y-auto pr-1 category-list-scroll">
       <div
         v-for="item in categoryItems"
         :key="item.key"
@@ -735,4 +735,28 @@ const setManualCategory = async () => {
     opacity: 0;
   }
 }
+
+.category-list-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: #94a3b8 #f1f5f9;
+}
+
+.category-list-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.category-list-scroll::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 9999px;
+}
+
+.category-list-scroll::-webkit-scrollbar-thumb {
+  background: #94a3b8;
+  border-radius: 9999px;
+  border: 2px solid #f1f5f9;
+}
+
+.category-list-scroll::-webkit-scrollbar-thumb:hover {
+  background: #64748b;
+}
 </style>

src/core/integrations/integrations/integrations-show/containers/document-types/containers/remote-document-types/components/categories-lists/EbayDocumentTypeCategoriesList.vue

@@ -438,7 +438,7 @@ const setManualCategory = async () => {
       </Button>
     </div>
 
-    <div class="mt-3 space-y-2">
+    <div class="mt-3 space-y-2 max-h-72 overflow-y-auto pr-1 category-list-scroll">
       <div
         v-for="item in categoryItems"
         :key="item.key"
@@ -585,4 +585,28 @@ const setManualCategory = async () => {
     opacity: 0;
   }
 }
+
+.category-list-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: #94a3b8 #f1f5f9;
+}
+
+.category-list-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.category-list-scroll::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 9999px;
+}
+
+.category-list-scroll::-webkit-scrollbar-thumb {
+  background: #94a3b8;
+  border-radius: 9999px;
+  border: 2px solid #f1f5f9;
+}
+
+.category-list-scroll::-webkit-scrollbar-thumb:hover {
+  background: #64748b;
+}
 </style>

src/core/integrations/integrations/integrations-show/containers/document-types/containers/remote-document-types/components/categories-lists/SheinDocumentTypeCategoriesList.vue

@@ -384,7 +384,7 @@ const setManualCategory = async () => {
       </Button>
     </div>
 
-    <div class="mt-3 space-y-2">
+    <div class="mt-3 space-y-2 max-h-72 overflow-y-auto pr-1 category-list-scroll">
       <div
         v-for="item in categoryItems"
         :key="item.key"
@@ -505,4 +505,28 @@ const setManualCategory = async () => {
     opacity: 0;
   }
 }
+
+.category-list-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: #94a3b8 #f1f5f9;
+}
+
+.category-list-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.category-list-scroll::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 9999px;
+}
+
+.category-list-scroll::-webkit-scrollbar-thumb {
+  background: #94a3b8;
+  border-radius: 9999px;
+  border: 2px solid #f1f5f9;
+}
+
+.category-list-scroll::-webkit-scrollbar-thumb:hover {
+  background: #64748b;
+}
 </style>