@automattic/jetpack-connection 0.35.2 → 0.35.3

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
 
+## [0.35.3] - 2024-08-21
+### Changed
+- Internal updates.
+
 ## [0.35.2] - 2024-08-19
 ### Changed
 - Updated package dependencies. [#38893]
@@ -827,6 +831,7 @@
 - `Main` and `ConnectUser` components added.
 - `JetpackRestApiClient` API client added.
 
+[0.35.3]: https://github.com/Automattic/jetpack-connection-js/compare/v0.35.2...v0.35.3
 [0.35.2]: https://github.com/Automattic/jetpack-connection-js/compare/v0.35.1...v0.35.2
 [0.35.1]: https://github.com/Automattic/jetpack-connection-js/compare/v0.35.0...v0.35.1
 [0.35.0]: https://github.com/Automattic/jetpack-connection-js/compare/v0.34.2...v0.35.0

package/components/connect-button/index.jsx

@@ -8,7 +8,7 @@ import useConnection from '../use-connection';
  * The RNA connection component.
  *
  * @param {object} props -- The properties.
- * @returns {React.Component} The RNA connection component.
+ * @return {React.Component} The RNA connection component.
  */
 const ConnectButton = props => {
 	const {

package/components/connect-screen/required-plan/index.jsx

@@ -9,7 +9,7 @@ import ConnectScreenRequiredPlanVisual from './visual';
  * The Connection Screen Visual component for consumers that require a Plan.
  *
  * @param {object} props -- The properties.
- * @returns {React.Component} The `ConnectScreenForRequiredPlan` component.
+ * @return {React.Component} The `ConnectScreenForRequiredPlan` component.
  */
 const ConnectScreenRequiredPlan = props => {
 	const {

package/components/connect-screen/required-plan/visual.jsx

@@ -19,7 +19,7 @@ const debug = debugFactory( 'jetpack:connection:ConnectScreenRequiredPlanVisual'
  * The Connection Screen Visual component for consumers that require a Plan.
  *
  * @param {object} props -- The properties.
- * @returns {React.Component} The `ConnectScreenRequiredPlanVisual` component.
+ * @return {React.Component} The `ConnectScreenRequiredPlanVisual` component.
  */
 const ConnectScreenRequiredPlanVisual = props => {
 	const {

package/components/connect-user/index.jsx

@@ -5,12 +5,12 @@ import { useState, useEffect } from 'react';
 /**
  * The user connection component.
  *
- * @param {object} props -- The properties.
+ * @param {object}   props              -- The properties.
  * @param {Function} props.redirectFunc -- The redirect function (`window.location.assign()` by default).
- * @param {string} props.connectUrl -- The authorization URL (no-iframe).
- * @param {string} props.redirectUri -- The redirect admin URI.
- * @param {string} props.from -- Where the connection request is coming from.
- * @returns {null} -- Nothing to return.
+ * @param {string}   props.connectUrl   -- The authorization URL (no-iframe).
+ * @param {string}   props.redirectUri  -- The redirect admin URI.
+ * @param {string}   props.from         -- Where the connection request is coming from.
+ * @return {null} -- Nothing to return.
  */
 const ConnectUser = props => {
 	const {

package/components/connected-plugins/index.jsx

@@ -7,7 +7,7 @@ import DisconnectCard from '../disconnect-card';
  * Render a list of connected plugins.
  *
  * @param {object} props - The properties
- * @returns {React.Component} - The ConnectedPlugins React component
+ * @return {React.Component} - The ConnectedPlugins React component
  */
 
 const ConnectedPlugins = props => {

package/components/connection-error-notice/index.jsx

@@ -9,7 +9,7 @@ import styles from './styles.module.scss';
  * The RNA Connection Error Notice component.
  *
  * @param {object} props -- The properties.
- * @returns {React.Component} The `ConnectionErrorNotice` component.
+ * @return {React.Component} The `ConnectionErrorNotice` component.
  */
 const ConnectionErrorNotice = props => {
 	const { message, isRestoringConnection, restoreConnectionCallback, restoreConnectionError } =

package/components/disconnect-card/index.jsx

@@ -8,7 +8,7 @@ import './style.scss';
  * Used in the disconnection flow.
  *
  * @param {object} props - The Properties.
- * @returns {React.Component} DisconnectCard - The disconnect card component.
+ * @return {React.Component} DisconnectCard - The disconnect card component.
  */
 const DisconnectCard = props => {
 	const { title, value, description } = props;

package/components/disconnect-dialog/index.jsx

@@ -15,7 +15,7 @@ import StepThankYou from './steps/step-thank-you';
  * The RNA Disconnect Dialog component.
  *
  * @param {object} props -- The properties.
- * @returns {React.Component} The `DisconnectDialog` component.
+ * @return {React.Component} The `DisconnectDialog` component.
  */
 const DisconnectDialog = props => {
 	const [ isDisconnecting, setIsDisconnecting ] = useState( false );
@@ -302,7 +302,7 @@ const DisconnectDialog = props => {
 	/**
 	 * Determine what step to show based on the current state
 	 *
-	 * @returns { React.Component|undefined } - component for current step
+	 * @return { React.Component|undefined } - component for current step
 	 */
 	const getCurrentStep = () => {
 		if ( ! isDisconnected ) {

package/components/disconnect-dialog/steps/step-disconnect-confirm.jsx

@@ -11,7 +11,7 @@ import disconnectImage from '../images/disconnect-confirm.jpg';
  * Will only show option to provide feedback if the canProvideFeedback prop is true.
  *
  * @param {object} props - The properties.
- * @returns {React.Component} - StepDisconnectConfirm Component
+ * @return {React.Component} - StepDisconnectConfirm Component
  */
 const StepDisconnectConfirm = props => {
 	const { onExit, canProvideFeedback, onProvideFeedback } = props;

package/components/disconnect-dialog/steps/step-disconnect.jsx

@@ -10,7 +10,7 @@ import ConnectedPlugins from '../../connected-plugins';
  * Disconnect step in disconnection flow.
  *
  * @param {object} props - The properties.
- * @returns {React.Component} - The StepDisconnect component
+ * @return {React.Component} - The StepDisconnect component
  */
 const StepDisconnect = props => {
 	const {
@@ -66,7 +66,7 @@ const StepDisconnect = props => {
 	/**
 	 * Render the disconnect button, allows for some variance based on context.
 	 *
-	 * @returns {React.Component} - Button used for disconnect.
+	 * @return {React.Component} - Button used for disconnect.
 	 */
 	const renderDisconnectButton = () => {
 		let buttonText = __( 'Disconnect', 'jetpack' );
@@ -93,7 +93,7 @@ const StepDisconnect = props => {
 	 * Show some fallback output if there are no connected plugins to show and no passed disconnect component.
 	 * This is a more generic message about disconnecting Jetpack.
 	 *
-	 * @returns {React.ElementType|undefined} - Fallback message for when there are no connected plugins or passed components to show.
+	 * @return {React.ElementType|undefined} - Fallback message for when there are no connected plugins or passed components to show.
 	 */
 	const renderFallbackOutput = () => {
 		const hasOtherConnectedPlugins =

package/components/disconnect-dialog/steps/step-survey.jsx

@@ -10,7 +10,7 @@ import DisconnectSurvey from '../../disconnect-survey';
  * Show the survey step and allow the user to select a response.
  *
  * @param {object} props - The properties.
- * @returns {React.Component} The StepSurvey Component
+ * @return {React.Component} The StepSurvey Component
  */
 const StepSurvey = props => {
 	const { onExit, onFeedBackProvided, isSubmittingFeedback } = props;

package/components/disconnect-dialog/steps/step-thank-you.jsx

@@ -10,7 +10,7 @@ import disconnectImage from '../images/disconnect-thanks.jpg';
  * Show the "thank you" step following survey submission
  *
  * @param {object} props - The properties.
- * @returns {React.Component} - The StepThankYou Component
+ * @return {React.Component} - The StepThankYou Component
  */
 const StepThankYou = props => {
 	const { onExit } = props;

package/components/disconnect-survey/index.jsx

@@ -8,7 +8,7 @@ import SurveyChoice from './survey-choice';
  * Handles showing the disconnect survey.
  *
  * @param {object} props - The component props.
- * @returns {React.Component} - DisconnectSurvey component.
+ * @return {React.Component} - DisconnectSurvey component.
  */
 const DisconnectSurvey = props => {
 	const { onSubmit, isSubmittingFeedback } = props;
@@ -68,8 +68,8 @@ const DisconnectSurvey = props => {
 	/**
 	 * Checks to see if an option is the currently selected option, returns a css class name if it matches.
 	 *
-	 * @param {string} optionId   - ID of the option to check for.
-	 * @returns {string} - The "selected" class if this option is currently selected.
+	 * @param {string} optionId - ID of the option to check for.
+	 * @return {string} - The "selected" class if this option is currently selected.
 	 */
 	const selectedClass = optionId => {
 		if ( optionId === selectedAnswer ) {
@@ -83,7 +83,7 @@ const DisconnectSurvey = props => {
 	 * Event handler for keyboard events on the answer blocks.
 	 *
 	 * @param {string} answerId - The slug of the answer that has been selected.
-	 * @param {object} e - Keydown event.
+	 * @param {object} e        - Keydown event.
 	 */
 	const handleAnswerKeyDown = useCallback(
 		( answerId, e ) => {
@@ -102,7 +102,7 @@ const DisconnectSurvey = props => {
 	/**
 	 * Show all the survey options from the options array.
 	 *
-	 * @returns {React.ElementType []} - Mapped array of rendered survey options.
+	 * @return {React.ElementType []} - Mapped array of rendered survey options.
 	 */
 	const renderOptions = () => {
 		return options.map( option => {
@@ -123,7 +123,7 @@ const DisconnectSurvey = props => {
 	 * Show the custom input survey option.
 	 * Contains an input field for a custom response.
 	 *
-	 * @returns {React.ElementType} - The custom survey option with an input field.
+	 * @return {React.ElementType} - The custom survey option with an input field.
 	 */
 	const renderCustomOption = () => {
 		return (

package/components/disconnect-survey/survey-choice.jsx

@@ -5,12 +5,12 @@ import './_jp-connect_disconnect-survey-card.scss';
 /**
  * SurveyChoice - Present one choice in the survey.
  *
- * @param {string} props.id - The ID/slug string of the survey option
- * @param {Function} props.onClick - Event handler for clicking on the survey option.
- * @param {Function} props.onKeydown - Event handler for pressing a key on the survey option.
- * @param {React.ElementType} props.children - Any passed elements as children to this component.
- * @param {string} props.className - A class name to apply to the survey choice.
- * @returns {React.Component} SurveyChoice - The SurveyChoice component.
+ * @param {string}            props.id        - The ID/slug string of the survey option
+ * @param {Function}          props.onClick   - Event handler for clicking on the survey option.
+ * @param {Function}          props.onKeydown - Event handler for pressing a key on the survey option.
+ * @param {React.ElementType} props.children  - Any passed elements as children to this component.
+ * @param {string}            props.className - A class name to apply to the survey choice.
+ * @return {React.Component} SurveyChoice - The SurveyChoice component.
  */
 
 const SurveyChoice = props => {

package/components/in-place-connection/index.jsx

@@ -7,18 +7,18 @@ import './style.scss';
 /**
  * The in-place connection component.
  *
- * @param {object} props -- The properties.
- * @param {string} props.title -- Element title.
- * @param {boolean} props.isLoading -- Whether the element is still loading.
- * @param {string|number} props.width -- Iframe width.
- * @param {string|number} props.height -- Iframe height.
- * @param {boolean} props.displayTOS -- Whether the site has connection owner connected.
- * @param {boolean} props.scrollToIframe -- Whether we need to auto-scroll the window upon element rendering.
- * @param {string} props.connectUrl -- The connection URL.
- * @param {Function} props.onComplete -- The callback to be called upon complete of the connection process.
- * @param {Function} props.onThirdPartyCookiesBlocked -- The callback to be called if third-party cookies are disabled.
- * @param {string} props.location -- Component location identifier passed to WP.com.
- * @returns {React.Component} The in-place connection component.
+ * @param {object}        props                            -- The properties.
+ * @param {string}        props.title                      -- Element title.
+ * @param {boolean}       props.isLoading                  -- Whether the element is still loading.
+ * @param {string|number} props.width                      -- Iframe width.
+ * @param {string|number} props.height                     -- Iframe height.
+ * @param {boolean}       props.displayTOS                 -- Whether the site has connection owner connected.
+ * @param {boolean}       props.scrollToIframe             -- Whether we need to auto-scroll the window upon element rendering.
+ * @param {string}        props.connectUrl                 -- The connection URL.
+ * @param {Function}      props.onComplete                 -- The callback to be called upon complete of the connection process.
+ * @param {Function}      props.onThirdPartyCookiesBlocked -- The callback to be called if third-party cookies are disabled.
+ * @param {string}        props.location                   -- Component location identifier passed to WP.com.
+ * @return {React.Component} The in-place connection component.
  */
 const InPlaceConnection = props => {
 	const {

package/components/manage-connection-dialog/index.jsx

@@ -19,7 +19,7 @@ import './style.scss';
  * The RNA Manage Connection Dialog component.
  *
  * @param {object} props -- The properties.
- * @returns {React.JSX} The `ManageConnectionDialog` component.
+ * @return {React.JSX} The `ManageConnectionDialog` component.
  */
 const ManageConnectionDialog = props => {
 	const {

package/components/use-connection/index.jsx

@@ -41,7 +41,7 @@ export default ( {
 	/**
 	 * User register process handler.
 	 *
-	 * @returns {Promise} - Promise which resolves when the product status is activated.
+	 * @return {Promise} - Promise which resolves when the product status is activated.
 	 */
 	const handleConnectUser = () => {
 		if ( ! skipUserConnection ) {
@@ -64,7 +64,7 @@ export default ( {
 	 * the site was successfully registered.
 	 *
 	 * @param {Event} [e] - Event that dispatched handleRegisterSite
-	 * @returns {Promise}   Promise when running the registration process. Otherwise, nothing.
+	 * @return {Promise}   Promise when running the registration process. Otherwise, nothing.
 	 */
 	const handleRegisterSite = e => {
 		e && e.preventDefault();

package/helpers/get-calypso-origin.ts

@@ -3,7 +3,7 @@ import { getScriptData } from '@automattic/jetpack-script-data';
 /**
  * Get the Calypso origin based on the development environment.
  *
- * @returns {string} The Calypso url origin.
+ * @return {string} The Calypso url origin.
  */
 export default function getCalypsoOrigin() {
 	const calypsoEnv = (

package/hooks/use-connection-error-notice/index.jsx

@@ -7,7 +7,7 @@ import useRestoreConnection from '../../hooks/use-restore-connection/index.jsx';
  * Returns a ConnectionErrorNotice component and the conditional flag on whether
  * to render the component or not.
  *
- * @returns {object} - The hook data.
+ * @return {object} - The hook data.
  */
 export default function useConnectionErrorNotice() {
 	const { connectionErrors } = useConnection( {} );

package/hooks/use-product-checkout-workflow/index.jsx

@@ -22,17 +22,17 @@ const defaultAdminUrl =
  * Custom hook that performs the needed steps
  * to concrete the checkout workflow.
  *
- * @param {object} props                                  - The props passed to the hook.
- * @param {string} props.productSlug                      - The WordPress product slug.
- * @param {string} props.redirectUrl                      - The URI to redirect to after checkout.
- * @param {string} [props.siteSuffix]                     - The site suffix.
- * @param {string} [props.adminUrl]                       - The site wp-admin url.
- * @param {boolean} props.connectAfterCheckout            - Whether or not to conect after checkout if not connected (default false - connect before).
+ * @param {object}   props                                - The props passed to the hook.
+ * @param {string}   props.productSlug                    - The WordPress product slug.
+ * @param {string}   props.redirectUrl                    - The URI to redirect to after checkout.
+ * @param {string}   [props.siteSuffix]                   - The site suffix.
+ * @param {string}   [props.adminUrl]                     - The site wp-admin url.
+ * @param {boolean}  props.connectAfterCheckout           - Whether or not to conect after checkout if not connected (default false - connect before).
  * @param {Function} props.siteProductAvailabilityHandler - The function used to check whether the site already has the requested product. This will be checked after registration and the checkout page will be skipped if the promise returned resloves true.
  * @param {Function} props.from                           - The plugin slug initiated the flow.
- * @param {number} [props.quantity]                       - The quantity of the product to purchase.
- * @param {boolean} [props.useBlogIdSuffix]               - Use blog ID instead of site suffix in the checkout URL.
- * @returns {Function}                                      The useEffect hook.
+ * @param {number}   [props.quantity]                     - The quantity of the product to purchase.
+ * @param {boolean}  [props.useBlogIdSuffix]              - Use blog ID instead of site suffix in the checkout URL.
+ * @return {Function}                                      The useEffect hook.
  */
 export default function useProductCheckoutWorkflow( {
 	productSlug,
@@ -152,9 +152,9 @@ export default function useProductCheckoutWorkflow( {
 	/**
 	 * Handler to run the checkout workflow.
 	 *
-	 * @param {Event} [event] - Event that dispatched run
+	 * @param {Event}  [event]  - Event that dispatched run
 	 * @param {string} redirect - A possible redirect URL to go to after the checkout
-	 * @returns {void}          Nothing.
+	 * @return {void}          Nothing.
 	 */
 	const run = ( event, redirect = null ) => {
 		event && event.preventDefault();

package/hooks/use-restore-connection/index.jsx

@@ -11,7 +11,7 @@ const { apiRoot, apiNonce } =
  * Restore connection hook.
  * It will initiate an API request attempting to restore the connection, or reconnect if it cannot be restored.
  *
- * @returns {object} - The hook data.
+ * @return {object} - The hook data.
  */
 export default function useRestoreConnection() {
 	const [ isRestoringConnection, setIsRestoringConnection ] = useState( false );
@@ -25,7 +25,7 @@ export default function useRestoreConnection() {
 	 * Initiate connection restore.
 	 *
 	 * @param {boolean} autoReconnectUser - If user connection needs to be reestablished, automatically initiate the flow.
-	 * @returns {Promise<object>} - The API request promise.
+	 * @return {Promise<object>} - The API request promise.
 	 */
 	const restoreConnection = ( autoReconnectUser = true ) => {
 		setIsRestoringConnection( true );

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "0.35.2",
+	"version": "0.35.3",
 	"description": "Jetpack Connection Component",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
 	"bugs": {
@@ -14,11 +14,11 @@
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
 	"dependencies": {
-		"@automattic/jetpack-analytics": "^0.1.29",
-		"@automattic/jetpack-api": "^0.17.10",
-		"@automattic/jetpack-components": "^0.55.8",
+		"@automattic/jetpack-analytics": "^0.1.30",
+		"@automattic/jetpack-api": "^0.17.11",
+		"@automattic/jetpack-components": "^0.55.9",
 		"@automattic/jetpack-config": "^0.1.24",
-		"@automattic/jetpack-script-data": "^0.1.1",
+		"@automattic/jetpack-script-data": "^0.1.2",
 		"@wordpress/base-styles": "5.5.0",
 		"@wordpress/browserslist-config": "6.5.0",
 		"@wordpress/components": "28.5.0",

package/state/actions.jsx

@@ -72,11 +72,11 @@ const setIsOfflineMode = isOfflineMode => {
 /**
  * Connect site with wp.com user
  *
- * @param {object} Object - contains from and redirectFunc
- * @param {string} Object.from - Value that represents the redirect origin
- * @param {Function} Object.redirectFunc - A function to handle the redirect, defaults to location.assign
- * @param {string} [Object.redirectUri] - A URI that the user will be redirected to
- * @yields {object} Action object that will be yielded
+ * @param {object}   Object               - contains from and redirectFunc
+ * @param {string}   Object.from          - Value that represents the redirect origin
+ * @param {Function} Object.redirectFunc  - A function to handle the redirect, defaults to location.assign
+ * @param {string}   [Object.redirectUri] - A URI that the user will be redirected to
+ * @yield {object} Action object that will be yielded
  */
 function* connectUser( { from, redirectFunc, redirectUri } = {} ) {
 	yield setUserIsConnecting( true );
@@ -87,12 +87,12 @@ function* connectUser( { from, redirectFunc, redirectUri } = {} ) {
  *
  * Register an site into jetpack
  *
- * @param {object} Object - contains registrationNonce and redirectUri
+ * @param {object} Object                   - contains registrationNonce and redirectUri
  * @param {string} Object.registrationNonce - Registration nonce
- * @param {string} Object.redirectUri - URI that user will be redirected
- * @param {string} [Object.from] - Value that represents the origin of the request (optional)
- * @yields {object} Action object that will be yielded
- * @returns {Promise} Resolved or rejected value of registerSite
+ * @param {string} Object.redirectUri       - URI that user will be redirected
+ * @param {string} [Object.from]            - Value that represents the origin of the request (optional)
+ * @yield {object} Action object that will be yielded
+ * @return {Promise} Resolved or rejected value of registerSite
  */
 function* registerSite( { registrationNonce, redirectUri, from = '' } ) {
 	yield clearRegistrationError();
@@ -114,7 +114,7 @@ function* registerSite( { registrationNonce, redirectUri, from = '' } ) {
 /**
  * Side effect action which will fetch a new list of connectedPlugins from the server
  *
- * @returns {Promise} - Promise which resolves when the product status is activated.
+ * @return {Promise} - Promise which resolves when the product status is activated.
  */
 const refreshConnectedPlugins =
 	() =>

package/state/selectors.jsx

@@ -12,7 +12,7 @@ const connectionSelectors = {
 	 * Checks whether the store is fetching the connection status from the server
 	 *
 	 * @deprecated since 0.14.0
-	 * @returns {boolean} Is the store is fetching the connection status from the server?
+	 * @return {boolean} Is the store is fetching the connection status from the server?
 	 */
 	getConnectionStatusIsFetching: () => false,
 	getSiteIsRegistering: state => state.siteIsRegistering || false,