Fasttify · Stivenjs · Oct 17, 2025 · Oct 17, 2025 · Oct 17, 2025 · Oct 17, 2025
diff --git a/amplify/data/models/user-store.ts b/amplify/data/models/user-store.ts
@@ -7,23 +7,20 @@ export const userStoreModel = a
       .required()
       .authorization((allow) => [
         allow.ownerDefinedIn('userId').to(['create', 'read', 'delete']),
-        allow.authenticated().to(['create', 'read']),
         allow.publicApiKey().to(['read']),
       ]),
     storeId: a
       .string()
       .required()
       .authorization((allow) => [
         allow.ownerDefinedIn('userId').to(['create', 'read', 'update', 'delete']),
-        allow.authenticated().to(['create', 'read']),
         allow.publicApiKey().to(['read']),
       ]),
     storeName: a
       .string()
       .required()
       .authorization((allow) => [
         allow.ownerDefinedIn('userId').to(['create', 'read', 'update', 'delete']),
-        allow.authenticated().to(['create', 'read', 'update']),
         allow.publicApiKey().to(['read']),
       ]),
     storeDescription: a.string(),
@@ -35,7 +32,12 @@ export const userStoreModel = a
     currencyLocale: a.string(),
     currencyDecimalPlaces: a.integer(),
     storeType: a.string(),
-    storeStatus: a.boolean(),
+    storeStatus: a
+      .boolean()
+      .authorization((allow) => [
+        allow.ownerDefinedIn('userId').to(['create', 'read']),
+        allow.publicApiKey().to(['read', 'update']),
+      ]),
     storeAdress: a.string(),
     contactEmail: a.string(),
     contactPhone: a.string(),
@@ -45,7 +47,6 @@ export const userStoreModel = a
       .required()
       .authorization((allow) => [
         allow.ownerDefinedIn('userId').to(['create', 'read', 'update', 'delete']),
-        allow.authenticated().to(['create', 'read', 'update']),
         allow.publicApiKey().to(['read']),
       ]),
     onboardingData: a.json(),
@@ -67,7 +68,6 @@ export const userStoreModel = a
   .identifier(['storeId'])
   .secondaryIndexes((index) => [index('userId'), index('storeName'), index('defaultDomain')])
   .authorization((allow) => [
-    allow.authenticated().to(['read', 'update', 'delete', 'create']),
     allow.publicApiKey().to(['read']),
     allow.ownerDefinedIn('userId').to(['read', 'update', 'delete', 'create']),
   ]);
diff --git a/app/(setup)/layout.tsx b/app/(setup)/layout.tsx
@@ -2,14 +2,42 @@
 
 import { inter } from '@/lib/fonts';
 import { useAuthInitializer } from '@/hooks/auth/useAuthInitializer';
+import { AppProvider } from '@shopify/polaris';
+import '@shopify/polaris/build/esm/styles.css';
 import '@/app/global.css';
 
 export default function WithoutNavbarLayout({ children }: { children: React.ReactNode }) {
   useAuthInitializer();
 
   return (
     <html lang="es">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <AppProvider
+          i18n={{
+            locale: 'es',
+            fallbackLocale: 'es',
+            translations: {
+              es: {
+                common: {
+                  ok: 'Aceptar',
+                  cancel: 'Cancelar',
+                  close: 'Cerrar',
+                  save: 'Guardar',
+                  delete: 'Eliminar',
+                  edit: 'Editar',
+                  add: 'Agregar',
+                  remove: 'Quitar',
+                  search: 'Buscar',
+                  loading: 'Cargando...',
+                  error: 'Error',
+                  success: 'Éxito',
+                },
+              },
+            },
+          }}>
+          {children}
+        </AppProvider>
+      </body>
     </html>
   );
 }
