react-calendly - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

dist/index.es.js

@@ -1,2 +0,2 @@
-import { createRef, createElement, Component, Fragment } from 'react';
+import { createElement, Component, createRef, Fragment } from 'react';
 
@@ -650,2 +650,22 @@ /*! *****************************************************************************
 };
+var withPageSettings = function (url, pageSettings) {
+    if (!pageSettings)
+        return url;
+    var backgroundColor = pageSettings.backgroundColor, hideEventTypeDetails = pageSettings.hideEventTypeDetails, hideLandingPageDetails = pageSettings.hideLandingPageDetails, primaryColor = pageSettings.primaryColor, textColor = pageSettings.textColor;
+    var queryStringIndex = url.indexOf("?");
+    var hasQueryString = queryStringIndex > -1;
+    var queryString = url.slice(queryStringIndex + 1);
+    var baseUrl = hasQueryString ? url.slice(0, queryStringIndex) : url;
+    var updatedQueryString = [
+        queryString,
+        backgroundColor ? "background_color=" + backgroundColor : null,
+        hideEventTypeDetails ? "hide_event_type_details=1" : null,
+        hideLandingPageDetails ? "hide_landing_page_details=1" : null,
+        primaryColor ? "primary_color=" + primaryColor : null,
+        textColor ? "text_color=" + textColor : null,
+    ]
+        .filter(function (item) { return item !== null; })
+        .join("&");
+    return baseUrl + "?" + updatedQueryString;
+};
 
@@ -666,3 +686,3 @@ var defaultStyles = {
         window.Calendly.initInlineWidget({
-            url: this.props.url,
+            url: withPageSettings(this.props.url, this.props.pageSettings),
             parentElement: this.widgetParentContainerRef.current,
@@ -700,3 +720,3 @@ prefill: this.props.prefill,
         var widgetOptions = {
-            url: this.props.url,
+            url: withPageSettings(this.props.url, this.props.pageSettings),
             prefill: this.props.prefill,
@@ -721,3 +741,3 @@ utm: this.props.utm,
     PopupWidget.prototype.componentWillReceiveProps = function (nextProps) {
-        window.Calendly.initBadgeWidget(__assign(__assign({}, defaultProps), nextProps));
+        window.Calendly.initBadgeWidget(__assign(__assign(__assign({}, defaultProps), nextProps), { url: withPageSettings(nextProps.url, nextProps.pageSettings) }));
     };
@@ -727,3 +747,3 @@ PopupWidget.prototype.componentDidMount = function () {
         loadStyleSheet();
-        var options = __assign(__assign({}, defaultProps), this.props);
+        var options = __assign(__assign(__assign({}, defaultProps), this.props), { url: withPageSettings(this.props.url, this.props.pageSettings) });
         window.Calendly.initBadgeWidget(options);
@@ -730,0 +750,0 @@ };

dist/index.js

@@ -654,2 +654,22 @@ 'use strict';
 };
+var withPageSettings = function (url, pageSettings) {
+    if (!pageSettings)
+        return url;
+    var backgroundColor = pageSettings.backgroundColor, hideEventTypeDetails = pageSettings.hideEventTypeDetails, hideLandingPageDetails = pageSettings.hideLandingPageDetails, primaryColor = pageSettings.primaryColor, textColor = pageSettings.textColor;
+    var queryStringIndex = url.indexOf("?");
+    var hasQueryString = queryStringIndex > -1;
+    var queryString = url.slice(queryStringIndex + 1);
+    var baseUrl = hasQueryString ? url.slice(0, queryStringIndex) : url;
+    var updatedQueryString = [
+        queryString,
+        backgroundColor ? "background_color=" + backgroundColor : null,
+        hideEventTypeDetails ? "hide_event_type_details=1" : null,
+        hideLandingPageDetails ? "hide_landing_page_details=1" : null,
+        primaryColor ? "primary_color=" + primaryColor : null,
+        textColor ? "text_color=" + textColor : null,
+    ]
+        .filter(function (item) { return item !== null; })
+        .join("&");
+    return baseUrl + "?" + updatedQueryString;
+};
 
@@ -670,3 +690,3 @@ var defaultStyles = {
         window.Calendly.initInlineWidget({
-            url: this.props.url,
+            url: withPageSettings(this.props.url, this.props.pageSettings),
             parentElement: this.widgetParentContainerRef.current,
@@ -704,3 +724,3 @@ prefill: this.props.prefill,
         var widgetOptions = {
-            url: this.props.url,
+            url: withPageSettings(this.props.url, this.props.pageSettings),
             prefill: this.props.prefill,
@@ -725,3 +745,3 @@ utm: this.props.utm,
     PopupWidget.prototype.componentWillReceiveProps = function (nextProps) {
-        window.Calendly.initBadgeWidget(__assign(__assign({}, defaultProps), nextProps));
+        window.Calendly.initBadgeWidget(__assign(__assign(__assign({}, defaultProps), nextProps), { url: withPageSettings(nextProps.url, nextProps.pageSettings) }));
     };
@@ -731,3 +751,3 @@ PopupWidget.prototype.componentDidMount = function () {
         loadStyleSheet();
-        var options = __assign(__assign({}, defaultProps), this.props);
+        var options = __assign(__assign(__assign({}, defaultProps), this.props), { url: withPageSettings(this.props.url, this.props.pageSettings) });
         window.Calendly.initBadgeWidget(options);
@@ -734,0 +754,0 @@ };

package.json

 {
   "name": "react-calendly",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Calendly integration for React apps",
@@ -5,0 +5,0 @@ "author": "tcampb",

README.md

@@ -17,4 +17,10 @@ # react-calendly
 
+## FAQ
+
+#### Why are my page settings not working?
+
+For the page settings to work, you'll need to pass in a `url` prop that is associated with a Calendly account on the [Pro plan](https://calendly.com/pages/pricing).
+
 ## License
 
 MIT © [tcampb](https://github.com/tcampb)

typings/calendly.d.ts

@@ -51,4 +51,64 @@ import { Props as BadgeWidgetOptions } from "./components/PopupWidget/PopupWidget";
 }>;
+export declare type PageSettings = Optional<{
+    /**
+     * @description Use this setting to hide your profile picture, name, event duration, location, and description when Calendly is embedded. This will help reduce duplicate information that you may already have on your web page.
+     * @see {@link https://help.calendly.com/hc/en-us/articles/360020052833-Advanced-embed-options#2} for further information.
+     */
+    hideLandingPageDetails: boolean;
+    /**
+     * @description Use this setting to hide your profile picture, name, event duration, location, and description when Calendly is embedded. This will help reduce duplicate information that you may already have on your web page.
+     * @see {@link https://help.calendly.com/hc/en-us/articles/360020052833-Advanced-embed-options#2} for further information.
+     */
+    hideEventTypeDetails: boolean;
+    /**
+     * @description This setting is only available for Calendly users on the Pro plan. Use this setting to change your Calendly scheduling page's background color.
+     * @example 00a2ff
+     * @see {@link https://help.calendly.com/hc/en-us/articles/223147027-Embed-options-overview#3} for further information.
+     */
+    backgroundColor: string;
+    /**
+     * @description This setting is only available for Calendly users on the Pro plan. Use this setting to change your Calendly scheduling page's text color.
+     * @example ffffff
+     * @see {@link https://help.calendly.com/hc/en-us/articles/223147027-Embed-options-overview#3} for further information.
+     */
+    textColor: string;
+    /**
+     * @description This setting is only available for Calendly users on the Pro plan. Use this setting to change your Calendly scheduling page's primary color.
+     * @example 4d5055
+     * @see {@link https://help.calendly.com/hc/en-us/articles/223147027-Embed-options-overview#3} for further information.
+     */
+    primaryColor: string;
+}>;
 export declare const loadScript: () => void;
 export declare const loadStyleSheet: () => void;
