feat:#1218 moving planner to separated folder

packages/web-components/package.json

@@ -53,9 +53,9 @@
     "typescript": "~3.7.2"
   },
   "scripts": {
-    "build:prod": "node ./src/scripts/build-prod.js",
+    "build:prod": "node ./scripts/build-prod.js",
     "start:server": "serverless offline --out public/dist --stage local",
-    "start:dev": "node ./src/scripts/start-dev.js",
+    "start:dev": "node ./scripts/start-dev.js",
     "test:dev": "cross-env TZ=UTC jest --watch --color",
     "test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit",
     "lint": "concurrently \"tsc --noEmit\" \"eslint --cache --ext=ts,tsx,js,svelte src\"",

packages/web-components/scripts/build-prod.js

@@ -10,15 +10,15 @@ const minifyCode = require('./minify-code')
 // have to create it first using mkdirp (mkdir with cursive)
 const mkdirp = require('mkdirp')
 
-const cjsIndexFolderPath = path.resolve(__dirname, '../../public/dist-npm/cjs')
+const cjsIndexFolderPath = path.resolve(__dirname, '../public/dist-npm/cjs')
 const cjsIndexFilePath = path.resolve(cjsIndexFolderPath, './index.js')
 const cjsIndexTemplateFilePath = path.resolve(__dirname, './tpls/index.cjs.ejs')
 
-const esmIndexFolderPath = path.resolve(__dirname, '../../public/dist-npm/esm')
+const esmIndexFolderPath = path.resolve(__dirname, '../public/dist-npm/esm')
 const esmIndexFilePath = path.resolve(esmIndexFolderPath, './index.js')
 const esmIndexTemplateFilePath = path.resolve(__dirname, './tpls/index.esm.ejs')
 
-const tsDeclarationIndexFolderPath = path.resolve(__dirname, '../../public/dist-npm/types')
+const tsDeclarationIndexFolderPath = path.resolve(__dirname, '../public/dist-npm/types')
 const tsDeclarationIndexFilePath = path.resolve(tsDeclarationIndexFolderPath, './index.d.ts')
 const tsDeclarationIndexTemplateFilePath = path.resolve(__dirname, './tpls/index.d.ts.ejs')
 
@@ -68,7 +68,7 @@ return (async () => {
     const buildPackageFn = () =>
       new Promise((resolve, reject) => {
         {
-          const clientBuildScriptPath = `./src/scripts/rollup.config.${rollUpPackageName}.js`
+          const clientBuildScriptPath = `./scripts/rollup.config.${rollUpPackageName}.js`
           const spawnObject = spawn('rollup', ['-c', clientBuildScriptPath], {
             stdio: 'inherit',
           })

packages/web-components/scripts/format-code.js

@@ -1,5 +1,5 @@
 const prettier = require('prettier')
-const prettierBaseConfig = require('../../../../.prettierrc')
+const prettierBaseConfig = require('../../../.prettierrc')
 
 module.exports = content => {
   const formatContent = prettier.format(content, {

packages/web-components/scripts/generate-css-output.js

@@ -1,9 +1,9 @@
 const path = require('path')
 
 const generateCssOutput = ({ css, fileName, production }) => {
-  css.write(path.resolve(__dirname, `../../public/dist/${fileName}`))
+  css.write(path.resolve(__dirname, `../public/dist/${fileName}`))
   if (production) {
-    css.write(path.resolve(__dirname, `../../public/dist-npm/css/${fileName}`))
+    css.write(path.resolve(__dirname, `../public/dist-npm/css/${fileName}`))
   }
 }
 

packages/web-components/scripts/get-env.js

@@ -1,6 +1,6 @@
 const path = require('path')
 
-const reapitConfig = require(path.resolve(__dirname, '../..', 'config.json'))
+const reapitConfig = require(path.resolve(__dirname, '..', 'config.json'))
 
 const setEnv = () => {
   const configs = reapitConfig[process.env.APP_ENV]

packages/web-components/scripts/rollup.config.appointment-bookings.js

@@ -6,7 +6,7 @@ import generateRollupOutput from './generate-rollup-output'
 import generateCssOutput from './generate-css-output'
 import themesConfigurations from './rollup.config.themes.js'
 
-const config = require(path.resolve(__dirname, '../..', 'config.json'))
+const config = require(path.resolve(__dirname, '..', 'config.json'))
 
 const production = !process.env.ROLLUP_WATCH
 

packages/web-components/scripts/rollup.config.base.js

@@ -22,9 +22,9 @@ export default {
       runtimeHelpers: true,
       exclude: [
         'node_modules/@babel/**',
-        '../../node_modules/@babel/**',
+        '../node_modules/@babel/**',
         'node_modules/core-js/**',
-        '../../node_modules/core-js/**',
+        '../node_modules/core-js/**',
       ],
       presets: [
         [

packages/web-components/scripts/rollup.config.property-detail.js

@@ -7,7 +7,7 @@ import generateCssOutput from './generate-css-output'
 import themesConfiguration from './rollup.config.themes.js'
 import { baseConfigurationWithoutTheme as viewBookinConfiguration } from './rollup.config.viewing-booking.js'
 
-const config = require(path.resolve(__dirname, '../..', 'config.json'))
+const config = require(path.resolve(__dirname, '..', 'config.json'))
 const production = !process.env.ROLLUP_WATCH
 
 export const baseConfigurationWithoutTheme = {

packages/web-components/scripts/rollup.config.search-widget.js

@@ -6,7 +6,7 @@ import path from 'path'
 import generateRollupOutput from './generate-rollup-output'
 import generateCssOutput from './generate-css-output'
 
-const config = require(path.resolve(__dirname, '../..', 'config.json'))
+const config = require(path.resolve(__dirname, '..', 'config.json'))
 const production = !process.env.ROLLUP_WATCH
 
 // search-widget is depend on property detail

packages/web-components/scripts/rollup.config.viewing-booking.js

@@ -6,7 +6,7 @@ import generateRollupOutput from './generate-rollup-output'
 import generateCssOutput from './generate-css-output'
 import themesConfigurations from './rollup.config.themes.js'
 
-const config = require(path.resolve(__dirname, '../..', 'config.json'))
+const config = require(path.resolve(__dirname, '..', 'config.json'))
 const production = !process.env.ROLLUP_WATCH
 
 export const baseConfigurationWithoutTheme = {

packages/web-components/scripts/start-dev.js

@@ -37,7 +37,7 @@ return (() => {
         moveHtml += ' &&'
       }
       // eslint-disable-next-line max-len
-      const clientScript = `rollup -w -c './src/scripts/rollup.config.${packageName}.js' --environment APP_ENV:local`
+      const clientScript = `rollup -w -c './scripts/rollup.config.${packageName}.js' --environment APP_ENV:local`
       const serverScript = 'serverless offline --out public/dist --stage local'
       const startClientServer = getStartClientServer(packageName)
 

packages/web-components/src/appointment-bookings/client/components/appointment-bookings.svelte

@@ -5,8 +5,9 @@
   import { resetCSS, generateThemeClasses } from '../../../common/styles'
   import { generateAppointmentBookingThemeClasses } from '../core/theme'
   import FormStep1 from './form-step1.svelte'
-  import PlannerStep2 from './planner-step2.svelte'
+  import PlannerStep2 from '../../../appointment-planner/client/components/appointment-planner.svelte'
   import BookingConfirmationStep3 from './booking-confirmation-step3.svelte'
+  import { handleSubmitFormStep2 } from '../handlers/submit-form-step2.ts'
 
   export let theme
   export let parentSelector
@@ -34,6 +35,10 @@
     e.stopPropagation()
   }
 
+  const onDateCellClick = ({ appointmentDate, appointmentTime }) => {
+    handleSubmitFormStep2(appointmentDate.format('dddd, DD MMMM'), appointmentTime, handleNextStep)
+  }
+
   const themeClasses = {
     ...generateThemeClasses(theme, parentSelector),
     ...generateAppointmentBookingThemeClasses(theme, parentSelector),
@@ -81,7 +86,7 @@
         {/if}
 
         {#if currentStep === 2}
-          <PlannerStep2 {themeClasses} {handleNextStep} />
+          <PlannerStep2 {themeClasses} {handleNextStep} handleOnClickCell={onDateCellClick} />
         {/if}
 
         {#if currentStep === 3}

packages/web-components/src/appointment-bookings/client/handlers/__tests__/submit-form-step2.test.ts

@@ -13,7 +13,7 @@ jest.mock('svelte/store', () => ({
 describe('handleSubmitFormStep2', () => {
   it('should run correctly', () => {
     const handleNextStep = jest.fn()
-    handleSubmitFormStep2(handleNextStep, mockFormValues.appointmentDate.value, mockFormValues.appointmentTime.value)
+    handleSubmitFormStep2(mockFormValues.appointmentDate.value, mockFormValues.appointmentTime.value, handleNextStep)
     expect(handleNextStep).toHaveBeenCalled()
   })
 })

packages/web-components/src/appointment-bookings/client/handlers/submit-form-step2.ts

@@ -1,6 +1,6 @@
 import { form2Store as formStore } from '../core/store/form-store'
 
-export const handleSubmitFormStep2 = (handleNextStep: () => void, date: string, time: string) => {
+export const handleSubmitFormStep2 = (date: string, time: string, handleNextStep: () => void) => {
   formStore.update(() => {
     return {
       appointmentDate: {

packages/web-components/src/appointment-bookings/client/components/planner-step2.svelte → packages/web-components/src/appointment-planner/client/components/appointment-planner.svelte

@@ -6,7 +6,7 @@
 
   export let themeClasses
   export let handleNextStep
-  const { svgNavigation } = themeClasses
+  export let handleOnClickCell
 </script>
 
 <style>
@@ -31,12 +31,12 @@
 
 <div data-testid="appointment-bookings-modal-header-container" class="appointment-bookings-modal-header-container">
   <button data-testid="prev-week" on:click={weekStore.decrement}>
-    <Fa class=" {svgNavigation}" icon={faChevronLeft} />
+    <Fa class=" {themeClasses.svgNavigation}" icon={faChevronLeft} />
   </button>
   <h1 class={themeClasses.primaryHeading}>Choose an Appointment</h1>
   <button data-testid="next-week" on:click={weekStore.increment}>
-    <Fa class=" {svgNavigation}" icon={faChevronRight} />
+    <Fa class=" {themeClasses.svgNavigation}" icon={faChevronRight} />
   </button>
   <div />
 </div>
-<DateTimePicker {handleNextStep} />
+<DateTimePicker {handleNextStep} {themeClasses} {handleOnClickCell} />

packages/web-components/src/appointment-bookings/client/components/date-cell.svelte → packages/web-components/src/appointment-planner/client/components/date-cell.svelte

@@ -1,9 +1,10 @@
 <script>
   import TimeCell from './time-cell.svelte'
-  import { themeStore } from '../core/store/theme-store'
 
   export let date
   export let handleNextStep
+  export let handleOnClickCell
+  export let themeClasses
 
   // generate dummy meeting slots between 00-00 -> 10-00 - duration - on hours
   export const mockedTimes = []
@@ -35,10 +36,10 @@
 </style>
 
 <div class="date-cell-container" title="Click on the cell for more detail">
-  <div class={$themeStore.dateCellHeader}>{formatHeader(date)}</div>
-  <div class={$themeStore.timeCellsContainer}>
+  <div class={themeClasses.dateCellHeader}>{formatHeader(date)}</div>
+  <div class={themeClasses.timeCellsContainer}>
     {#each mockedTimes as startTime}
-      <TimeCell {date} {startTime} {handleNextStep} />
+      <TimeCell {themeClasses} {date} {startTime} {handleNextStep} {handleOnClickCell} />
     {/each}
   </div>
 </div>

packages/web-components/src/appointment-bookings/client/components/date-time-picker.svelte → packages/web-components/src/appointment-planner/client/components/date-time-picker.svelte

@@ -1,19 +1,22 @@
 <script>
   import { derrivedDayOfWeek } from '../core/store/week-store'
   import DateCell from './date-cell.svelte'
+
   export let handleNextStep
+  export let themeClasses
+  export let handleOnClickCell
 </script>
 
 <style>
-.date-time-picker-container {
-  display: flex;
-}
+  .date-time-picker-container {
+    display: flex;
+  }
 </style>
 
 <div class="date-time-picker-container">
-  {#each $derrivedDayOfWeek as date }
+  {#each $derrivedDayOfWeek as date}
     <div>
-      <DateCell {date} {handleNextStep}/>
+      <DateCell {themeClasses} {date} {handleNextStep} {handleOnClickCell} />
     </div>
   {/each}
 </div>

packages/web-components/src/appointment-planner/client/components/time-cell.svelte

@@ -0,0 +1,35 @@
+<script>
+  export let date
+  export let startTime = ''
+  export let handleOnClickCell
+  export let themeClasses
+
+  const handleTimeCellClick = () => {
+    handleOnClickCell && handleOnClickCell({ appointmentDate: date, appointmentTime: startTime })
+  }
+</script>
+
+<style>
+  .time-cell-container {
+    padding: 1em;
+    margin-bottom: 2px;
+    cursor: pointer;
+    min-height: 50px;
+  }
+
+  .time-cell-container-visible {
+    visibility: visible;
+  }
+
+  .time-cell-container-not-visible {
+    visibility: hidden;
+    pointer-events: none;
+  }
+</style>
+
+<div
+  on:click={handleTimeCellClick}
+  class="time-cell-container {startTime ? 'time-cell-container-visible' : 'time-cell-container-not-visible'}
+  {themeClasses.timeCell}">
+  <div>{startTime || ''}</div>
+</div>

packages/web-components/src/appointment-planner/server/index.ts

@@ -0,0 +1 @@
+// appointment-planner server goes here