@teleporthq/teleport-plugin-next-data-source 0.43.75 → 0.44.1

package/src/transformations/booking-item.ts

@@ -0,0 +1,71 @@
+import type { UIDLEcommerceCategory } from '@teleporthq/teleport-types'
+import { generateCategoryTaxonomyCode } from './category-taxonomy'
+
+export interface BookingItemTransformOptions {
+  /** The booking items' category taxonomy — see `bookingSettings.categories`. */
+  categories?: UIDLEcommerceCategory[]
+}
+
+/**
+ * Generates JavaScript code for the `teleport_booking_items` row
+ * transformation — the things a Bookings site lets people book.
+ *
+ * The row is kept whole (every column, snake_case: the booking pages bind
+ * them as stored) and its translatable texts — `name`, `description` (rich
+ * text) and `location` — are the page's language when the row has them there
+ * (`es_name`, …), the main language otherwise. Its `category` is the name its
+ * first category has in the page's language, read off the taxonomy baked in
+ * here (the row's stored main name while none of its ids is a category). That
+ * is all a booking page needs to show an item in the visitor's language; the
+ * booking statements localise what they read on their own.
+ *
+ * MUST mirror `localizeBookingItem` in the editor
+ * (teleport-gui features/bookings/utils/localize-booking-item.ts), which is
+ * what the canvas renders from.
+ */
+export const generateBookingItemTransformationCode = (
+  options: BookingItemTransformOptions = {}
+): string => {
+  return `
+// ============================================================
+// Booking Item Transformation
+// ============================================================
+
+var BOOKING_ITEM_TRANSLATABLE_COLUMNS = ['name', 'description', 'location']
+${generateCategoryTaxonomyCode('BOOKING_CATEGORIES_BY_ID', options.categories)}
+
+function buildBookingItem(record, options) {
+  if (!record || typeof record !== 'object') return record
+  options = options || {}
+  var currentLang = options.currentLanguage || null
+  var mainLang = options.mainLanguage || null
+
+  var out = {}
+  for (var key in record) {
+    if (Object.prototype.hasOwnProperty.call(record, key)) out[key] = record[key]
+  }
+  for (var i = 0; i < BOOKING_ITEM_TRANSLATABLE_COLUMNS.length; i++) {
+    var column = BOOKING_ITEM_TRANSLATABLE_COLUMNS[i]
+    var value = resolveI18nField(record, column, column, currentLang, mainLang)
+    out[column] = value === null || value === undefined ? record[column] : value
+  }
+  if ('category' in record || 'category_ids' in record) {
+    var stored = typeof record.category === 'string' ? record.category : ''
+    var assigned = resolveAssignedCategories(
+      record.category_ids,
+      BOOKING_CATEGORIES_BY_ID,
+      currentLang,
+      mainLang,
+      stored
+    )
+    out.category = assigned.length > 0 ? assigned[0].name : stored
+  }
+  return out
+}
+
+function transformBookingItems(records, options) {
+  if (!Array.isArray(records)) return []
+  return records.map(function(record) { return buildBookingItem(record, options) })
+}
+`
+}

package/src/transformations/index.ts

@@ -8,6 +8,7 @@ import { ContentTables, StorefrontTax, TableAccess } from '@teleporthq/teleport-
 import { generateSharedTransformationCode } from './shared-utils'
 import { generateBlogPostTransformationCode } from './blog-post'
 import { generateCustomPageTransformationCode } from './custom-page'
