@tulipnpm/timekit_project_selector 1.0.4 → 1.0.7

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/timekit-ecomm-widget.iml" filepath="$PROJECT_DIR$/.idea/timekit-ecomm-widget.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/timekit-ecomm-widget.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

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 |
@@ -94,9 +95,21 @@ 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
 }
 ```
+
+#### Geo Search Bar
+Geo search bar is an alternative to the selector option bar and they shouldn't be used together.
+When this option is specified, the user will be asked for their geolocation in the browser. If the user shares it, the list of the 5 closest stores will be displayed.
+
+``` js
+geo_search_bar: {
+    placeholder: 'Search for a city or postal code'
+}
+```
+
 #### Standard Strings
 
 Adding a string such as 'Select a Store' will display that hardcoded string in the place of the placeholder. This can also be used to display custom HTML elements like icons in the UI.
@@ -127,7 +140,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: {
@@ -183,6 +197,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.
 
 ---
@@ -270,7 +313,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: {
@@ -311,7 +355,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
             }
         }
     }
@@ -369,9 +414,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);
@@ -384,16 +431,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) => {

package/dist/229ef5cc3f6050f3239dc04035170b4d.svg

@@ -0,0 +1,3 @@
+<svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4965 19.8023L17.6668 11.2512C17.8997 10.6235 17.2888 10.0126 16.661 10.2455L8.10653 13.4168C7.38541 13.6846 7.44166 14.7218 8.18753 14.9097L12.0418 15.8783L13.0037 19.7202C13.1915 20.4661 14.2299 20.5235 14.4965 19.8023V19.8023Z" stroke="#214DE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>