@tulipnpm/timekit_project_selector 1.0.5 → 1.0.8

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 |
@@ -98,6 +99,17 @@ filters: {
     '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.
@@ -185,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.
 
 ---

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>