Update/purchases state management (#35697)

* Move purchases call to data query * changelog * Create context version of global notices * Add purchases type * Update changelogs * Try to fix bad minification * Try to fix minification issue * Trying to fix build errors * changelog * Remove unnecessary ternary * Update ai-client imports to include react types * Shorten ternary * Remove unnecessary ternary * Correct prop name * Pass certain button props in a better way * Imporove typing for notice context * Replace all wordpress/element imports with React * Bandain typing for ai-client * Fix type for context Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/8024226800
Automattic · Feb 23, 2024 · e133417 · e133417
1 parent 76d3bba
commit e133417
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 30 deletions.
diff --git a/build/components/ai-control/index.d.ts b/build/components/ai-control/index.d.ts
@@ -7,6 +7,7 @@ import './style.scss';
  * Types
  */
 import type { RequestingStateProp } from '../../types.js';
+import type { ReactElement } from 'react';
 type AiControlProps = {
     disabled?: boolean;
     value: string;
@@ -17,23 +18,23 @@ type AiControlProps = {
     isTransparent?: boolean;
     state?: RequestingStateProp;
     showGuideLine?: boolean;
-    customFooter?: React.ReactElement;
+    customFooter?: ReactElement;
     onChange?: (newValue: string) => void;
     onSend?: (currentValue: string) => void;
     onStop?: () => void;
     onAccept?: () => void;
     onDiscard?: () => void;
     showRemove?: boolean;
-    bannerComponent?: React.ReactElement;
-    errorComponent?: React.ReactElement;
+    bannerComponent?: ReactElement;
+    errorComponent?: ReactElement;
 };
 /**
  * AI Control component.
  *
  * @param {AiControlProps} props       - Component props.
  * @param {React.MutableRefObject} ref - Ref to the component.
- * @returns {React.ReactElement}         Rendered component.
+ * @returns {ReactElement}         Rendered component.
  */
-export declare function AIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, bannerComponent, errorComponent, }: AiControlProps, ref: React.MutableRefObject<null>): React.ReactElement;
+export declare function AIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, bannerComponent, errorComponent, }: AiControlProps, ref: React.MutableRefObject<null>): ReactElement;
 declare const _default: React.ForwardRefExoticComponent<AiControlProps & React.RefAttributes<null>>;
 export default _default;
diff --git a/build/components/ai-control/index.js b/build/components/ai-control/index.js
@@ -5,10 +5,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { PlainText } from '@wordpress/block-editor';
 import { Button, ButtonGroup } from '@wordpress/components';
 import { useKeyboardShortcut } from '@wordpress/compose';
-import { forwardRef, useImperativeHandle, useRef, useEffect, useCallback, } from '@wordpress/element';
+import { useImperativeHandle, useRef, useEffect, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, closeSmall, check, arrowUp, trash, reusableBlock } from '@wordpress/icons';
 import classNames from 'classnames';
+import { forwardRef } from 'react';
 import React from 'react';
 /**
  * Internal dependencies
@@ -23,10 +24,9 @@ const noop = () => { };
  *
  * @param {AiControlProps} props       - Component props.
  * @param {React.MutableRefObject} ref - Ref to the component.
- * @returns {React.ReactElement}         Rendered component.
+ * @returns {ReactElement}         Rendered component.
  */