diff --git a/app/(setup)/my-store/components/EmptyStoreState.tsx b/app/(setup)/my-store/components/EmptyStoreState.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { EmptyState } from '@shopify/polaris';
+import { PlusIcon } from '@shopify/polaris-icons';
+import type { EmptyStoreStateProps } from '../types/store.types';
+
+export function EmptyStoreState({ canCreateStore, onCreateStore }: EmptyStoreStateProps) {
+  return (
+    <EmptyState
+      heading="No tienes tiendas configuradas aún"
+      action={
+        canCreateStore
+          ? {
+              content: 'Crear mi primera tienda',
+              onAction: onCreateStore,
+              icon: PlusIcon,
+            }
+          : undefined
+      }
+      image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png">
+      <p>
+        Crea tu primera tienda y comienza a vender online en minutos. Configura tu catálogo, personaliza tu diseño y
+        lanza tu negocio.
+      </p>
+    </EmptyState>
+  );
+}
diff --git a/app/(setup)/my-store/components/StoreCard.tsx b/app/(setup)/my-store/components/StoreCard.tsx
@@ -0,0 +1,94 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { Text, BlockStack, InlineStack } from '@shopify/polaris';
+import type { StoreCardProps } from '../types/store.types';
+
+function getInitialsFromName(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .map((word) => word[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+}
+
+export function StoreCard({ store, onClick }: StoreCardProps) {
+  const initials = getInitialsFromName(store.storeName);
+  const domain = store.defaultDomain || `${store.storeId}.fasttify.com`;
+
+  return (
+    <div
+      onClick={() => onClick(store.storeId)}
+      style={{
+        cursor: 'pointer',
+        backgroundColor: 'white',
+        border: '1px solid #e5e7eb',
+        borderRadius: '8px',
+        padding: '16px 24px',
+        marginBottom: '6px',
+        transition: 'all 0.2s ease',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor = '#d1d5db';
+        e.currentTarget.style.boxShadow = '0 1px 3px 0 rgba(0, 0, 0, 0.1)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = '#e5e7eb';
+        e.currentTarget.style.boxShadow = 'none';
+      }}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          onClick(store.storeId);
+        }
+      }}
+      aria-label={`Seleccionar tienda ${store.storeName}`}>
+      <InlineStack align="space-between" blockAlign="center" gap="300">
+        <InlineStack align="center" gap="300">
+          <div
+            style={{
+              width: '40px',
+              height: '40px',
+              backgroundColor: '#4ade80',
+              borderRadius: '6px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#166534',
+              fontSize: '14px',
+              fontWeight: '600',
+            }}>
+            {initials}
+          </div>
+          <BlockStack gap="100">
+            <Text variant="headingSm" as="h3">
+              {store.storeName}
+            </Text>
+            <Text variant="bodySm" tone="subdued" as="p">
+              {domain}
+            </Text>
+          </BlockStack>
+        </InlineStack>
+        <div style={{ color: '#6b7280', fontSize: '16px' }}>›</div>
+      </InlineStack>
+    </div>
+  );
+}
diff --git a/app/(setup)/my-store/components/StoreFilters.tsx b/app/(setup)/my-store/components/StoreFilters.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { Tabs } from '@shopify/polaris';
+import type { StoreFiltersProps } from '../types/store.types';
+
+export function StoreFilters({ selected, onSelect }: StoreFiltersProps) {
+  const tabs = [
+    {
+      id: 'active',
+      content: 'Activas',
+      panelID: 'active-panel',
+    },
+    {
+      id: 'inactive',
+      content: 'Inactivas',
+      panelID: 'inactive-panel',
+    },
+  ];
+
+  return <Tabs tabs={tabs} selected={selected} onSelect={onSelect} fitted />;
+}
diff --git a/app/(setup)/my-store/components/StoreList.tsx b/app/(setup)/my-store/components/StoreList.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { BlockStack } from '@shopify/polaris';
+import { StoreCard } from './StoreCard';
+import { EmptyStoreState } from './EmptyStoreState';
+import type { StoreListProps } from '../types/store.types';
+
+export function StoreList({ stores, onStoreSelect, canCreateStore, onCreateStore }: StoreListProps) {
+  if (stores.length === 0) {
+    return <EmptyStoreState canCreateStore={canCreateStore} onCreateStore={onCreateStore} />;
+  }
+
+  return (
+    <BlockStack gap="100">
+      {stores.map((store) => (
+        <StoreCard key={store.storeId} store={store} onClick={onStoreSelect} />
+      ))}
+    </BlockStack>
+  );
+}
diff --git a/app/(setup)/my-store/components/StoreListHeader.tsx b/app/(setup)/my-store/components/StoreListHeader.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2025 Fasttify LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { Button } from '@shopify/polaris';
+import { PlusIcon } from '@shopify/polaris-icons';
+import type { StoreListHeaderProps } from '../types/store.types';
+
+export function StoreListHeader({ canCreateStore, onCreateStore }: StoreListHeaderProps) {
+  const primaryAction = canCreateStore
+    ? {
+        content: 'Crear tienda',
+        onAction: onCreateStore,
+        icon: PlusIcon,
+      }
+    : undefined;
+
+  return (
+    <div style={{ marginBottom: '32px' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '24px',
+          gap: '24px',
+        }}>
+        <h1 style={{ fontSize: '24px', fontWeight: '600', margin: 0, color: '#1a1a1a', flex: 1 }}>
+          Bienvenido de nuevo
+        </h1>
+        {primaryAction && (
+          <Button onClick={primaryAction.onAction} variant="primary" icon={PlusIcon}>
+            {primaryAction.content}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}