@tulipnpm/timekit_project_selector 2.0.1-rc.0 → 2.0.2

package/README.md

@@ -5,9 +5,9 @@ The TimeKit Project Selector is a library that extends the functionality of [Tim
 ## Installation
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@tulipnpm/timekit_project_selector@latest/dist/timekit_project_selector.min.js"></script>
 <link rel="stylesheet" href="https://cdn.timekit.io/booking-js/v3/booking.min.css" />
 <script type="text/javascript" src="//cdn.timekit.io/booking-js/v3/booking.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@tulipnpm/timekit_project_selector@latest/dist/timekit_project_selector.min.js"></script>
 ```
 
 ## Initialization
@@ -17,6 +17,7 @@ To initialize the TimeKit Project Selector on your site, you first need to impor
 ```js
 timekit_project_selector.init({
     app_key: <timekit_app_key>,
+    api_base_url: <timekit_api_url>
 }).then(() => {
     // Your code here...
 });
@@ -33,6 +34,7 @@ TimeKit Project Selector has many configuration options:
 | Option | Optional? | Default value | Description |
 |--------|-----------|---------------|-------------|
 | app_key | No | | Token required to connect to TimeKit API. Can be found at **https://admin.timekit.io/a/apps/<app_slug>/apisettings/keys** |
+| api_base_url | Yes | https://api.timekit.io | Timekit API url pointing to production environment. For staging env change it to staging url.
 | defaultUI | Yes | true | When true, will create the default user interface for the project selector. More details below |
 | embed | Yes | false | When true, the user interface will not be shown in the  widget, it will be placed inside of a specified div. More details below |
 | includePrivateAppointments | Yes | false | When true, private appointment types will be fetched from the TimeKit API |
@@ -51,11 +53,11 @@ timekit_project_selector.init({
     ...,
     selectorOptions: {
         store_project: true,
-        store_appointment_type_project: true,
+        service_project: true,
     }
 });
 ```
-> You must use project type as key in the selectorOptions. Ex. global_appointment_type_project for render Global Appointment Type in step, store_appointment_type_project for render Store Appointment Type in step, store_project for render Stores in step
+> You must use project type as key in the selectorOptions. Ex. service_project for render Global Appointment Type in step, store_appointment_type_project for render Store Appointment Type in step, store_project for render Stores in step
 
 ### Selector Option Copyright
 
@@ -133,12 +135,13 @@ Here is a sample of combined selectorOptions.
 timekit_project_selector.init({
     ...,
     selectorOptions: {
-        global_appointment_type_project: {
+        service_project: {
+            strategy: 'service_project',
+            card_title: `{{[project]name}}`,
             title: 'Select an Appointment Type',
+            card_image: `{{[project]image_url}}`,
+            card_body: `{{[project]description}}`,
             description: 'Which appointment type would you like?',
-            card_image: '[meta]t_appointment_type_image',
-            card_title: '[meta]t_appointment_type_name',
-            card_body: '[meta]t_appointment_type_description',
             card_footer: '<i class="far fa-clock"></i> {{[project]availability.length}}',
             filters: {
                 't_disabled': 0,
@@ -147,15 +150,15 @@ timekit_project_selector.init({
         },
         store_project: {
             title: 'Select a Store',
-            description: 'Choose a store from the following that you will be visiting for your appointment.',
+            strategy: 'store_project',
             card_title: '[meta]t_store_name',
-            card_body: `{{[meta]t_store_address}}, {{[meta]t_store_city}}`,
             card_footer: '[meta]t_store_phone',
+            card_body: `{{[meta]t_store_address}}, {{[meta]t_store_city}}`,
+            description: 'Choose a store from the following that you will be visiting for your appointment.',
             search_bar: {
                 enabled: true,
                 placeholder: 'Search for a city or postal code'
             },
-            strategy: 'store_project',
         },
     }
 });
@@ -218,7 +221,7 @@ timekit_project_selector.init({
     defaultUI: false,
     includePrivateAppointments: true,
     selectorOptions: {
-        global_appointment_type_project: true,
+        service_project: true,
         store_project: true,
     }
 }).then(() => {
@@ -277,10 +280,7 @@ Optionally takes project type for return projects by project type only.(Filters
 Optionally takes filters for return filtered projects
 
 ```js
-let filters = [];
-filters['key'] = 'value';
-
-timekit_project_selector.getStrategy().getProjects('global_appointment_type', filters);
+await timekit_project_selector.getStrategy('store_project').getProjects({ id: 'ef0cee8a-6096-453f-a634-1597b359cdfa'});
 ```
 
 ### getFilters
@@ -320,12 +320,13 @@ timekit_project_selector.selectProject(timekitProject);
 ### Global Appointment Type -> Store -> Booking.js
 ```js
     selectorOptions: {
-        global_appointment_type_project: {
+        service_project: {
+            strategy: 'service_project',
+            card_title: `{{[project]name}}`,
             title: 'Select an Appointment Type',
+            card_image: `{{[project]image_url}}`,
+            card_body: `{{[project]description}}`,
             description: 'Which appointment type would you like?',
-            card_image: '[meta]t_appointment_type_image',
-            card_title: '[meta]t_appointment_type_name',
-            card_body: '[meta]t_appointment_type_description',
             card_footer: '<i class="far fa-clock"></i> {{[project]availability.length}}',
             filters: {
                 't_disabled': 0,
@@ -334,15 +335,15 @@ timekit_project_selector.selectProject(timekitProject);
         },
         store_project: {
             title: 'Select a Store',
-            description: 'Choose a store from the following that you will be visiting for your appointment.',
+            strategy: 'store_project',
             card_title: '[meta]t_store_name',
-            card_body: `{{[meta]t_store_address}}, {{[meta]t_store_city}}`,
             card_footer: '[meta]t_store_phone',
+            card_body: `{{[meta]t_store_address}}, {{[meta]t_store_city}}`,
+            description: 'Choose a store from the following that you will be visiting for your appointment.',
             search_bar: {
                 enabled: true,
                 placeholder: 'Search for a city or postal code'
             },
-            strategy: 'store_project'
         }
     }
 ```
@@ -352,10 +353,11 @@ timekit_project_selector.selectProject(timekitProject);
     selectorOptions: {
         store_project: {
             title: 'Select a Store',
-            description: 'Choose a store from the following that you will be visiting for your appointment.',
+            strategy: 'store_project',
             card_title: '[meta]t_store_name',
-            card_body: `{{[meta]t_store_address}}, {{[meta]t_store_city}}`,
             card_footer: '[meta]t_store_phone',
+            card_body: `{{[meta]t_store_address}}, {{[meta]t_store_city}}`,
+            description: 'Choose a store from the following that you will be visiting for your appointment.',
             search_bar: {
                 enabled: true,
                 placeholder: 'Search for a city or postal code'
@@ -363,11 +365,12 @@ timekit_project_selector.selectProject(timekitProject);
             //strategy: 'store_project'
         },
         store_appointment_type_project: {
+           strategy: 'service_project',
+            card_title: `{{[project]name}}`,
             title: 'Select an Appointment Type',
+            card_image: `{{[project]image_url}}`,
+            card_body: `{{[project]description}}`,
             description: 'Which appointment type would you like?',
-            card_image: '[meta]t_appointment_type_image',
-            card_title: '[meta]t_appointment_type_name',
-            card_body: '[meta]t_appointment_type_description',
             card_footer: '<i class="far fa-clock"></i> {{[project]availability.length}}',
             filters: {
                 't_disabled': 0,
@@ -397,7 +400,7 @@ timekit_project_selector.selectProject(timekitProject);
 <body>
     <h1>Custom UI - TimeKit Project Selector Example</h1>
 
-    <!-- Placeholder div for TK Projects of t_project_type = global_appointment_type_project -->
+    <!-- Placeholder div for TK Projects of t_project_type = service_project -->
     <ul class="global_projects"></ul>
 
     <!-- Placeholder div for TK Projects of t_project_type = store_project -->
@@ -418,26 +421,23 @@ timekit_project_selector.selectProject(timekitProject);
                 defaultUI: false,
                 // Selector options still prvided but values are set to true
                 selectorOptions: {
-                    // Step 1: Is to select the global_appointment_type_project
-                    global_appointment_type_project: true,
+                    // Step 1: Is to select the service_project
+                    service_project: true,
                     // Step 2: Is to select the store project
                     store_project: true,
                 }
-            }).then(() => {
+            }).then(async () => {
                 // You could use simple array instead of using the steps factor.
                 // This factory makes it simple to track which TK project uuids were selected
                 let stepsFactory = tps.getStepsFactory();
-
-                let globalProjectFilters = [];
-                // We only want to surface active global appointment types
-                globalProjectFilters['t_disabled'] = 0;
-                // We only want to surface public global appointment types
-                globalProjectFilters['t_private'] = 0;
                 
-                // Fetch the global_appointment_type_project
-                let globalProjects = tps.getStrategy().getProjects('global_appointment_type_project', globalProjectFilters);
+                // Fetch the service_project
+                let globalProjects = await tps.getStrategy('service_project').getProjects({ 
+                    t_private: 0,
+                    t_disabled: 0
+                });
 
-                // Render out links for each global_appointment_type_project
+                // Render out links for each service_project
                 globalProjects.forEach((globalProject) => {
                     let link = "<a href=\"#\" class=\"global_appointment\" id=\"" + globalProject.id + "\"> <li>'" + globalProject.name + "'</li></a>";
                     $('.global_projects').append(link);
@@ -445,18 +445,15 @@ timekit_project_selector.selectProject(timekitProject);
 
                 // Register an event listener on the newly generated link
                 $("a.global_appointment").click(function (event) {
-                    let storeProjectFilters = [];
-                    storeProjectFilters['t_global_appointment_type_project_uuid'] = $(this).attr('id');
-                    storeProjectFilters['t_disabled'] = 0;
-                    storeProjectFilters['t_private'] = 0;
-
-                    // We add the UUID of the selected global_appointment_type_project. This will be used at the end
-                    // when we are selecting the store_appointment_type_project
-                    stepsFactory.addFilterForLastStep('t_global_appointment_type_project_uuid', $(this).attr('id'));
                     stepsFactory.nextStep();
 
-                    let storeProjects = tps.getStrategy('store_project').getProjects('store_project', storeProjectFilters);
-
+                    const service_project_id  = $(this).attr('id');
+                    let storeProjects = await tps.getStrategy('store_project').getProjects({ 
+                        service_project_id,
+                        t_disabled: 0,
+                        t_private: 0
+                    });
+                    
                     // Render out links for each store_project
                     storeProjects.forEach((project) => {
                         let link = "<a href=\"#\" class=\"store_project\" id=\"" + project.id + "\"> <li>'" + project.name + "'</li></a>";
@@ -466,17 +463,16 @@ timekit_project_selector.selectProject(timekitProject);
                     // Register an event listener on the newly generated store link
                     $("a.store_project").click(function (event) {
 
-                        // We add the UUID of the selected store_project. This will be used at the end
-                        // when we are selecting the store_appointment_type_project
-                        stepsFactory.addFilterForLastStep('t_store_project_uuid', $(this).attr('id'));
                         stepsFactory.nextStep();
 
-                        // From the step factory get the filters we had applied throughout the process
-                        let filters = stepsFactory.currentStep().getFilters();
-                        let store_appointments = tps.getStrategy().getProjects('store_appointment_type_project', filters);
+                        const store_project_id = $(this).attr('id');
+                        const project = await tps.getStrategy().getProjects({
+                            store_project_id,
+                            service_project_id
+                        });
 
                         // Render Booking.js
-                        tps.selectProject(store_appointments[0]);
+                        tps.selectProject(project);
                     });
                 });