From d72fd72c404900921a8f2bdda8c3a157d4cd389a Mon Sep 17 00:00:00 2001
From: Luis Almeida <lmg.almeida@gmail.com>
Date: Wed, 28 Aug 2024 10:29:31 +0200
Subject: [PATCH 1/7] wip

---
 .../src/commands/themes/migrate.ts            | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 packages/zcli-themes/src/commands/themes/migrate.ts

diff --git a/packages/zcli-themes/src/commands/themes/migrate.ts b/packages/zcli-themes/src/commands/themes/migrate.ts
new file mode 100644
index 00000000..ce4c7d07
--- /dev/null
+++ b/packages/zcli-themes/src/commands/themes/migrate.ts
@@ -0,0 +1,55 @@
+import { Command, Flags, CliUx } from '@oclif/core'
+import * as path from 'path'
+import * as chalk from 'chalk'
+import { CLIError } from '@oclif/core/lib/errors'
+import getManifest from '../../lib/getManifest'
+
+export default class Migrate extends Command {
+  static description = 'migrate a theme to the latest api_version'
+
+  static enableJsonFlag = true
+
+  static flags = {
+    backwardCompatible: Flags.boolean({ default: true, description: 'Use the new api but keep existing functionality and customizations', allowNo: true })
+  }
+
+  static args = [
+    { name: 'themeDirectory', required: true, default: '.' }
+  ]
+
+  static examples = [
+    '$ zcli themes:migrate --backwardCompatible=false'
+  ]
+
+  static strict = false
+
+  async run () {
+    const { flags: { backwardCompatible }, argv: [themeDirectory] } = await this.parse(Migrate)
+    const themePath = path.resolve(themeDirectory)
+    const { api_version: apiVersion } = getManifest(themePath)
+
+    try {
+      CliUx.ux.action.start('Migrating theme')
+      switch (apiVersion) {
+      case 1:
+      case 2: {
+        this.log(chalk.green('Migration from version 1 and 2 coming soon'))
+        break
+      }
+      case 3: {
+        // implement
+        break
+      }
+      case 4: {
+        this.log(chalk.green('Theme is already using the latest available api_version'))
+        break
+      }
+      default:
+        break
+      }
+      return {}
+    } catch (error) {
+      console.log(error)
+    }
+  }
+}

From 6abad52dd5321b2fa01c0bfdae58f377f84c04ee Mon Sep 17 00:00:00 2001
From: Luis Almeida <lmg.almeida@gmail.com>
Date: Thu, 29 Aug 2024 11:04:28 +0200
Subject: [PATCH 2/7] wip

---
 .../macros/new_request_page/follow_up.hbs     |   3 +
 .../macros/new_request_page/request_form.hbs  | 297 ++++++++++++++++++
 .../src/commands/themes/migrate.ts            |   3 +-
 packages/zcli-themes/src/lib/migrate.ts       |  36 +++
 4 files changed, 338 insertions(+), 1 deletion(-)
 create mode 100644 packages/zcli-themes/macros/new_request_page/follow_up.hbs
 create mode 100644 packages/zcli-themes/macros/new_request_page/request_form.hbs
 create mode 100644 packages/zcli-themes/src/lib/migrate.ts

