Cli

app/(setup)/first-steps/hooks/useUserStoreData.ts

@@ -8,11 +8,11 @@ import {
   type PaymentGatewayConfig,
   type StoreInitializationResult,
   type CreateUserStoreInput,
-} from '@/lib/amplify-client';
+} from '@/lib/clients/amplify-client';
 import useAuthStore from '@/context/core/userStore';
 
 // Re-exportar tipos para compatibilidad
-export type { PaymentGatewayType, PaymentGatewayConfig, StoreInitializationResult } from '@/lib/amplify-client';
+export type { PaymentGatewayType, PaymentGatewayConfig, StoreInitializationResult } from '@/lib/clients/amplify-client';
 
 export const useUserStoreData = () => {
   const [loading, setLoading] = useState<boolean>(false);

app/(setup)/layout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { inter } from '@/lib/fonts';
+import { inter } from '@/lib/fonts/fonts';
 import { useAuthInitializer } from '@/hooks/auth/useAuthInitializer';
 import { AppProvider } from '@shopify/polaris';
 import '@shopify/polaris/build/esm/styles.css';

app/(setup)/login/components/sing-up/SignUpForm.tsx

@@ -12,7 +12,7 @@ import { Input } from '@/components/ui/input';
 import { signUpSchema, type SignUpFormData } from '@/lib/zod-schemas/schemas';
 import Link from 'next/link';
 import { useAuth } from '@/context/hooks/useAuth';
-import { getSignUpErrorMessage } from '@/lib/auth-error-messages';
+import { getSignUpErrorMessage } from '@/lib/auth/auth-error-messages';
 
 interface SignUpFormProps {
   onVerificationNeeded: (email: string, password: string) => void;

app/(setup)/login/components/verification-form/VerificationForm.tsx

@@ -12,7 +12,7 @@ import { verificationSchema, type VerificationFormData } from '@/lib/zod-schemas
 import { OTPInput, type SlotProps } from 'input-otp';
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/context/hooks/useAuth';
-import { getConfirmSignUpErrorMessage } from '@/lib/auth-error-messages';
+import { getConfirmSignUpErrorMessage } from '@/lib/auth/auth-error-messages';
 
 interface VerificationFormProps {
   email: string;

app/(setup)/login/hooks/SignIn.ts

@@ -2,7 +2,7 @@ import { resendSignUpCode, signIn, type SignInInput } from 'aws-amplify/auth';
 import { useRouter } from 'next/navigation';
 import { useCallback, useState } from 'react';
 import { useAuth } from '@/context/hooks/useAuth';
-import { getSignInErrorMessage } from '@/lib/auth-error-messages';
+import { getSignInErrorMessage } from '@/lib/auth/auth-error-messages';
 import { getLastVisitedStoreClient } from '@/lib/cookies/last-store';
 
 interface UseAuthReturn {

app/(setup)/my-store/hooks/useUserStores.ts

@@ -1,5 +1,5 @@
 import { use } from 'react';
-import { client } from '@/lib/amplify-client';
+import { client } from '@/lib/clients/amplify-client';
 import type { Store, UseUserStoresResult } from '../types/store.types';
 
 const STORE_LIMITS = {

app/(www)/layout.tsx

@@ -1,5 +1,5 @@
 import '@/app/global.css';
-import { inter } from '@/lib/fonts';
+import { inter } from '@/lib/fonts/fonts';
 import { Navbar } from '@/app/(www)/landing/components/NavBar';
 
 export default function WithNavbarLayout({ children }: { children: React.ReactNode }) {

app/auth/layout.tsx

@@ -1,5 +1,5 @@
 import '@/app/global.css';
-import { inter } from '@/lib/fonts';
+import { inter } from '@/lib/fonts/fonts';
 
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
   return (

app/orders/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { nunitoSans } from '@/lib/fonts';
+import { nunitoSans } from '@/lib/fonts/fonts';
 import StyledComponentsRegistry from './registry';
 import { ReactQueryProvider } from '@/utils/client/ReactQueryProvider';
 

app/store/components/ai-chat/context/ConversationHistoryContext.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { createContext, useContext, ReactNode, useState, useCallback, useEffect, useRef } from 'react';
-import { client } from '@/lib/amplify-client';
+import { client } from '@/lib/clients/amplify-client';
 
 export interface Conversation {
   id: string;

app/store/components/ai-chat/hooks/useConversation.ts

@@ -5,7 +5,7 @@
 import { useState, useCallback, useRef } from 'react';
 import { useConversationContext } from '../context/ConversationContext';
 import { generateConversationName, generateTemporaryConversationName } from '../utils/conversation-naming';
-import { client } from '@/lib/amplify-client';
+import { client } from '@/lib/clients/amplify-client';
 
 export interface Message {
   id: string;

app/store/components/ai-chat/hooks/useCurrentConversation.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useCallback, useEffect } from 'react';
-import { client } from '@/lib/amplify-client';
+import { client } from '@/lib/clients/amplify-client';
 
 interface UseCurrentConversationProps {
   conversationId?: string;

app/store/components/images-selector/components/ImageCard.tsx

@@ -118,8 +118,8 @@ const ImageCard = memo(function ImageCard({
     ...CARD_STYLES.checkboxContainer,
     backgroundColor: deleteMode
       ? isMarkedForDeletion
-        ? '#d72c0d'
-        : 'rgba(255,255,255,0.9)'
+        ? 'transparent'
+        : 'transparent'
       : isSelected
         ? 'transparent'
         : 'rgba(255, 255, 255, 0.9)',

app/store/components/images-selector/components/ImageGallery.tsx

@@ -2,8 +2,8 @@ import { useToast } from '@/app/store/context/ToastContext';
 import { S3Image } from '@/app/store/hooks/storage/useS3Images';
 import { Box, Button, ButtonGroup, EmptyState, Grid, InlineStack, Spinner, Text } from '@shopify/polaris';
 import { DeleteIcon } from '@shopify/polaris-icons';
-import { useCallback, useState, memo } from 'react';
-import ImageCard from './ImageCard';
+import { useCallback, useState, memo, useMemo } from 'react';
+import ImageCard from '@/app/store/components/images-selector/components/ImageCard';
 
 interface ImageGalleryProps {
   images: S3Image[];
@@ -15,6 +15,10 @@ interface ImageGalleryProps {
   onImageSelect: (image: S3Image) => void;
   onDeleteImage: (key: string) => Promise<void>;
   onDeleteMultiple?: (keys: string[]) => Promise<void>;
+  nextContinuationToken?: string;
+  loadingMore?: boolean;
+  hasActiveFilters?: boolean;
+  allImages?: S3Image[];
 }
 
 const ImageGallery = memo(function ImageGallery({
@@ -27,13 +31,32 @@ const ImageGallery = memo(function ImageGallery({
   onImageSelect,
   onDeleteImage,
   onDeleteMultiple,
+  nextContinuationToken,
+  loadingMore = false,
+  hasActiveFilters = false,
+  allImages = [],
 }: ImageGalleryProps) {
   const [deleteMode, setDeleteMode] = useState(false);
   const [imagesToDelete, setImagesToDelete] = useState<Set<string>>(new Set());
   const [isDeleting, setIsDeleting] = useState(false);
 
   const { showToast } = useToast();
 
+  // Determinar si debemos mostrar el estado de carga cuando no hay imágenes
+  const shouldShowLoadingState = useMemo(() => {
+    if (images.length > 0) return false;
+
+    // Si estamos cargando más, siempre mostrar spinner
+    if (loadingMore) return true;
+
+    // Si no hay filtros activos y no hay imágenes en total, pero hay más disponibles, mostrar spinner
+    if (!hasActiveFilters && nextContinuationToken && allImages.length === 0) {
+      return true;
+    }
+
+    return false;
+  }, [images.length, loadingMore, nextContinuationToken, hasActiveFilters, allImages.length]);
+
   // Memoizar funciones para evitar re-creaciones
   const isSelected = useCallback(
     (image: S3Image) => {
@@ -219,6 +242,15 @@ const ImageGallery = memo(function ImageGallery({
   }
 
   if (images.length === 0) {
+    // Si debemos mostrar estado de carga, mostrar spinner en lugar del estado vacío
+    if (shouldShowLoadingState) {
+      return (
+        <div className="flex justify-center items-center h-full">
+          <Spinner accessibilityLabel="Cargando más imágenes" size="small" />
+        </div>
+      );
+    }
+
     return (
       <EmptyState
         heading={searchTerm ? 'No se encontraron imágenes' : 'No tienes imágenes'}

app/store/components/images-selector/components/ImageSelectorModal.tsx

@@ -5,15 +5,15 @@ import { useS3ImagesWithOperations } from '@/app/store/hooks/storage/useS3Images
 import { Banner, BlockStack, Box, Modal, ProgressBar, Spinner, Text, InlineStack, Scrollable } from '@shopify/polaris';
 
 // Lazy load de componentes pesados
-const ImageGallery = lazy(() => import('./ImageGallery'));
-const SearchAndFilters = lazy(() => import('./SearchAndFilters'));
-const UploadDropZone = lazy(() => import('./UploadDropZone'));
+const ImageGallery = lazy(() => import('@/app/store/components/images-selector/components/ImageGallery'));
+const SearchAndFilters = lazy(() => import('@/app/store/components/images-selector/components/SearchAndFilters'));
+const UploadDropZone = lazy(() => import('@/app/store/components/images-selector/components/UploadDropZone'));
 
 // Hooks y utilidades
 import { useImageSelection } from '@/app/store/components/images-selector/hooks/useImageSelection';
 import { useImageUpload } from '@/app/store/components/images-selector/hooks/useImageUpload';
-import { filterAndSortImages, getFilterStats } from '../utils/filterUtils';
-import type { FilterState } from '../hooks/useImageFilters';
+import { filterAndSortImages, getFilterStats } from '@/app/store/components/images-selector/utils/filterUtils';
+import type { FilterState } from '@/app/store/components/images-selector/hooks/useImageFilters';
 
 interface ImageSelectorModalProps {
   open: boolean;
@@ -55,6 +55,17 @@ const ImageSelectorModal = memo(function ImageSelectorModal({
     return getFilterStats(images, filteredImages);
   }, [images, filteredImages]);
 
+  // Calcular si hay filtros activos
+  const hasActiveFilters = useMemo(() => {
+    return (
+      filters.fileTypes.length > 0 ||
+      filters.fileSizes.length > 0 ||
+      filters.usedIn.length > 0 ||
+      filters.products.length > 0 ||
+      filters.searchTerm.length > 0
+    );
+  }, [filters]);
+
   const { selectedImage, handleImageSelect, getSelectedImages, removeFromSelection, addToSelection } =
     useImageSelection({
       initialSelectedImage,
@@ -280,16 +291,12 @@ const ImageSelectorModal = memo(function ImageSelectorModal({
                 onImageSelect={handleImageSelect}
                 onDeleteImage={handleDeleteImage}
                 onDeleteMultiple={handleDeleteMultiple}
+                nextContinuationToken={nextContinuationToken}
+                loadingMore={loadingMore}
+                hasActiveFilters={hasActiveFilters}
+                allImages={images}
               />
             </Suspense>
-
-            {loadingMore && (
-              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
-                <Box paddingBlockStart="400">
-                  <Spinner accessibilityLabel="Cargando más imágenes" size="small" />
-                </Box>
-              </div>
-            )}
           </BlockStack>
         </Modal.Section>
       </Scrollable>

app/store/components/payments/components/PaymentGatewayCard.tsx

@@ -10,7 +10,14 @@ interface PaymentGatewayCardProps {
 }
 
 export function PaymentGatewayCard({ gateway, isConfigured, onActivate }: PaymentGatewayCardProps) {
-  const gatewayConfig = {
+  const gatewayConfig: Record<
+    PaymentGatewayType,
+    {
+      name: string;
+      logo: string;
+      PaymentIcons: () => JSX.Element;
+    }
+  > = {
     wompi: {
       name: 'Wompi',
       logo: 'https://cdn.fasttify.com/assets/b/wompi.webp',

app/store/components/product-management/inventory/pages/InventoryManager.tsx

@@ -37,7 +37,9 @@ export function InventoryManager({ storeId }: InventoryManagerProps) {
         images = undefined;
       }
     } else if (Array.isArray(product.images)) {
-      images = product.images.map((img) => (typeof img === 'string' ? { url: img } : img));
+      images = product.images.map((img: string | { url: string; alt?: string }) =>
+        typeof img === 'string' ? { url: img } : img
+      );
     }
 
     return {

app/store/components/product-management/products/hooks/usePriceSuggestion.ts

@@ -4,7 +4,7 @@
  * y categoría del producto.
  */
 import { useState, useCallback } from 'react';
-import { aiClient } from '@/lib/amplify-client';
+import { aiClient } from '@/lib/clients/amplify-client';
 
 /**
  * Interfaz para los resultados de la sugerencia de precios.

app/store/components/product-management/products/hooks/useProductDescription.ts

@@ -4,7 +4,7 @@
  * y categoría del producto.
  */
 import { useState, useCallback } from 'react';
-import { aiClient } from '@/lib/amplify-client';
+import { aiClient } from '@/lib/clients/amplify-client';
 
 /**
  * Hook personalizado que gestiona la generación de descripciones de productos con IA.

app/store/components/product-management/shared/utils/exportUtils.ts

@@ -78,7 +78,9 @@ export const exportProductsToCSV = (products: IProduct[], fileName: string): boo
 
       // Prepara los datos de imágenes
       const imagesString = Array.isArray(product.images)
-        ? product.images.map((img) => img.url).join(', ')
+        ? product.images
+            .map((img: string | { url: string; alt?: string }) => (typeof img === 'string' ? img : img.url))
+            .join(', ')
         : typeof product.images === 'string'
           ? product.images
           : '';

app/store/components/product-management/utils/exportUtils.ts

@@ -78,7 +78,9 @@ export const exportProductsToCSV = (products: IProduct[], fileName: string): boo
 
       // Prepara los datos de imágenes
       const imagesString = Array.isArray(product.images)
-        ? product.images.map((img) => img.url).join(', ')
+        ? product.images
+            .map((img: string | { url: string; alt?: string }) => (typeof img === 'string' ? img : img.url))
+            .join(', ')
         : typeof product.images === 'string'
           ? product.images
           : '';

app/store/hooks/data/useAutoTaskCompletion/useAutoTaskCompletion.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useOnboardingProgress } from '../useOnboardingProgress/useOnboardingProgress';
+import { useOnboardingProgress } from '@/app/store/hooks/data/useOnboardingProgress/useOnboardingProgress';
 
 /**
  * Hook para marcar automáticamente las tareas del onboarding cuando se completen las acciones reales

app/store/hooks/data/useCheckoutSessions/mutations/useCheckoutSessionMutations.ts

@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { getCurrentUser } from 'aws-amplify/auth';
 import type { ICheckoutSession, CheckoutSessionCreateInput, CheckoutSessionUpdateInput } from '../types';
 import { useCheckoutSessionCacheUtils } from '../utils/checkoutSessionCacheUtils';
-import { client } from '@/lib/amplify-client';
+import { client } from '@/lib/clients/amplify-client';
 
 /**
  * Hook para manejar todas las mutaciones de sesiones de checkout

app/store/hooks/data/useCheckoutSessions/queries/useCheckoutSessionQueries.ts

@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import type { ICheckoutSession, PaginationOptions, CheckoutSessionsQueryResult, CheckoutSessionStatus } from '../types';
-import { storeClient } from '@/lib/amplify-client';
+import { storeClient } from '@/lib/clients/amplify-client';
 
 /**
  * Hook para manejar las queries de sesiones de checkout

app/store/hooks/data/useCheckoutSessions/types/useCheckoutSessions-types.ts

@@ -1,4 +1,4 @@
-import { type StoreCheckoutSession } from '@/lib/amplify-client';
+import { type StoreCheckoutSession } from '@/lib/clients/amplify-client';
 
 /**
  * Interfaz para representar una sesión de checkout

app/store/hooks/data/useCollection/useCollections.ts

@@ -1,7 +1,7 @@
 import { useCacheInvalidation } from '@/hooks/cache/useCacheInvalidation';
 import { useMutation, useQuery, useQueryClient, UseQueryResult } from '@tanstack/react-query';
 import { useState } from 'react';
-import { storeClient, type StoreCollection } from '@/lib/amplify-client';
+import { storeClient, type StoreCollection } from '@/lib/clients/amplify-client';
 import { ensureUniqueCollectionSlug } from './utils/slugUnique';
 import { generateProductSlug } from '@/lib/utils/slug';
 

app/store/hooks/data/useCollection/utils/slugUnique.ts

@@ -1,4 +1,4 @@
-import { storeClient } from '@/lib/amplify-client';
+import { storeClient } from '@/lib/clients/amplify-client';
 
 // Genera un slug único para colecciones: base, base-1, base-2, ...
 export async function ensureUniqueCollectionSlug(

app/store/hooks/data/useNavigationMenu/useNavigationMenus.ts

@@ -3,7 +3,7 @@ import { validateMenuItems, validateNavigationMenu, validateUpdateNavigationMenu
 import { useMutation, useQuery, useQueryClient, UseQueryResult } from '@tanstack/react-query';
 import { getCurrentUser } from 'aws-amplify/auth';
 import { useCallback, useState } from 'react';
-import { storeClient, type StoreNavigationMenu } from '@/lib/amplify-client';
+import { storeClient, type StoreNavigationMenu } from '@/lib/clients/amplify-client';
 
 const NAVIGATION_MENUS_KEY = 'navigationMenus';
 

app/store/hooks/data/useNotifications/mutations/useNotificationMutations.ts

@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import type { Notification } from '../types';
 import { useNotificationCacheUtils } from '../utils/notificationCacheUtils';
-import { client } from '@/lib/amplify-client';
+import { client } from '@/lib/clients/amplify-client';
 
 /**
  * Hook para manejar todas las mutaciones de notificaciones

app/store/hooks/data/useNotifications/queries/useNotificationQueries.ts

@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import type { Notification, NotificationFilterOptions, NotificationsQueryResult, PaginationOptions } from '../types';
-import { storeClient } from '@/lib/amplify-client';
+import { storeClient } from '@/lib/clients/amplify-client';
 
 /**
  * Hook para manejar las queries de notificaciones

app/store/hooks/data/useNotifications/types/useNotification-types.ts

@@ -1,5 +1,5 @@
 import { ConnectionState } from 'aws-amplify/api';
-import { type StoreNotification } from '@/lib/amplify-client';
+import { type StoreNotification } from '@/lib/clients/amplify-client';
 
 /**
  * Interfaz para representar una notificación

app/store/hooks/data/useNotifications/useNotifications.ts

@@ -10,7 +10,7 @@ import { CONNECTION_STATE_CHANGE, ConnectionState } from 'aws-amplify/api';
 import { Hub } from 'aws-amplify/utils';
 import { useNotificationMutations } from './mutations';
 import { useNotificationQueries } from './queries';
-import { client } from '@/lib/amplify-client';
+import { client } from '@/lib/clients/amplify-client';
 
 /**
  * Hook para gestionar notificaciones con paginación y caché usando React Query