Hide PolicyModal from 3P Apps

packages/ui-extensions-react/src/surfaces/customer-account/components/PolicyModal/PolicyModal.ts

@@ -1,11 +1,30 @@
-import {PolicyModal as BasePolicyModal} from '@shopify/ui-extensions/customer-account';
-import {
-  createRemoteReactComponent,
-  ReactPropsFromRemoteComponentType,
-} from '@remote-ui/react';
+import {createRemoteReactComponent} from '@remote-ui/react';
 
-export type PolicyModalProps = ReactPropsFromRemoteComponentType<
-  typeof BasePolicyModal
->;
+type PolicyType = 'refund';
 
-export const PolicyModal = createRemoteReactComponent(BasePolicyModal);
+// The interface was duplicated from the `ui-extensions` package because it no longer can be imported
+// More on the PR: https://github.com/Shopify/ui-extensions/pull/1399
+export interface PolicyModalProps {
+  /**
+   * Whether the modal should be rendered.
+   * Modal is a controlled component, so you must keep the state of the `open` prop yourself.
+   */
+  open: boolean;
+  /**
+   * Callback when either the close button, the backdrop, or the `escape` key is pressed.
+   * `onClose` is only called while the modal is open and attempts to be closed,
+   * not when it exits the viewport.
+   * You’ll usually want to use this callback to set the `open` prop to `false`.
+   */
+  onClose: () => void;
+  /**
+   * A title rendered as a `Heading` at the top of the modal.
+   */
+  title: string;
+  /**
+   * Type of policy to render.
+   */
+  type: PolicyType;
+}
+
+export const PolicyModal = createRemoteReactComponent('PolicyModal');

packages/ui-extensions-react/src/surfaces/customer-account/components/index.ts

@@ -1,5 +1,6 @@
 export * from './Card';
 export * from './CustomerAccountAction';
 export * from './Page';
+/* @internal */
 export * from './PolicyModal';
 export * from './shared-checkout-components';

packages/ui-extensions-react/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "outDir": "build/ts",
     "rootDir": "src",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "stripInternal": true
   },
   "include": ["config/typescript/faker.d.ts", "src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["src/**/*.example.tsx", "src/**/tests/**"],

packages/ui-extensions/src/surfaces/customer-account/components/PolicyModal/PolicyModal.ts

@@ -2,6 +2,8 @@ import {createRemoteComponent} from '@remote-ui/core';
 
 type PolicyType = 'refund';
 
+// The interface is duplicated in the `ui-extensions-react` package because it no longer can be imported
+// More on the PR: https://github.com/Shopify/ui-extensions/pull/1399
 export interface PolicyModalProps {
   /**
    * Whether the modal should be rendered.

packages/ui-extensions/src/surfaces/customer-account/components/index.ts

@@ -1,5 +1,6 @@
 export * from './Card';
 export * from './CustomerAccountAction';
 export * from './Page';
+/* @internal */
 export * from './PolicyModal';
 export * from './shared-checkout-components';

packages/ui-extensions/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../config/typescript/tsconfig.base.json",
   "compilerOptions": {
     "rootDir": "src",
-    "outDir": "build/ts"
+    "outDir": "build/ts",
+    "stripInternal": true
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["src/**/*.example.*", "src/**/tests/**"]