+export declare const withPageSettings: (url: string, pageSettings?: Optional<{
+    /**
+     * @description Use this setting to hide your profile picture, name, event duration, location, and description when Calendly is embedded. This will help reduce duplicate information that you may already have on your web page.
+     * @see {@link https://help.calendly.com/hc/en-us/articles/360020052833-Advanced-embed-options#2} for further information.
+     */
+    hideLandingPageDetails: boolean;
+    /**
+     * @description Use this setting to hide your profile picture, name, event duration, location, and description when Calendly is embedded. This will help reduce duplicate information that you may already have on your web page.
+     * @see {@link https://help.calendly.com/hc/en-us/articles/360020052833-Advanced-embed-options#2} for further information.
+     */
+    hideEventTypeDetails: boolean;
+    /**
+     * @description This setting is only available for Calendly users on the Pro plan. Use this setting to change your Calendly scheduling page's background color.
+     * @example 00a2ff
+     * @see {@link https://help.calendly.com/hc/en-us/articles/223147027-Embed-options-overview#3} for further information.
+     */
+    backgroundColor: string;
+    /**
+     * @description This setting is only available for Calendly users on the Pro plan. Use this setting to change your Calendly scheduling page's text color.
+     * @example ffffff
+     * @see {@link https://help.calendly.com/hc/en-us/articles/223147027-Embed-options-overview#3} for further information.
+     */
+    textColor: string;
+    /**
+     * @description This setting is only available for Calendly users on the Pro plan. Use this setting to change your Calendly scheduling page's primary color.
+     * @example 4d5055
+     * @see {@link https://help.calendly.com/hc/en-us/articles/223147027-Embed-options-overview#3} for further information.
+     */
+    primaryColor: string;
+}> | undefined) => string;
 export {};

typings/components/InlineWidget/InlineWidget.d.ts

 import * as React from "react";
-import { Prefill, Utm } from "../../calendly";
+import { PageSettings, Prefill, Utm } from "../../calendly";
 export interface Props {
@@ -8,2 +8,3 @@ url: string;
     styles?: React.CSSProperties | undefined;
+    pageSettings?: PageSettings;
 }
@@ -10,0 +11,0 @@ export interface InlineWidgetOptions {

typings/components/PopupText/PopupText.d.ts

 import * as React from "react";
-import { Prefill, Utm } from "../../calendly";
+import { PageSettings, Prefill, Utm } from "../../calendly";
 export interface Props {
@@ -8,2 +8,3 @@ url: string;
     utm?: Utm;
+    pageSettings?: PageSettings;
 }
@@ -10,0 +11,0 @@ export interface PopupWidgetOptions {

typings/components/PopupWidget/PopupWidget.d.ts

 import * as React from "react";
-import { Prefill, Utm } from "../../calendly";
+import { PageSettings, Prefill, Utm } from "../../calendly";
 export interface Props {
@@ -11,2 +11,3 @@ url: string;
     utm?: Utm;
+    pageSettings?: PageSettings;
 }
@@ -13,0 +14,0 @@ declare class PopupWidget extends React.Component<Props> {

No alert changes

Improved metrics

Total package byte prevSize

225546

increased by7.33%

Lines of code

1765

increased by6.2%

Number of lines in readme file

26

increased by30%

Worsened metrics

Number of package files

14

decreased by-6.67%

No dependency changes