@tulipnpm/timekit_project_selector 1.0.2 → 1.0.6

package/README.md

@@ -35,6 +35,7 @@ TimeKit Project Selector has many configuration options:
 | app_key | No | | Token required to connect to TimeKit API. Can be found at **https://admin.timekit.io/a/apps/<app_slug>/apisettings/keys** |
 | 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 |
 | region | Yes | | Initial filter applied when getting default list of projects. Any project that does not have the same **t_region** metadata value will not be shown on initialization |
 | selectorOptions | No | | See below for details |
 | widgetImageUrl | Yes | Tulip Appointments Icon | When using the default widget UI, change this value to your desired image URL to replace widget image |
@@ -63,8 +64,7 @@ When using the default UI, you must set the selector display values for each sel
 
 #### Selector Option Strategy (Optional)
 
-This parameter using for defining the logic of rendering projects. When we need render something that's haven't got relation with project what we need to render. Ex. this strategy using for rendering Stores in case Global Appointment Type -> Store.
-We use default strategy without this parameter
+This parameter is used for defining the logic of rendering projects. The **strategy** field is used for rendering either Stores having Appointment Types belonging to them, or Appointment Types having Stores belonging to them. By default, strategy is set to `store_project` (Appointment Type > Store) 
 
 ```
 strategy: 'store_project',
@@ -95,7 +95,8 @@ For each projects you can apply default filters by meta data. You can add many f
 
 ``` js
 filters: {
-    't_disabled': false
+    't_disabled': false,
+    't_private': false
 }
 ```
 #### Standard Strings
@@ -128,7 +129,8 @@ timekit_project_selector.init({
             card_body: '[meta]t_appointment_type_description',
             card_footer: '<i class="far fa-clock"></i> {{[project]availability.length}}',
             filters: {
-                't_disabled': false
+                't_disabled': false,
+                't_private': false
             }
         },
         store_project: {
@@ -184,6 +186,35 @@ timekit_project_selector.init({
 });
 ```
 
+### Including private appointment types (Optional)
+
+By default widget fetches only public appointment types, in order to change that behavior and fetch the private appointment types, `includePrivateAppointments` configuration option can be specified to `true`.
+
+```js
+timekit_project_selector.init({
+    app_key: <timekit_app_key>,
+    ...,
+    includePrivateAppointments: true,
+});
+```
+
+In case if you use custom UI and you need to pull both private and public appointment types from TimeKit API, but want to display the private appointment types only when needed, filters can be used:
+
+```js
+timekit_project_selector.init({
+    app_key: <timekit_app_key>,
+    defaultUI: false,
+    includePrivateAppointments: true,
+    selectorOptions: {
+        global_appointment_type_project: true,
+        store_project: true,
+    }
+}).then(() => {
+    // Add this filter whenever you want to surface only public appointment types
+    globalProjectFilters['t_private'] = 0;
+});
+```
+
 See below for how to use the exposed methods.
 
 ---
@@ -271,7 +302,8 @@ timekit_project_selector.selectProject(timekitProject);
             card_body: '[meta]t_appointment_type_description',
             card_footer: '<i class="far fa-clock"></i> {{[project]availability.length}}',
             filters: {
-                't_disabled': false
+                't_disabled': false,
+                't_private': false
             }
         },
         store_project: {
@@ -312,7 +344,8 @@ timekit_project_selector.selectProject(timekitProject);
             card_body: '[meta]t_appointment_type_description',
             card_footer: '<i class="far fa-clock"></i> {{[project]availability.length}}',
             filters: {
-                't_disabled': false
+                't_disabled': false,
+                't_private': false
             }
         }
     }
@@ -370,9 +403,11 @@ timekit_project_selector.selectProject(timekitProject);
                 // This factory makes it simple to track which TK project uuids were selected
                 let stepsFactory = tps.getStepsFactory();
 
-                // We only want to surface active global appointment types
                 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);
@@ -385,16 +420,17 @@ 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;
+                    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);
+                    let storeProjects = tps.getStrategy('store_project').getProjects('store_project', storeProjectFilters);
 
                     // Render out links for each store_project
                     storeProjects.forEach((project) => {
@@ -428,4 +464,4 @@ timekit_project_selector.selectProject(timekitProject);
 </body>
 
 </html>
-```
+```