-export function AIControl({ disabled = false, value = '', placeholder = '', showAccept = false, acceptLabel = __('Accept', 'jetpack-ai-client'), showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, customFooter = null, onChange = noop, onSend = noop, onStop = noop, onAccept = noop, onDiscard = null, showRemove = false, bannerComponent = null, errorComponent = null, }, ref // eslint-disable-line @typescript-eslint/ban-types
-) {
+export function AIControl({ disabled = false, value = '', placeholder = '', showAccept = false, acceptLabel = __('Accept', 'jetpack-ai-client'), showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, customFooter = null, onChange = noop, onSend = noop, onStop = noop, onAccept = noop, onDiscard = null, showRemove = false, bannerComponent = null, errorComponent = null, }, ref) {
     const promptUserInputRef = useRef(null);
     const loading = state === 'requesting' || state === 'suggesting';
     const [editRequest, setEditRequest] = React.useState(false);

diff --git a/build/data-flow/context.d.ts b/build/data-flow/context.d.ts
@@ -1,3 +1,6 @@
+/**
+ * External dependencies
+ */
 import React from 'react';
 /**
  * Types & Constants
@@ -24,7 +27,7 @@ type AiDataContextProviderProps = {
  *
  * @returns {AiDataContextProps} Context.
  */
-export declare const AiDataContext: React.Context<AiDataContextProps>;
+export declare const AiDataContext: React.Context<object | AiDataContextProps>;
 /**
  * AI Data Context Provider
  *

diff --git a/build/data-flow/context.js b/build/data-flow/context.js
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * External dependencies
  */
-import { createContext } from '@wordpress/element';
+import { createContext } from 'react';
 /**
  * AI Data Context
  *

diff --git a/build/data-flow/use-ai-context.js b/build/data-flow/use-ai-context.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useCallback, useContext, useEffect } from '@wordpress/element';
+import { useCallback, useContext, useEffect } from 'react';
 /**
  * Internal dependencies
  */

diff --git a/src/components/ai-control/index.tsx b/src/components/ai-control/index.tsx
@@ -4,16 +4,11 @@
 import { PlainText } from '@wordpress/block-editor';
 import { Button, ButtonGroup } from '@wordpress/components';
 import { useKeyboardShortcut } from '@wordpress/compose';
-import {
-	forwardRef,
-	useImperativeHandle,
-	useRef,
-	useEffect,
-	useCallback,
-} from '@wordpress/element';
+import { useImperativeHandle, useRef, useEffect, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, closeSmall, check, arrowUp, trash, reusableBlock } from '@wordpress/icons';
 import classNames from 'classnames';
+import { forwardRef } from 'react';
 import React from 'react';
 /**
  * Internal dependencies
@@ -25,6 +20,7 @@ import { GuidelineMessage } from './message.js';
  * Types
  */
 import type { RequestingStateProp } from '../../types.js';
+import type { ReactElement } from 'react';
 type AiControlProps = {
 	disabled?: boolean;
 	value: string;
@@ -35,15 +31,15 @@ type AiControlProps = {
 	isTransparent?: boolean;
 	state?: RequestingStateProp;
 	showGuideLine?: boolean;
-	customFooter?: React.ReactElement;
+	customFooter?: ReactElement;
 	onChange?: ( newValue: string ) => void;
 	onSend?: ( currentValue: string ) => void;
 	onStop?: () => void;
 	onAccept?: () => void;
 	onDiscard?: () => void;
 	showRemove?: boolean;
-	bannerComponent?: React.ReactElement;
-	errorComponent?: React.ReactElement;
+	bannerComponent?: ReactElement;
+	errorComponent?: ReactElement;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -54,7 +50,7 @@ const noop = () => {};
  *
  * @param {AiControlProps} props       - Component props.
  * @param {React.MutableRefObject} ref - Ref to the component.
- * @returns {React.ReactElement}         Rendered component.
+ * @returns {ReactElement}         Rendered component.
  */
 export function AIControl(
 	{
@@ -77,8 +73,8 @@ export function AIControl(
 		bannerComponent = null,
 		errorComponent = null,
 	}: AiControlProps,
-	ref: React.MutableRefObject< null > // eslint-disable-line @typescript-eslint/ban-types
-): React.ReactElement {
+	ref: React.MutableRefObject< null >
+): ReactElement {
 	const promptUserInputRef = useRef( null );
 	const loading = state === 'requesting' || state === 'suggesting';
 	const [ editRequest, setEditRequest ] = React.useState( false );

diff --git a/src/data-flow/context.tsx b/src/data-flow/context.tsx
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { createContext } from '@wordpress/element';
-import React from 'react';
+import React, { createContext } from 'react';
 /**
  * Types & Constants
  */
@@ -61,7 +60,7 @@ type AiDataContextProviderProps = {
  *
  * @returns {AiDataContextProps} Context.
  */
-export const AiDataContext = createContext( {} as AiDataContextProps );
+export const AiDataContext = createContext< AiDataContextProps | object >( {} );
 
 /**
  * AI Data Context Provider

diff --git a/src/data-flow/use-ai-context.ts b/src/data-flow/use-ai-context.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useCallback, useContext, useEffect } from '@wordpress/element';
+import { useCallback, useContext, useEffect } from 'react';
 /**
  * Internal dependencies
  */
@@ -48,7 +48,7 @@ export default function useAiContext( {
 	onSuggestion,
 	onError,
 }: UseAiContextOptions = {} ): AiDataContextProps {
-	const context = useContext( AiDataContext );
+	const context = useContext( AiDataContext ) as AiDataContextProps;
 	const { eventSource } = context;
 
 	const done = useCallback( ( event: CustomEvent ) => onDone?.( event?.detail ), [ onDone ] );