+import { generateBookingItemTransformationCode } from './booking-item'
 import {
   generateEcommerceProductTransformationCode,
   type EcommerceProductTransformOptions,
@@ -45,6 +46,8 @@ export interface EntityTransformOptions extends EcommerceProductTransformOptions
   contentSettings?: Partial<Record<ContentTables.ContentPresetKey, ContentPresetTransformSettings>>
   /** Blog post-category taxonomy — see `blogSettings.categories`. */
   blogCategories?: UIDLEcommerceCategory[]
+  /** The booking items' category taxonomy — see `bookingSettings.categories`. */
+  bookingCategories?: UIDLEcommerceCategory[]
   /** Post content headings get ids and `#` links — see `blogSettings.headingAnchors`. */
   blogHeadingAnchors?: boolean
   /**
@@ -136,7 +139,12 @@ export const contentSettingsFor = (
 export const buildProductTransformOptions = (
   options: Pick<
     GeneratorOptions,
-    'ecommerceSettings' | 'invoiceSettings' | 'blogSettings' | 'helpCenterSettings' | 'auth'
+    | 'ecommerceSettings'
+    | 'invoiceSettings'
+    | 'blogSettings'
+    | 'bookingSettings'
+    | 'helpCenterSettings'
+    | 'auth'
   > &
     LocalizedProjectOptions & {
       /**
@@ -157,6 +165,7 @@ export const buildProductTransformOptions = (
     help: contentPresetTransformSettings(options.helpCenterSettings),
   },
   blogCategories: options.blogSettings?.categories,
+  bookingCategories: options.bookingSettings?.categories,
   blogHeadingAnchors: options.blogSettings?.headingAnchors === true,
   blogComments: options.blogSettings?.comments === true,
   storefrontTaxRate: StorefrontTax.resolveStorefrontTaxRate(options.invoiceSettings),
@@ -166,7 +175,12 @@ export const buildProductTransformOptions = (
   trustedReaderRoles: TableAccess.resolveTrustedReaderRoles(options.auth || options.authentication),
 })
 
-export type TransformationType = 'blog-post' | 'ecommerce-product' | 'custom-page' | null
+export type TransformationType =
+  | 'blog-post'
+  | 'ecommerce-product'
+  | 'custom-page'
+  | 'booking-item'
+  | null
 
 /**
  * Strips a leading `schema.` qualifier from a table name so that only the
@@ -207,6 +221,9 @@ export const detectTransformationType = (tableName: string): TransformationType
   if (bare === 'teleport_pages') {
     return 'custom-page'
   }
+  if (bare === 'teleport_booking_items') {
+    return 'booking-item'
+  }
   return null
 }
 
@@ -245,6 +262,10 @@ export const getTransformationCode = (
       return shared + generateEcommerceProductTransformationCode(options)
     case 'custom-page':
       return shared + generateCustomPageTransformationCode()
+    case 'booking-item':
+      return (
+        shared + generateBookingItemTransformationCode({ categories: options.bookingCategories })
+      )
     default:
       return ''
   }
@@ -380,6 +401,8 @@ export const getTransformWrapperCode = (
       ? 'transformBlogPosts'
       : type === 'custom-page'
       ? 'transformCustomPages'
+      : type === 'booking-item'
+      ? 'transformBookingItems'
       : 'transformEcommerceProducts'
 
   // Products additionally get their purchasable variant combinations attached in

package/src/utils.ts

@@ -7,6 +7,7 @@ import {
   UIDLDataSource,
   DataSourceType,
   ChunkType,
+  UIDLStateDefinition,
 } from '@teleporthq/teleport-types'
 import * as types from '@babel/types'
 import { ASTUtils } from '@teleporthq/teleport-plugin-common'
@@ -15,7 +16,7 @@ import { generateDataSourceFetcherWithCore } from './data-source-fetchers'
 import type { EntityTransformOptions } from './transformations'
 import { DATA_SOURCE_ISR_REVALIDATE_SECONDS } from './isr'
 import { buildServerLocaleParam, hasLocaleParam, buildClientLocaleParam } from './request-locale'
-import { readFixedSort } from './sort-utils'
+import { buildStartingSortsValue, readRepeaterSort, type RepeaterSort } from './sort-utils'
 
 const VALID_DATA_SOURCE_TYPES: DataSourceType[] = [
   'rest-api',
@@ -1180,16 +1181,16 @@ const isSortKeyed = (properties: types.ObjectProperty[]): boolean =>
       (property.key.type === 'Identifier' && property.key.name === 'sorts')
   )
 
-/** The fixed sort of the first list repeater inside a data-source node, if it has one. */
+/** The first list repeater inside a data-source node: the list its rows are fetched for. */
 // tslint:disable-next-line:no-any
-const findRepeaterFixedSort = (node: any): { field: string; order: 'asc' | 'desc' } | undefined => {
+const findListRepeater = (node: any): Record<string, any> | undefined => {
   // tslint:disable-next-line:no-any
-  const visit = (current: any): { field: string; order: 'asc' | 'desc' } | null | undefined => {
+  const visit = (current: any): Record<string, any> | undefined => {
     if (!current || typeof current !== 'object') {
       return undefined
     }
     if (current.type === 'cms-list-repeater') {
-      return readFixedSort(current.content?.sort, current.content?.sortDirection) ?? null
+      return current.content ?? {}
     }
     const content = current.content
     const children = [
@@ -1204,9 +1205,28 @@ const findRepeaterFixedSort = (node: any): { field: string; order: 'asc' | 'desc
     }
     return undefined
   }
-  return visit(node) ?? undefined
+  return visit(node)
 }
 
+/**
+ * The order a list's page fetch carries, in what tells it apart from another
+ * list's fetch with the same params (`claimParamsPropKey`): the column the
+ * editor fixed, or a sort the visitor picks at the values they start with.
+ */
+const prefetchOrderOf = (
+  // tslint:disable-next-line:no-any
+  repeater: Record<string, any> | undefined,
+  sort: RepeaterSort
+): unknown =>
+  sort.fixed ??
+  (sort.dynamic && sort.starting
+    ? {
+        sort: repeater?.sort,
+        sortDirection: repeater?.sortDirection ?? null,
+        starting: sort.starting,
+      }
+    : undefined)
+
 export const extractDataSourceIntoGetStaticProps = (
   node: UIDLDataSourceItemNode | UIDLDataSourceListNode,
   dataSources: Record<string, UIDLDataSource>,
@@ -1217,7 +1237,13 @@ export const extractDataSourceIntoGetStaticProps = (
   dependencies: Record<string, any>,
   dynamicRouteAttr?: string,
   folderPath?: string[],
-  transformOptions: EntityTransformOptions = {}
+  transformOptions: EntityTransformOptions = {},
+  // What the read hands the module after its params: `{ as: 'visitor' }` on
+  // every page but an admin page only trusted readers open (see
+  // `RouteUtils.pageDataReadArguments`).
+  readArguments: () => types.Expression[] = () => [],
+  // The page's states: a list sorted by one is fetched by the value it starts at.
+  stateDefinitions?: Record<string, UIDLStateDefinition>
 ): { success: boolean; chunk?: any } => {
   try {
     // Validate node content
@@ -1281,11 +1307,13 @@ export const extractDataSourceIntoGetStaticProps = (
     }
     // tslint:disable-next-line:no-any
     const nodeResource = (node.content as any).resource
+    const repeater = findListRepeater(node)
+    const repeaterSort = readRepeaterSort(repeater?.sort, repeater?.sortDirection, stateDefinitions)
     const propKey = claimParamsPropKey(
       componentChunk,
       resourcePropKey,
       nodeResource,
-      findRepeaterFixedSort(node)
+      prefetchOrderOf(repeater, repeaterSort)
     )
 
     // Find matching JSX nodes for this data source
@@ -1732,11 +1760,13 @@ export const extractDataSourceIntoGetStaticProps = (
       }
     })
 
-    // The sort the list's repeater fixed, when the resource names none — the
+    // The sort the list's repeater carries, when the resource names none — the
     // rows the page is pre-rendered with come in the order the list shows them
-    // (the browser keeps them: the provider skips its first fetch).
-    const repeaterSort = isSortKeyed(paramsProperties) ? undefined : findRepeaterFixedSort(node)
-    if (repeaterSort) {
+    // (the browser keeps them: the provider skips its first fetch). A sort the
+    // visitor picks is fetched as they start with it, by the browser's own sort
+    // expression (`buildStartingSortsValue`), and the list keeps the rows only
+    // while the sort stays there (`seedPlainListWhileSortStarts`).
+    if (!isSortKeyed(paramsProperties) && repeaterSort.fixed) {
       paramsProperties.push(
         types.objectProperty(
           types.stringLiteral('sorts'),
@@ -1747,11 +1777,11 @@ export const extractDataSourceIntoGetStaticProps = (
                 types.objectExpression([
                   types.objectProperty(
                     types.identifier('field'),
-                    types.stringLiteral(repeaterSort.field)
+                    types.stringLiteral(repeaterSort.fixed.field)
                   ),
                   types.objectProperty(
                     types.identifier('order'),
-                    types.stringLiteral(repeaterSort.order)
+                    types.stringLiteral(repeaterSort.fixed.order)
                   ),
                 ]),
               ]),
@@ -1759,6 +1789,13 @@ export const extractDataSourceIntoGetStaticProps = (
           )
         )
       )
+    } else if (!isSortKeyed(paramsProperties) && repeaterSort.dynamic && repeaterSort.starting) {
+      paramsProperties.push(
+        types.objectProperty(
+          types.stringLiteral('sorts'),
+          buildStartingSortsValue(repeaterSort.dynamic, repeaterSort.starting)
+        )
+      )
     }
 
     // getStaticProps runs once per language: the prefetch is for that language.
@@ -1768,7 +1805,7 @@ export const extractDataSourceIntoGetStaticProps = (
 
     const fetchCallExpression = types.callExpression(
       types.memberExpression(types.identifier(fetcherImportName), types.identifier('fetchData')),
-      [types.objectExpression(paramsProperties)]
+      [types.objectExpression(paramsProperties), ...readArguments()]
     )
 
     const safeFetchExpression = createSafeFetchExpression(fetchCallExpression, propKey)
@@ -1925,12 +1962,12 @@ const claimParamsPropKey = (
   componentChunk: ChunkDefinition,
   resourcePropKey: string,
   resource: { params?: Record<string, unknown> } | undefined,
-  // The list's own fixed sort rides on its prefetch too (see the params below).
-  repeaterSort?: { field: string; order: string }
+  // The list's own sort rides on its prefetch too (`prefetchOrderOf`).
+  prefetchOrder?: unknown
 ): string => {
   const meta = componentChunk.meta as { dataSourcePropKeyParams?: Record<string, string> }
   const claimed = meta.dataSourcePropKeyParams ?? (meta.dataSourcePropKeyParams = {})
-  const signature = JSON.stringify([resource?.params ?? {}, repeaterSort ?? null])
+  const signature = JSON.stringify([resource?.params ?? {}, prefetchOrder ?? null])
 
   let propKey = resourcePropKey
   for (let suffix = 2; claimed[propKey] !== undefined && claimed[propKey] !== signature; suffix++) {