diff --git a/packages/zcli-themes/macros/new_request_page/follow_up.hbs b/packages/zcli-themes/macros/new_request_page/follow_up.hbs
new file mode 100644
index 00000000..100cb96f
--- /dev/null
+++ b/packages/zcli-themes/macros/new_request_page/follow_up.hbs
@@ -0,0 +1,3 @@
+{{#with parent}}
+  Follow-up to <a href="{{url}}">request #{{id}}</a>
+{{/with}}
diff --git a/packages/zcli-themes/macros/new_request_page/request_form.hbs b/packages/zcli-themes/macros/new_request_page/request_form.hbs
new file mode 100644
index 00000000..cdcf91df
--- /dev/null
+++ b/packages/zcli-themes/macros/new_request_page/request_form.hbs
@@ -0,0 +1,297 @@
+{{#with new_request_form}}
+  <form id="new_request" class="request-form" action="{{action}}" accept-charset="{{accept_charset}}" method="{{http_method}}" data-form="" data-form-type="request">
+    <input name="utf8" type="hidden" value="✓" autocomplete="off">
+
+      {{#if errors}}
+        <div class="notification notification-error notification-inline notification-large">
+          {{errors}}
+        </div>
+      {{/if}}
+
+      {{#with ticket_form_field}}
+        {{#if (compare options.length "==" 1)}}
+          <input type="hidden" name="{{name}}" id="request_ticket_form_id" value="{{value}}" autocomplete="off">
+        {{/if}}
+        {{#if (compare options.length ">" 1)}}
+          <div class="form-field select optional request_ticket_form_id">
+            <label for="request_issue_type_select">{{label}}</label>
+            <select name="{{name}}" id="request_issue_type_select" aria-label="{{label}}" autofocus="autofocus" style="display: none;">
+              <option data-url="https://z3nluis999.zendesk-staging.com/hc/en-us/requests/new" value="-">-</option>
+              {{#each options}}
+                <option data-url="https://z3nluis999.zendesk-staging.com/hc/en-us/requests/new?ticket_form_id={{value}}" value="{{value}}" {{#is value ../value}} selected="selected" {{/is}}>
+                  {{name}}
+                </option>
+              {{/each}}
+            </select>
+          </div>
+        {{/if}}
+      {{/with}}
+
+      {{#with email_field}}
+        <div class="form-field string required request_anonymous_requester_email">
+          <label for="request_anonymous_requester_email">{{label}}</label>
+          <input type="text" name="{{name}}" id="request_anonymous_requester_email" value="{{value}}" aria-required="true" aria-describedby="request_anonymous_requester_email_error">
+          {{#if error}}
+            <div id="request_anonymous_requester_email_error" class="notification notification-error notification-inline">
+              {{error}}
+            </div>
+          {{/if}}
+        </div>
+      {{/with}}
+
+      {{#with cc_field}}
+        <div class="form-field string optional request_cc_emails">
+          <label for="request_collaborators_">{{label}}<span class="optional">({{t 'optional'}})</span></label>
+          <input type="text" name="{{name}}" id="request_collaborators_" value="{{value}}" autocomplete="off" aria-required="false" aria-describedby="request_collaborators_error" />
+          {{#if error}}
+            <div class="notification notification-error notification-inline" id="request_collaborators_error">{{error}}</div>
+          {{else}}
+            <div class="notification notification-error notification-inline" aria-hidden="true"></div>
+          {{/if}}
+        </div>
+      {{/with}}
+
+      {{#with organization_field}}
+        <div class="form-field select optional request_organization_id">
+          <label id="request_organization_id_label" for="request_organization_id">{{label}}</label>
+          <select name="{{name}}" id="request_organization_id" aria-required="{{required}}" aria-describedby="request_organization_id_hint" aria-labelledby="request_organization_id_label">
+            {{#each options}}
+              <!-- TODO: selected not working because value (number) !== ../value (string) -->
+              <option value="{{value}}" {{#is value ../value}} selected="selected" {{/is}}>{{name}}</option> 
+            {{/each}}
+          </select>
+        </div>
+      {{/with}}
+
+      {{#each ticket_fields}}
+
+        {{#is type "subject"}}
+          <div class="form-field string {{#if required}} required {{else}} optional {{/if}} request_subject">
+            <label id="request_subject_label" for="request_subject">{{label}}{{#unless required}}<span class="optional">({{t 'optional'}})</span>{{/unless}}</label>
+            <input type="text" name="{{name}}" id="request_subject" value="{{value}}" maxlength="150" size="150" aria-required="{{required}}" aria-labelledby="request_subject_label"> <!-- TODO: aria-labelledby -->
+            {{#if error}}
+              <div class="notification notification-error notification-inline" id="request_subject_error">{{error}}</div>
+            {{/if}}
+            {{#if description}}
+              <p id="request_subject_hint">{{description}}</p>
+            {{/if}}
+          </div>
+          <div class="suggestion-list" data-hc-class="searchbox" data-hc-suggestion-list="true"></div>  <!-- TODO: suggestion to use open apis -->
+        {{/is}}
+        
+        {{#is type "description"}}
+          <div class="form-field text {{#if required}} required {{else}} optional {{/if}} request_description">
+            <label id="request_description_label" for="request_description">{{label}}{{#unless required}}<span class="optional">({{t 'optional'}})</span>{{/unless}}</label>
+            <!-- TODO: aria-labelledby -->
+            <!-- TODO: data-helper="wysiwig" read from helper option -->
+            <textarea name="{{name}}" id="request_description" aria-required="{{required}}" aria-describedby="request_description_hint" aria-labelledby="request_description_label" {{#if false}} data-helper="wysiwyg" {{/if}}>{{value}}</textarea>
+            <!-- TODO: value="text/html" : "text/plain" read from helper option -->
+            <input type="hidden" name="{{../description_mimetype_field.name}}" id="request_description_mimetype" value="text/plain" style="display: none;" autocomplete="off">
+            {{#if error}}
+              <div class="notification notification-error notification-inline" id="request_description_error">{{error}}</div>
+            {{/if}}
+            <p id="request_description_hint">{{description}}</p>
+          </div>
+        {{/is}}
+
+        {{#is type "tickettype"}}
+          <div class="form-field select {{#if required}} required {{else}} optional {{/if}} request_type">
+            <label id="request_type_label" for="request_type">{{label}}{{#unless required}}<span class="optional">({{t 'optional'}})</span>{{/unless}}</label>
+            <!-- TODO: aria-labelledby -->
+            <select name="{{name}}" id="request_type" aria-required="{{required}}" aria-describedby="request_type_hint" aria-labelledby="request_type_label">
+              <option value="-">-</option>
+              {{#each options}}
+                <option value="{{value}}" {{#is value ../value}} selected="selected" {{/is}}>{{name}}</option>
+              {{/each}}
+            </select>
+            {{#if error}}
+              <div class="notification notification-error notification-inline" id="request_type_error">{{error}}</div>
+            {{/if}}
+            {{#if description}}
+              <p id="request_type_hint">{{description}}</p>
+            {{/if}}
+          </div>
+          {{!-- "due date" is a special request field that should appear right after the "tickettype" field. --}}
+          {{#with ../due_date_field}}
+            <div class="form-field string {{#if required}} required {{else}} optional {{/if}} request_due_at" data-due-date hidden>
+              <label id="request_due_at_label" for="request_due_at">{{label}}{{#unless required}}<span class="optional">({{t 'optional'}})</span>{{/unless}}</label>
+              <input type="text" name="{{name}}" value="{{value}}" id="request_due_at" data-datepicker="" class="datepicker" aria-required="{{required}}" aria-labelledby="request_due_at_label" /> <!-- TODO: aria-labelledby -->
+              {{#if error}}
+                <div class="notification notification-error notification-inline" id="request_due_at_error">{{error}}</div>
+              {{/if}}
+              {{#if description}}
+                <p id="request_due_at_hint">{{description}}</p>
+              {{/if}}
+            </div>
+          {{/with}}
+        {{/is}}
+
+        {{#is type "priority"}}  <!-- TODO: repeat with  -->
+          <div class="form-field select {{#if required}} required {{else}} optional {{/if}} request_priority">
+            <label id="request_priority_label" for="request_priority">{{label}}{{#unless required}}<span class="optional">({{t 'optional'}})</span>{{/unless}}</label>
+            <!-- TODO: aria-labelledby -->
+            <select name="{{name}}" id="request_priority" aria-required="{{required}}" aria-describedby="request_priority_hint" aria-labelledby="request_priority_label">
+              <option value="-">-</option>
+              {{#each options}}
+                <option value="{{value}}" {{#is value ../value}} selected="selected" {{/is}}>{{name}}</option>
+              {{/each}}
+            </select>
+            {{#if error}}
+              <div class="notification notification-error notification-inline" id="request_priority_error">{{error}}</div>
+            {{/if}}
+            {{#if description}}
+              <p id="request_priority_hint">{{description}}</p>
+            {{/if}}
+          </div>
+        {{/is}}
+
+        {{!-- TODO: fix --}}
+        {{#is type "tagger"}}
+          <div class="form-field string {{#if required}} required {{else}} optional {{/if}} request_custom_fields_{{id}}">
+            <label id="request_custom_fields_{{id}}_label" for="request_custom_fields_{{id}}">{{label}}{{#unless required}}<span class="optional">({{t 'optional'}})</span>{{/unless}}</label>
+              <!-- TODO: data-tagger -->
+              <!-- TODO: aria-labelledby -->
+            <input type="hidden" name="{{name}}" id="request_custom_fields_{{id}}" value="{{value}}" autocomplete="off" data-tagger="" aria-required="{{required}}" aria-labelledby="request_custom_fields_{{id}}_label">
+            {{#if error}}
+              <div class="notification notification-error notification-inline" id="request_custom_fields_{{id}}_error">{{error}}</div>
+            {{/if}}
+            {{#if description}}
+              <p id="request_custom_fields_{{id}}_hint">{{description}}</p>
+            {{/if}}
+          </div>
+        {{/is}}
+
+        {{!-- TODO: fix --}}
+        {{#is type "multiselect"}}
+          <div class="form-field string {{#if required}} required {{else}} optional {{/if}} request_custom_fields_{{id}}">
+            <label id="request_custom_fields_{{id}}_label" for="request_custom_fields_{{id}}">{{label}}{{#unless required}}<span class="optional">({{t 'optional'}})</span>{{/unless}}</label>
+              <!-- TODO: data-multiselect -->
+              <!-- TODO: aria-labelledby -->
+            <input type="hidden" name="{{name}}" id="request_custom_fields_{{id}}" value="{{value}}" autocomplete="off" data-multiselect="" aria-required="{{required}}" aria-labelledby="request_custom_fields_{{id}}_label">
+            {{#if error}}
+              <div class="notification notification-error notification-inline" id="request_custom_fields_{{id}}_error">{{error}}</div>
+            {{/if}}
+            {{#if description}}
+              <p id="request_custom_fields_{{id}}_hint">{{description}}</p>
+            {{/if}}
+          </div>
+        {{/is}}
+
+        {{#is type "text"}}
+          <div class="form-field string {{#if required}} required {{else}} optional {{/if}} request_custom_fields_{{id}}">
+            <label id="request_custom_fields_{{id}}_label" for="request_custom_fields_{{id}}">{{label}}{{#unless required}}<span class="optional">({{t 'optional'}})</span>{{/unless}}</label>
+            <input type="text" name="{{name}}" id="request_custom_fields_{{id}}" value="{{value}}" aria-required="{{required}}" aria-labelledby="request_custom_fields_{{id}}_label"> <!-- TODO: aria-labelledby -->
+            {{#if error}}
+              <div class="notification notification-error notification-inline" id="request_custom_fields_{{id}}_error">{{error}}</div>
+            {{/if}}
+            {{#if description}}
+              <p id="request_custom_fields_{{id}}_hint">{{description}}</p>
+            {{/if}}
+          </div>
+        {{/is}}
+
+        {{#is type "textarea"}}
+          <div class="form-field text {{#if required}} required {{else}} optional {{/if}} request_custom_fields_{{id}}">
+            <label id="request_custom_fields_{{id}}_label" for="request_custom_fields_{{id}}">{{label}}{{#unless required}}<span class="optional">({{t 'optional'}})</span>{{/unless}}</label>
+            <textarea name="{{name}}" id="request_custom_fields_{{id}}" aria-required="{{required}}" aria-labelledby="request_custom_fields_{{id}}_label">{{value}}</textarea> <!-- TODO: aria-labelledby -->
+            {{#if error}}
+              <div class="notification notification-error notification-inline" id="request_custom_fields_{{id}}_error">{{error}}</div>
+            {{/if}}
+            {{#if description}}
+              <p id="request_custom_fields_{{id}}_hint">{{description}}</p>
+            {{/if}}
+          </div>
+        {{/is}}
+
+        {{#is type "integer"}}
+          <div class="form-field string {{#if required}} required {{else}} optional {{/if}} request_custom_fields_{{id}}">
+            <label id="request_custom_fields_{{id}}_label" for="request_custom_fields_{{id}}">{{label}}{{#unless required}}<span class="optional">({{t 'optional'}})</span>{{/unless}}</label>
+            <input type="number" name="{{name}}" id="request_custom_fields_{{id}}" step="1" value="{{value}}" aria-required="{{required}}" aria-labelledby="request_custom_fields_{{id}}_label"> <!-- TODO: aria-labelledby -->
+            {{#if error}}
+              <div class="notification notification-error notification-inline" id="request_custom_fields_{{id}}_error">{{error}}</div>
+            {{/if}}
+            {{#if description}}
+              <p id="request_custom_fields_{{id}}_hint">{{description}}</p>
+            {{/if}}
+          </div>
+        {{/is}}
+
+        {{#is type "decimal"}}
+          <div class="form-field decimal {{#if required}} required {{else}} optional {{/if}} request_custom_fields_{{id}}">
+            <label id="request_custom_fields_{{id}}_label" for="request_custom_fields_{{id}}">{{label}}{{#unless required}}<span class="optional">({{t 'optional'}})</span>{{/unless}}</label>
+            <input type="number" name="{{name}}" id="request_custom_fields_{{id}}" step="any" value="{{value}}" aria-required="{{required}}" aria-labelledby="request_custom_fields_{{id}}_label"> <!-- TODO: aria-labelledby -->
+            {{#if error}}
+              <div class="notification notification-error notification-inline" id="request_custom_fields_{{id}}_error">{{error}}</div>
+            {{/if}}
+            {{#if description}}
+              <p id="request_custom_fields_{{id}}_hint">{{description}}</p>
+            {{/if}}
+          </div>
+        {{/is}}
+
+        {{#is type "checkbox"}}
+          <div class="form-field boolean {{#if required}} required {{else}} optional {{/if}} request_custom_fields_{{id}}">
+            <label id="request_custom_fields_{{id}}_label" for="request_custom_fields_{{id}}">{{label}}{{#unless required}}<span class="optional">({{t 'optional'}})</span>{{/unless}}</label>
+            <input name="{{name}}" type="hidden" value="off" autocomplete="off">
+            <input type="checkbox" name="{{name}}" id="request_custom_fields_{{id}}" value="on" {{#if value}}checked="checked"{{/if}} aria-required="{{required}}" aria-labelledby="request_custom_fields_{{id}}_label"> <!-- TODO: aria-labelledby -->
+            {{#if error}}
+              <div class="notification notification-error notification-inline" id="request_custom_fields_{{id}}_error">{{error}}</div>
+            {{/if}}
+            {{#if description}}
+              <p id="request_custom_fields_{{id}}_hint">{{description}}</p>
+            {{/if}}
+          </div>
+        {{/is}}
+
+        {{#is type "date"}}
+          <div class="form-field string {{#if required}} required {{else}} optional {{/if}} request_custom_fields_{{id}}">
+            <label id="request_custom_fields_{{id}}_label" for="request_custom_fields_{{id}}">{{label}}{{#unless required}}<span class="optional">({{t 'optional'}})</span>{{/unless}}</label>
+            <input type="text" name="{{name}}" id="request_custom_fields_{{id}}" value="{{value}}" data-datepicker="" data-format="YYYY-MM-DD" class="datepicker" aria-required="{{required}}" aria-labelledby="request_custom_fields_{{id}}_label"> <!-- TODO: aria-labelledby -->
+            {{#if error}}
+              <div class="notification notification-error notification-inline" id="request_custom_fields_{{id}}_error">{{error}}</div>
+            {{/if}}
+            {{#if description}}
+              <p id="request_custom_fields_{{id}}_hint">{{description}}</p>
+            {{/if}}
+          </div>
+        {{/is}}
+
+        {{#is type "regexp"}}
+          <div class="form-field string {{#if required}} required {{else}} optional {{/if}} request_custom_fields_{{id}}">
+            <label id="request_custom_fields_{{id}}_label" for="request_custom_fields_{{id}}">{{label}}{{#unless required}}<span class="optional">({{t 'optional'}})</span>{{/unless}}</label>
+            <input type="text" name="{{name}}" id="request_custom_fields_{{id}}" value="{{value}}" aria-required="{{required}}" aria-labelledby="request_custom_fields_{{id}}_label"> <!-- TODO: aria-labelledby -->
+            {{#if error}}
+              <div class="notification notification-error notification-inline" id="request_custom_fields_{{id}}_error">{{error}}</div>
+            {{/if}}
+            {{#if description}}
+              <p id="request_custom_fields_{{id}}_hint">{{description}}</p>
+            {{/if}}
+          </div>
+        {{/is}}
+
+      {{/each}}
+
+      {{!--
+        {{conditional_fields}}
+
+        {{attachments_field}}
+
+        {{captcha_field}}
+        {{#if captcha_error_message}}
+          <div class="notification notification-error notification-inline">
+            {{captcha_error_message}}
+          </div>
+        {{/if}}
+
+        {{#if upload_error_message}}
+          <div class="notification notification-error notification-inline">
+            {{upload_error_message}}
+          </div>
+        {{/if}}          
+      --}}
+
+      <footer>
+        <input type="submit" name="commit" value="{{t 'submit'}}">
+      </footer>
+  </form>
+{{/with}}
diff --git a/packages/zcli-themes/src/commands/themes/migrate.ts b/packages/zcli-themes/src/commands/themes/migrate.ts
index ce4c7d07..10a0f9df 100644
--- a/packages/zcli-themes/src/commands/themes/migrate.ts
+++ b/packages/zcli-themes/src/commands/themes/migrate.ts
@@ -3,6 +3,7 @@ import * as path from 'path'
 import * as chalk from 'chalk'
 import { CLIError } from '@oclif/core/lib/errors'
 import getManifest from '../../lib/getManifest'
+import migrate from '../../lib/migrate'
 
 export default class Migrate extends Command {
   static description = 'migrate a theme to the latest api_version'
@@ -37,7 +38,7 @@ export default class Migrate extends Command {
         break
       }
       case 3: {
-        // implement
+        migrate(themePath)
         break
       }
       case 4: {
diff --git a/packages/zcli-themes/src/lib/migrate.ts b/packages/zcli-themes/src/lib/migrate.ts
new file mode 100644
index 00000000..320dc957
--- /dev/null
+++ b/packages/zcli-themes/src/lib/migrate.ts
@@ -0,0 +1,36 @@
+import * as path from 'path'
+import * as fs from 'fs'
+import { globSync } from 'glob'
+import getManifest from './getManifest'
+import getTemplates from './getTemplates'
+
+export default async function migrate (themePath: string): Promise<string | void> {
+  migrateManifest(themePath)
+  migrateTemplates(themePath)
+}
+
+function migrateManifest (themePath: string) {
+  const manifest = getManifest(themePath)
+
+  manifest.api_version = 4
+
+  fs.writeFileSync(`${themePath}/manifest.json`, JSON.stringify(manifest, null, 2) + '\n')
+}
+
+function migrateTemplates (themePath: string) {
+  const templates = getTemplates(themePath)
+  const macrosPath = path.join(__dirname, '..', '..', 'macros')
+
+  for (const dentifier of Object.keys(templates)) {
+    let template = templates[dentifier]
+    const macros = globSync(`${macrosPath}/${dentifier}/*.hbs`.replace(/\\/g, '/'), { posix: true })
+
+    for (const macro of macros) {
+      const source = fs.readFileSync(macro, 'utf8')
+      const { name: helper } = path.parse(macro)
+      template = template.replace(`{{${helper}}}`, source)
+    }
+
+    fs.writeFileSync(`${themePath}/templates/${dentifier}.hbs`, template)
+  }
+}

From abde0fcd5de9169b0cfb7cdbac0b03a966e53bf3 Mon Sep 17 00:00:00 2001
From: Luis Almeida <lmg.almeida@gmail.com>
Date: Fri, 30 Aug 2024 11:04:17 +0200
Subject: [PATCH 3/7] wip

---
 packages/zcli-themes/src/lib/migrate.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/zcli-themes/src/lib/migrate.ts b/packages/zcli-themes/src/lib/migrate.ts
index 320dc957..5dd52501 100644
--- a/packages/zcli-themes/src/lib/migrate.ts
+++ b/packages/zcli-themes/src/lib/migrate.ts
@@ -28,7 +28,7 @@ function migrateTemplates (themePath: string) {
     for (const macro of macros) {
       const source = fs.readFileSync(macro, 'utf8')
       const { name: helper } = path.parse(macro)
-      template = template.replace(`{{${helper}}}`, source)
+      template = template.replace(new RegExp(`{{${helper}.*}}`), source)
     }
 
     fs.writeFileSync(`${themePath}/templates/${dentifier}.hbs`, template)

From fceb67c10b4418f7d1cbc00c85318ee7cf3e4b50 Mon Sep 17 00:00:00 2001
From: BrunoBFerreira <bruno.ferreira@zendesk.com>
Date: Fri, 30 Aug 2024 10:26:23 +0100
Subject: [PATCH 4/7] Add migrate theme without backwards compatibility

---
 .../src/commands/themes/migrate.ts            | 22 +++++---
 .../zcli-themes/src/lib/migrateNoBackwards.ts | 52 +++++++++++++++++++
 .../src/templates/request_form_module.hbs     | 31 +++++++++++
 3 files changed, 99 insertions(+), 6 deletions(-)
 create mode 100644 packages/zcli-themes/src/lib/migrateNoBackwards.ts
 create mode 100644 packages/zcli-themes/src/templates/request_form_module.hbs

diff --git a/packages/zcli-themes/src/commands/themes/migrate.ts b/packages/zcli-themes/src/commands/themes/migrate.ts
index 10a0f9df..a12b1cc3 100644
--- a/packages/zcli-themes/src/commands/themes/migrate.ts
+++ b/packages/zcli-themes/src/commands/themes/migrate.ts
@@ -1,9 +1,9 @@
 import { Command, Flags, CliUx } from '@oclif/core'
 import * as path from 'path'
 import * as chalk from 'chalk'
-import { CLIError } from '@oclif/core/lib/errors'
 import getManifest from '../../lib/getManifest'
 import migrate from '../../lib/migrate'
+import migrateNoBackwards from '../../lib/migrateNoBackwards'
 
 export default class Migrate extends Command {
   static description = 'migrate a theme to the latest api_version'
@@ -11,7 +11,7 @@ export default class Migrate extends Command {
   static enableJsonFlag = true
 
   static flags = {
-    backwardCompatible: Flags.boolean({ default: true, description: 'Use the new api but keep existing functionality and customizations', allowNo: true })
+    backwardCompatible: Flags.boolean({ default: false, description: 'Use the new api but keep existing functionality and customizations', allowNo: true })
   }
 
   static args = [
@@ -19,15 +19,18 @@ export default class Migrate extends Command {
   ]
 
   static examples = [
-    '$ zcli themes:migrate --backwardCompatible=false'
+    '$ zcli themes:migrate ./copenhagen_theme --backwardCompatible'
   ]
 
   static strict = false
 
   async run () {
-    const { flags: { backwardCompatible }, argv: [themeDirectory] } = await this.parse(Migrate)
+    const { flags, argv: [themeDirectory] } = await this.parse(Migrate)
+    const { backwardCompatible } = flags
     const themePath = path.resolve(themeDirectory)
-    const { api_version: apiVersion } = getManifest(themePath)
+    const manifest = getManifest(themePath)
+
+    const { api_version: apiVersion } = manifest
 
     try {
       CliUx.ux.action.start('Migrating theme')
@@ -38,7 +41,14 @@ export default class Migrate extends Command {
         break
       }
       case 3: {
-        migrate(themePath)
+        if (backwardCompatible) {
+          migrate(themePath)
+        } else {
+          this.log(chalk.green('Migrating version 3 without backward compatibility'))
+
+          migrateNoBackwards(themePath, manifest)
+        }
+
         break
       }
       case 4: {
diff --git a/packages/zcli-themes/src/lib/migrateNoBackwards.ts b/packages/zcli-themes/src/lib/migrateNoBackwards.ts
new file mode 100644
index 00000000..579f38c2
--- /dev/null
+++ b/packages/zcli-themes/src/lib/migrateNoBackwards.ts
@@ -0,0 +1,52 @@
+import * as path from 'path'
+import * as fs from 'fs'
+import type { Manifest } from '../types'
+import * as chalk from 'chalk'
+import { CLIError } from '@oclif/core/lib/errors'
+
+export default function migrateNoBackwards (themePath: string, manifest: Manifest): void {
+  const newDir = themePath + '/updated-theme'
+
+  if (!fs.existsSync(newDir)) {
+    fs.mkdirSync(newDir)
+  }
+
+  updateOrCreateManifest(newDir, manifest)
+  updateNewRequestTemplate(themePath, newDir)
+}
+
+function updateOrCreateManifest (themePath: string, manifestContent: Manifest): void {
+  const updated_manifest = manifestContent
+  updated_manifest.api_version = 4
+
+  const manifestFilePath = `${themePath}/manifest.json`
+
+  try {
+    fs.writeFileSync(manifestFilePath, JSON.stringify(updated_manifest, null, 2), { flag: 'w' })
+  } catch (error) {
+    throw new CLIError(chalk.red(`manifest.json file was malformed at path: "${manifestFilePath}"`))
+  }
+}
+
+function updateNewRequestTemplate (themePath: string, updatedThemePath: string): void {
+  const templateFilePath = `${themePath}/templates/new_request_page.hbs`
+  const updatedTemplatesPath = `${updatedThemePath}/templates`
+  const updatedTemplateFilePath = `${updatedTemplatesPath}/new_request_page.hbs`
+  const additionalModuleFilePath = path.join(__dirname, '..', 'templates', 'request_form_module.hbs')
+
+  try {
+    if (!fs.existsSync(updatedTemplatesPath)) {
+      fs.mkdirSync(updatedTemplatesPath)
+    }
+
+    const templateFile = fs.readFileSync(templateFilePath, 'utf-8')
+    let updatedFile = templateFile.replace(/\n\s*<span class="follow-up-hint"[^>]*>([\s\S]*?)<\/span>/g, '')
+    updatedFile = updatedFile.replace(/{{request_form .*}}/g, '<div id="new-request-form"></div>')
+
+    const additionalModule = fs.readFileSync(additionalModuleFilePath, 'utf-8')
+    fs.writeFileSync(updatedTemplateFilePath, updatedFile + additionalModule, { flag: 'w' })
+  } catch (error) {
+    console.log(error)
+    throw new CLIError(chalk.red(`manifest.json file was malformed at path: "${templateFilePath}"`))
+  }
+}
diff --git a/packages/zcli-themes/src/templates/request_form_module.hbs b/packages/zcli-themes/src/templates/request_form_module.hbs
new file mode 100644
index 00000000..579b4020
--- /dev/null
+++ b/packages/zcli-themes/src/templates/request_form_module.hbs
@@ -0,0 +1,31 @@
+
+<script type="module">
+  import { renderNewRequestForm } from "new-request-form";
+
+  const container = document.getElementById("new-request-form");
+
+  const settings = {{json settings}};
+
+  const props = {
+    requestForm: {{json new_request_form}},
+    newRequestPath: {{json (page_path 'new_request')}},
+    parentId: {{json parent.id}},
+    parentIdPath: {{json parent.url}},
+    locale: {{json help_center.locale}},
+    baseLocale: {{json help_center.base_locale}},
+    hasAtMentions: {{json help_center.at_mentions_enabled}},
+    userRole: {{json user.role}},
+    brandId: {{json brand.id}},
+    wysiwyg: true,
+    answerBotModal: {
+      answerBot: {{json answer_bot}},
+      hasRequestManagement: {{json help_center.request_management_enabled}},
+      isSignedIn: {{json signed_in}},
+      helpCenterPath: {{json (page_path 'help_center')}},
+      requestsPath: {{json (page_path 'requests')}},
+      requestPath: {{json (page_path 'request' id=answer_bot.request_id)}}
+    },
+  };
+
+  renderNewRequestForm(settings, props, container);
+</script>

From 764ca89e32c469ce4fc7e400ddf8e3ba5dd1ffec Mon Sep 17 00:00:00 2001
From: BrunoBFerreira <bruno.ferreira@zendesk.com>
Date: Thu, 29 Aug 2024 17:54:38 +0100
Subject: [PATCH 5/7] Remove articles, articles_count and more_articles from
 categories

---
 .../zcli-themes/src/lib/migrateNoBackwards.ts | 83 ++++++++++++++++++-
 .../src/templates/document_head_scripts.hbs   | 25 ++++++
 ...orm_module.hbs => request_form_script.hbs} |  0
 3 files changed, 105 insertions(+), 3 deletions(-)
 create mode 100644 packages/zcli-themes/src/templates/document_head_scripts.hbs
 rename packages/zcli-themes/src/templates/{request_form_module.hbs => request_form_script.hbs} (100%)

diff --git a/packages/zcli-themes/src/lib/migrateNoBackwards.ts b/packages/zcli-themes/src/lib/migrateNoBackwards.ts
index 579f38c2..2d11f423 100644
--- a/packages/zcli-themes/src/lib/migrateNoBackwards.ts
+++ b/packages/zcli-themes/src/lib/migrateNoBackwards.ts
@@ -13,6 +13,8 @@ export default function migrateNoBackwards (themePath: string, manifest: Manifes
 
   updateOrCreateManifest(newDir, manifest)
   updateNewRequestTemplate(themePath, newDir)
+  updateDocumentHeadTemplate(themePath, newDir)
+  updateHomePageTemplate(themePath, newDir)
 }
 
 function updateOrCreateManifest (themePath: string, manifestContent: Manifest): void {
@@ -32,7 +34,7 @@ function updateNewRequestTemplate (themePath: string, updatedThemePath: string):
   const templateFilePath = `${themePath}/templates/new_request_page.hbs`
   const updatedTemplatesPath = `${updatedThemePath}/templates`
   const updatedTemplateFilePath = `${updatedTemplatesPath}/new_request_page.hbs`
-  const additionalModuleFilePath = path.join(__dirname, '..', 'templates', 'request_form_module.hbs')
+  const additionalModuleFilePath = path.join(__dirname, '..', 'templates', 'request_form_script.hbs')
 
   try {
     if (!fs.existsSync(updatedTemplatesPath)) {
@@ -46,7 +48,82 @@ function updateNewRequestTemplate (themePath: string, updatedThemePath: string):
     const additionalModule = fs.readFileSync(additionalModuleFilePath, 'utf-8')
     fs.writeFileSync(updatedTemplateFilePath, updatedFile + additionalModule, { flag: 'w' })
   } catch (error) {
-    console.log(error)
-    throw new CLIError(chalk.red(`manifest.json file was malformed at path: "${templateFilePath}"`))
+    throw new CLIError(chalk.red(`file was malformed at path: "${updatedTemplateFilePath}"`))
+  }
+}
+
+function updateDocumentHeadTemplate (themePath: string, updatedThemePath: string): void {
+  const templateFilePath = `${themePath}/templates/document_head.hbs`
+  const updatedTemplatesPath = `${updatedThemePath}/templates`
+  const updatedTemplateFilePath = `${updatedTemplatesPath}/document_head.hbs`
+  const additionalScriptsFilePath = path.join(__dirname, '..', 'templates', 'document_head_scripts.hbs')
+
+  try {
+    if (!fs.existsSync(updatedTemplatesPath)) {
+      fs.mkdirSync(updatedTemplatesPath)
+    }
+
+    const templateFile = fs.readFileSync(templateFilePath, 'utf-8')
+    const additionalModule = fs.readFileSync(additionalScriptsFilePath, 'utf-8')
+    fs.writeFileSync(updatedTemplateFilePath, templateFile + additionalModule, { flag: 'w' })
+  } catch (error) {
+    throw new CLIError(chalk.red(`file was malformed at path: "${updatedTemplateFilePath}"`))
+  }
+}
+
+function updateHomePageTemplate (themePath: string, updatedThemePath: string): void {
+  const templateFilePath = `${themePath}/templates/home_page.hbs`
+  const updatedTemplatesPath = `${updatedThemePath}/templates`
+  const updatedTemplateFilePath = `${updatedTemplatesPath}/home_page.hbs`
+
+  try {
+    if (!fs.existsSync(updatedTemplatesPath)) {
+      fs.mkdirSync(updatedTemplatesPath)
+    }
+
+    const templateFile = fs.readFileSync(templateFilePath, 'utf-8')
+
+    const patternsToRemove = [
+      // Articles patterns
+      /({{#each categories}}[\s\S]*?)({{#each articles}}[\s\S]*?{{\/each}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{#each [\S]*?\.articles}}[\s\S]*?{{\/each}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{#with articles}}[\s\S]*?{{\/with}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{#with [\S]*?\.articles}}[\s\S]*?{{\/with}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{articles}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{[\S]*?\.articles}})([\s\S]*{{\/each}})/g,
+      // Articles count patterns
+      /({{#each categories}}[\s\S]*?)({{#each articles_count}}[\s\S]*?{{\/each}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{#each [\S]*?\.articles_count}}[\s\S]*?{{\/each}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{#with articles_count}}[\s\S]*?{{\/with}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{#with [\S]*?\.articles_count}}[\s\S]*?{{\/with}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{articles_count}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{[\S]*?\.articles_count}})([\s\S]*{{\/each}})/g,
+      // More articles patterns
+      /({{#each categories}}[\s\S]*?)({{#each more_articles}}[\s\S]*?{{\/each}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{#each [\S]*?\.more_articles}}[\s\S]*?{{\/each}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{#with more_articles}}[\s\S]*?{{\/with}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{#with [\S]*?\.more_articles}}[\s\S]*?{{\/with}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{more_articles}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{[\S]*?\.more_articles}})([\s\S]*{{\/each}})/g
+    ]
+
+    let updatedFile = templateFile
+
+    patternsToRemove.forEach(element => {
+      updatedFile = replaceRecursive(updatedFile, element, updatedFile.match(element) !== null)
+    })
+
+    fs.writeFileSync(updatedTemplateFilePath, updatedFile, { flag: 'w' })
+  } catch (error) {
+    throw new CLIError(chalk.red(`file was malformed at path: "${updatedTemplateFilePath}"`))
+  }
+}
+
+function replaceRecursive (templateFile: string, pattern: RegExp, match: boolean): string {
+  if (match) {
+    const updatedFile = templateFile.replace(pattern, '$1$3')
+    return replaceRecursive(updatedFile, pattern, updatedFile.match(pattern) !== null)
+  } else {
+    return templateFile
   }
 }
diff --git a/packages/zcli-themes/src/templates/document_head_scripts.hbs b/packages/zcli-themes/src/templates/document_head_scripts.hbs
new file mode 100644
index 00000000..8f4a44df
--- /dev/null
+++ b/packages/zcli-themes/src/templates/document_head_scripts.hbs
@@ -0,0 +1,25 @@
+<script type="text/javascript">
+  // Load ES module polyfill only for browsers that don't support ES modules
+  if (!(HTMLScriptElement.supports && HTMLScriptElement.supports('importmap'))) {
+    document.write('<script async src="{{asset 'es-module-shims.js'}}"><\/script>');
+  }
+</script>
+<script type="importmap">
+{
+  "imports": {
+    "new-request-form": "{{asset 'new-request-form-bundle.js'}}",
+    "flash-notifications": "{{asset 'flash-notifications-bundle.js'}}",
+    "new-request-form-translations": "{{asset 'new-request-form-translations-bundle.js'}}",
+    "shared": "{{asset 'shared-bundle.js'}}",
+    "wysiwyg": "{{asset 'wysiwyg-bundle.js'}}"
+  }
+}
+</script>
+<script type="module">
+  import { renderFlashNotifications } from "flash-notifications";
+
+  const settings = {{json settings}};
+  const closeLabel = {{json (t 'close')}}
+
+  renderFlashNotifications(settings, closeLabel);
+</script>
diff --git a/packages/zcli-themes/src/templates/request_form_module.hbs b/packages/zcli-themes/src/templates/request_form_script.hbs
similarity index 100%
rename from packages/zcli-themes/src/templates/request_form_module.hbs
rename to packages/zcli-themes/src/templates/request_form_script.hbs

From 233be86f7d3bb0f513d7aae3ba789f435e55e0f7 Mon Sep 17 00:00:00 2001
From: BrunoBFerreira <bruno.ferreira@zendesk.com>
Date: Thu, 29 Aug 2024 18:04:25 +0100
Subject: [PATCH 6/7] Modify files in place

---
 .../zcli-themes/src/lib/migrateNoBackwards.ts | 50 +++++--------------
 1 file changed, 13 insertions(+), 37 deletions(-)

diff --git a/packages/zcli-themes/src/lib/migrateNoBackwards.ts b/packages/zcli-themes/src/lib/migrateNoBackwards.ts
index 2d11f423..587394e0 100644
--- a/packages/zcli-themes/src/lib/migrateNoBackwards.ts
+++ b/packages/zcli-themes/src/lib/migrateNoBackwards.ts
@@ -5,16 +5,10 @@ import * as chalk from 'chalk'
 import { CLIError } from '@oclif/core/lib/errors'
 
 export default function migrateNoBackwards (themePath: string, manifest: Manifest): void {
-  const newDir = themePath + '/updated-theme'
-
-  if (!fs.existsSync(newDir)) {
-    fs.mkdirSync(newDir)
-  }
-
-  updateOrCreateManifest(newDir, manifest)
-  updateNewRequestTemplate(themePath, newDir)
-  updateDocumentHeadTemplate(themePath, newDir)
-  updateHomePageTemplate(themePath, newDir)
+  updateOrCreateManifest(themePath, manifest)
+  updateNewRequestTemplate(themePath)
+  updateDocumentHeadTemplate(themePath)
+  updateHomePageTemplate(themePath)
 }
 
 function updateOrCreateManifest (themePath: string, manifestContent: Manifest): void {
@@ -30,57 +24,39 @@ function updateOrCreateManifest (themePath: string, manifestContent: Manifest):
   }
 }
 
-function updateNewRequestTemplate (themePath: string, updatedThemePath: string): void {
+function updateNewRequestTemplate (themePath: string): void {
   const templateFilePath = `${themePath}/templates/new_request_page.hbs`
-  const updatedTemplatesPath = `${updatedThemePath}/templates`
-  const updatedTemplateFilePath = `${updatedTemplatesPath}/new_request_page.hbs`
   const additionalModuleFilePath = path.join(__dirname, '..', 'templates', 'request_form_script.hbs')
 
   try {
-    if (!fs.existsSync(updatedTemplatesPath)) {
-      fs.mkdirSync(updatedTemplatesPath)
-    }
-
     const templateFile = fs.readFileSync(templateFilePath, 'utf-8')
     let updatedFile = templateFile.replace(/\n\s*<span class="follow-up-hint"[^>]*>([\s\S]*?)<\/span>/g, '')
     updatedFile = updatedFile.replace(/{{request_form .*}}/g, '<div id="new-request-form"></div>')
 
     const additionalModule = fs.readFileSync(additionalModuleFilePath, 'utf-8')
-    fs.writeFileSync(updatedTemplateFilePath, updatedFile + additionalModule, { flag: 'w' })
+    fs.writeFileSync(templateFilePath, updatedFile + additionalModule, { flag: 'w' })
   } catch (error) {
-    throw new CLIError(chalk.red(`file was malformed at path: "${updatedTemplateFilePath}"`))
+    throw new CLIError(chalk.red(`file was malformed at path: "${templateFilePath}"`))
   }
 }
 
-function updateDocumentHeadTemplate (themePath: string, updatedThemePath: string): void {
+function updateDocumentHeadTemplate (themePath: string): void {
   const templateFilePath = `${themePath}/templates/document_head.hbs`
-  const updatedTemplatesPath = `${updatedThemePath}/templates`
-  const updatedTemplateFilePath = `${updatedTemplatesPath}/document_head.hbs`
   const additionalScriptsFilePath = path.join(__dirname, '..', 'templates', 'document_head_scripts.hbs')
 
   try {
-    if (!fs.existsSync(updatedTemplatesPath)) {
-      fs.mkdirSync(updatedTemplatesPath)
-    }
-
     const templateFile = fs.readFileSync(templateFilePath, 'utf-8')
     const additionalModule = fs.readFileSync(additionalScriptsFilePath, 'utf-8')
-    fs.writeFileSync(updatedTemplateFilePath, templateFile + additionalModule, { flag: 'w' })
+    fs.writeFileSync(templateFilePath, templateFile + additionalModule, { flag: 'w' })
   } catch (error) {
-    throw new CLIError(chalk.red(`file was malformed at path: "${updatedTemplateFilePath}"`))
+    throw new CLIError(chalk.red(`file was malformed at path: "${templateFilePath}"`))
   }
 }
 
-function updateHomePageTemplate (themePath: string, updatedThemePath: string): void {
+function updateHomePageTemplate (themePath: string): void {
   const templateFilePath = `${themePath}/templates/home_page.hbs`
-  const updatedTemplatesPath = `${updatedThemePath}/templates`
-  const updatedTemplateFilePath = `${updatedTemplatesPath}/home_page.hbs`
 
   try {
-    if (!fs.existsSync(updatedTemplatesPath)) {
-      fs.mkdirSync(updatedTemplatesPath)
-    }
-
     const templateFile = fs.readFileSync(templateFilePath, 'utf-8')
 
     const patternsToRemove = [
@@ -113,9 +89,9 @@ function updateHomePageTemplate (themePath: string, updatedThemePath: string): v
       updatedFile = replaceRecursive(updatedFile, element, updatedFile.match(element) !== null)
     })
 
-    fs.writeFileSync(updatedTemplateFilePath, updatedFile, { flag: 'w' })
+    fs.writeFileSync(templateFilePath, updatedFile, { flag: 'w' })
   } catch (error) {
-    throw new CLIError(chalk.red(`file was malformed at path: "${updatedTemplateFilePath}"`))
+    throw new CLIError(chalk.red(`file was malformed at path: "${templateFilePath}"`))
   }
 }
 

From 55a4bd28df4498e4e5d4bf9314b41e33793681af Mon Sep 17 00:00:00 2001
From: BrunoBFerreira <bruno.ferreira@zendesk.com>
Date: Thu, 29 Aug 2024 18:13:39 +0100
Subject: [PATCH 7/7] Improve regex expressions

---
 .../zcli-themes/src/lib/migrateNoBackwards.ts | 26 +++++--------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/packages/zcli-themes/src/lib/migrateNoBackwards.ts b/packages/zcli-themes/src/lib/migrateNoBackwards.ts
index 587394e0..ec8588b9 100644
--- a/packages/zcli-themes/src/lib/migrateNoBackwards.ts
+++ b/packages/zcli-themes/src/lib/migrateNoBackwards.ts
@@ -61,26 +61,12 @@ function updateHomePageTemplate (themePath: string): void {
 
     const patternsToRemove = [
       // Articles patterns
-      /({{#each categories}}[\s\S]*?)({{#each articles}}[\s\S]*?{{\/each}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{#each [\S]*?\.articles}}[\s\S]*?{{\/each}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{#with articles}}[\s\S]*?{{\/with}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{#with [\S]*?\.articles}}[\s\S]*?{{\/with}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{articles}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{[\S]*?\.articles}})([\s\S]*{{\/each}})/g,
-      // Articles count patterns
-      /({{#each categories}}[\s\S]*?)({{#each articles_count}}[\s\S]*?{{\/each}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{#each [\S]*?\.articles_count}}[\s\S]*?{{\/each}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{#with articles_count}}[\s\S]*?{{\/with}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{#with [\S]*?\.articles_count}}[\s\S]*?{{\/with}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{articles_count}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{[\S]*?\.articles_count}})([\s\S]*{{\/each}})/g,
-      // More articles patterns
-      /({{#each categories}}[\s\S]*?)({{#each more_articles}}[\s\S]*?{{\/each}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{#each [\S]*?\.more_articles}}[\s\S]*?{{\/each}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{#with more_articles}}[\s\S]*?{{\/with}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{#with [\S]*?\.more_articles}}[\s\S]*?{{\/with}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{more_articles}})([\s\S]*{{\/each}})/g,
-      /({{#each categories}}[\s\S]*?)({{[\S]*?\.more_articles}})([\s\S]*{{\/each}})/g
+      /({{#each categories}}[\s\S]*?)({{#each (?:articles|articles_count|more_articles)}}[\s\S]*?{{\/each}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{#each [\S]*?\.(?:articles|articles_count|more_articles)}}[\s\S]*?{{\/each}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{#with (?:articles|articles_count|more_articles)}}[\s\S]*?{{\/with}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{#with [\S]*?\.(?:articles|articles_count|more_articles)}}[\s\S]*?{{\/with}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{(?:articles|articles_count|more_articles)}})([\s\S]*{{\/each}})/g,
+      /({{#each categories}}[\s\S]*?)({{[\S]*?\.(?:articles|articles_count|more_articles)}})([\s\S]*{{\/each}})/g
     ]
 
     let updatedFile = templateFile