fix: blocked Vanti options to sellers, added translations and allow to see the whole data to Vanti and Aplyca users

package.json

@@ -37,5 +37,8 @@
   },
   "resolutions": {
     "ip": "^2.0.1"
+  },
+  "dependencies": {
+    "@commercelayer/js-auth": "^6.2.0"
   }
 }

packages/app/.eslintrc.cjs

@@ -2,7 +2,6 @@ const path = require('path')
 
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ['@commercelayer/eslint-config-ts-react'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: path.resolve(__dirname, 'tsconfig.json'),
@@ -13,7 +12,7 @@ module.exports = {
     sourceType: 'module'
   },
   rules: {
-    '@typescript-eslint/no-unused-vars': [
+    'no-unused-vars': [
       'error',
       {
         // requried for react hooks

packages/app/@typing/env.d.ts

@@ -5,5 +5,9 @@ interface ImportMeta {
     DEV: boolean
     PUBLIC_ENABLE_MOCKS?: string
     PUBLIC_SELF_HOSTED_SLUG?: string
+    PUBLIC_LIVE_READ_CLIENT_ID?: string
+    PUBLIC_LIVE_READ_CLIENT_SECRET?: string
+    PUBLIC_TEST_READ_CLIENT_ID?: string
+    PUBLIC_TEST_READ_CLIENT_SECRET?: string
   }
 }

packages/app/package.json

@@ -26,7 +26,7 @@
     "lint:fix": "eslint src --fix --ext .ts,.tsx",
     "test": "pnpm run lint && vitest run",
     "test:watch": "vitest",
-    "prepare": "touch ./public/config.local.js"
+    "prepare": "echo. > ./public/config.local.js"
   },
   "dependencies": {
     "@commercelayer/app-elements": "^1.16.0",
@@ -64,4 +64,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

packages/app/src/components/Details/ImportDetails.tsx

@@ -25,10 +25,10 @@ export function ImportDetails({ sdkClient }: Props): JSX.Element | null {
   }
 
   return (
-    <ListDetails title='Details'>
+    <ListDetails title='Detalles'>
       <RowParentResource sdkClient={sdkClient} />
       {data.status != null ? (
-        <ListDetailsItem label='Status'>
+        <ListDetailsItem label='Estado'>
           <StatusBadge job={data} />
         </ListDetailsItem>
       ) : null}
@@ -42,7 +42,7 @@ export function ImportDetails({ sdkClient }: Props): JSX.Element | null {
         </ListDetailsItem>
       ) : null}
       {data.updated_at != null && data.completed_at == null ? (
-        <ListDetailsItem label='Last update'>
+        <ListDetailsItem label='Última actualización'>
           {formatDate({
             isoDate: data.updated_at,
             format: 'fullWithSeconds',

packages/app/src/components/Details/ImportErrors.tsx

@@ -0,0 +1,53 @@
+import { Table, Tr, Th, Td, Badge } from '@commercelayer/app-elements'
+import { useImportDetailsContext } from './Provider'
+
+export function ImportErrors(): JSX.Element | null {
+  const {
+    state: { data }
+  } = useImportDetailsContext()
+
+  if (data?.errors_log === null || data?.errors_log === undefined) {
+    return null
+  }
+
+  return (
+    <>
+      <header className='border-b pb-4 flex justify-between items-center border-gray-100'>
+        <h2 className='text-lg font-semibold'>Errores</h2>
+      </header>
+      <Table
+        thead={
+          <Tr>
+            <Th>Código</Th>
+            <Th>Error</Th>
+          </Tr>
+        }
+        tbody={
+          <>
+            {Object.entries(data.errors_log).map((entity: any) => {
+              return (
+                <Tr key={entity[0]}>
+                  <Td>{entity[0]}</Td>
+                  <Td>
+                    <ul>
+                      {Object.entries(entity[1]).map((field: any) => {
+                        return (
+                          <li key={field[0]}>
+                            El campo{" "}
+                            <Badge variant="secondary">{field[0]}</Badge>{" "}
+                            {field[1].length > 1 ? "generó los siguientes errores" : "generó el siguiente error"}{": "}
+                            <Badge variant="secondary">{field[1].join(",")}</Badge>
+                          </li>
+                        )
+                      }
+                      )}
+                    </ul>
+                  </Td>
+                </Tr>
+              )})}
+          </>
+        }
+      />
+    </>
+  )
+}

packages/app/src/components/Details/ImportReport.tsx

@@ -18,17 +18,17 @@ export function ImportReport(): JSX.Element | null {
     <Report
       items={[
         {
-          label: 'Record imported',
+          label: 'Filas importadas',
           count: <ImportCount type='processed_count' />,
           linkUrl: getSourceFileUrl(data),
-          linkLabel: 'Download file'
+          linkLabel: 'Descargar archivo'
         },
         {
-          label: 'Errors',
+          label: 'Errores',
           count: <ImportCount type='errors_count' />,
           downloadJsonAsFile: errorJsonToDownload?.json,
           downloadJsonFilename: errorJsonToDownload?.filename,
-          linkLabel: 'View logs'
+          linkLabel: 'Descargar logs'
         }
       ]}
     />

packages/app/src/components/Details/StatusBadge.tsx

@@ -30,35 +30,35 @@ function getUiStatusVariant(
   if (apiStatus === 'in_progress') {
     return {
       variant: 'primary',
-      label: 'in progress'
+      label: 'en progreso'
     }
   }
 
   if (apiStatus === 'interrupted') {
     return {
       variant: 'danger',
-      label: 'interrupted'
+      label: 'interrumpida'
     }
   }
 
   if (apiStatus === 'completed' && errorsCount != null) {
     return {
       variant: 'warning',
-      label: 'completed with errors'
+      label: 'completada con errores'
     }
   }
 
   if (apiStatus === 'completed') {
     return {
       variant: 'success',
-      label: 'completed'
+      label: 'completada'
     }
   }
 
   if (apiStatus === 'pending') {
     return {
       variant: 'secondary',
-      label: 'pending'
+      label: 'pendiente'
     }
   }
 

packages/app/src/components/ErrorNotFound.tsx

@@ -7,7 +7,7 @@ export function ErrorNotFound(): JSX.Element {
 
   return (
     <PageLayout
-      title='Imports'
+      title='Importaciones'
       navigationButton={{
         label: 'Back',
         icon: 'arrowLeft',

packages/app/src/components/InputParser/SuggestionTemplate.tsx

@@ -9,7 +9,7 @@ interface Props {
 export function SuggestionTemplate({ resourceType }: Props): JSX.Element {
   return (
     <Hint icon='lightbulbFilament'>
-      Use our{' '}
+      Usa nuestra{' '}
       <Button
         type='button'
         variant='link'
@@ -19,9 +19,9 @@ export function SuggestionTemplate({ resourceType }: Props): JSX.Element {
           })
         }}
       >
-        CSV template
+        Plantilla CSV
       </Button>{' '}
-      to avoid formatting errors.
+      para evitar errores de formato.
     </Hint>
   )
 }

packages/app/src/components/InputParser/index.tsx

@@ -136,7 +136,7 @@ export const InputParser: FC<Props> = ({
     <div>
       <Spacer bottom='4'>
         <InputFile
-          title='Select a CSV or JSON file to upload'
+          title='Selecciona un archivo CSV o JSON para cargar'
           onChange={(e) => {
             if (e.target.files != null && !isParsing) {
               setFile(e.target.files[0])

packages/app/src/components/InputParser/templates/prices.ts

@@ -10,12 +10,5 @@ export const csvPricesTemplate: Array<
 > = [
   'amount_cents',
   'compare_at_amount_cents',
-  'sku_code',
-  'reference',
-  'reference_origin',
-  // price_tiers relationship
-  'price_tiers.type',
-  'price_tiers.name',
-  'price_tiers.up_to',
-  'price_tiers.price_amount_cents'
+  'sku_code'
 ]

packages/app/src/components/InputParser/templates/skus.ts

@@ -1,22 +1,6 @@
 import { type SkuCreate } from '@commercelayer/sdk'
-import {
-  csvTagsColumns,
-  type CsvTagsColumn
-} from '#components/InputParser/templates/_tags'
+import { type CsvTagsColumn } from '#components/InputParser/templates/_tags'
 
 export const csvSkusTemplate: Array<
   keyof SkuCreate | 'shipping_category_id' | CsvTagsColumn
-> = [
-  'code',
-  'name',
-  'shipping_category_id',
-  'description',
-  'image_url',
-  'pieces_per_pack',
-  'weight',
-  'unit_of_weight',
-  'hs_tariff_number',
-  'do_not_ship',
-  'do_not_track',
-  ...csvTagsColumns
-]
+> = ['code', 'name', 'shipping_category_id', 'description', 'image_url']

packages/app/src/components/InputParser/templates/stockItems.ts

@@ -2,4 +2,4 @@ import { type StockItemCreate } from '@commercelayer/sdk'
 
 export const csvStockItemTemplate: Array<
   keyof StockItemCreate | 'stock_location_id'
-> = ['sku_code', 'quantity', 'reference', 'reference_origin']
+> = ['sku_code', 'quantity']

packages/app/src/components/List/Item.tsx

@@ -69,7 +69,7 @@ export function Item({ job }: Props): JSX.Element {
                 })
               }}
             >
-              Cancel
+              Cancelar
             </Button>
           </div>
         ) : (

packages/app/src/components/List/ItemDescriptionLine.tsx

@@ -17,27 +17,27 @@ export function DescriptionLine({ job }: Props): JSX.Element {
   return (
     <>
       {job.status === 'pending' ? (
-        <div>Pending</div>
+        <div>Pendiente</div>
       ) : job.status === 'in_progress' ? (
         percentage.value === 100 ? (
           // import job remains few seconds at 100% with status in_progress
-          <span>Finalizing...</span>
+          <span>Finalizando...</span>
         ) : (
           percentage.formatted
         )
       ) : job.status === 'interrupted' ? (
         <div>
-          Import failed on{' '}
+          Importación falló{' '}
           {formatDate({ isoDate: job.updated_at, timezone: user?.timezone })}
         </div>
       ) : job.status === 'completed' ? (
         errorsCount != null ? (
           <div>
-            Imported with {errorsCount} error{errorsCount > 1 ? 's' : ''}
+            Importada con {errorsCount} {errorsCount > 1 ? 'errores' : 'un error'}
           </div>
         ) : (
           <div>
-            Imported on{' '}
+            Importada el{' '}
             {job.completed_at != null &&
               formatDate({
                 isoDate: job.completed_at,

packages/app/src/components/List/Provider.tsx

@@ -13,6 +13,8 @@ import {
 
 import { initialValues, initialState } from './data'
 import { reducer } from './reducer'
+import { type TokenProviderAuthUser } from '@commercelayer/app-elements/dist/providers/TokenProvider/types'
+import { useTokenProvider } from '@commercelayer/app-elements'
 
 interface ListImportProviderProps {
   /**
@@ -39,6 +41,7 @@ export function ListImportProvider({
   pageSize,
   sdkClient
 }: ListImportProviderProps): JSX.Element {
+  const { user } = useTokenProvider()
   const [state, dispatch] = useReducer(reducer, initialState)
   const intervalId = useRef<number | null>(null)
 
@@ -50,7 +53,8 @@ export function ListImportProvider({
     const list = await getAllImports({
       cl: sdkClient,
       state,
-      pageSize
+      pageSize,
+      user
     })
     dispatch({ type: 'loadData', payload: list })
   }, [state.currentPage])
@@ -107,15 +111,22 @@ export function ListImportProvider({
 const getAllImports = async ({
   cl,
   state,
-  pageSize
+  pageSize,
+  user
 }: {
   cl: CommerceLayerClient
   state: ListImportContextState
   pageSize: number
+  user: TokenProviderAuthUser | null
 }): Promise<ListResponse<Import>> => {
+  const userDomain = user?.email?.split('@')?.[1];
+  const isAdmin = userDomain === 'aplyca.com' || userDomain === 'grupovanti.com';
   return await cl.imports.list({
     pageNumber: state.currentPage,
     pageSize,
-    sort: { created_at: 'desc' }
+    sort: { created_at: 'desc' },
+    filters: isAdmin ? {} : {
+      metadata_jcont: { email: user?.email ?? '' }
+    }
   })
 }