@shopify/shop-minis-react 0.18.0 → 0.20.0

package/eslint/config.cjs

@@ -8,6 +8,7 @@
 
 // Import the plugin directly so consumers don't need to install it separately
 const compatPlugin = require('eslint-plugin-compat')
+const importXPlugin = require('eslint-plugin-import-x')
 const reactPlugin = require('eslint-plugin-react')
 
 const shopMinisPlugin = require('./index.cjs')
@@ -29,6 +30,7 @@ module.exports = {
     'shop-minis': shopMinisPlugin,
     react: reactPlugin,
     compat: compatPlugin,
+    'import-x': importXPlugin,
   },
   rules: {
     // Console usage
@@ -37,6 +39,24 @@ module.exports = {
     // React security
     'react/no-danger': 'error',
 
+    // Block phantom-dep imports: every imported package must be declared in
+    // package.json. Hoisting can make undeclared imports resolve locally but
+    // they break under strict installs (pnpm) in the submission pipeline.
+    'import-x/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: [
+          '**/*.test.{js,jsx,ts,tsx}',
+          '**/*.spec.{js,jsx,ts,tsx}',
+          '**/test-setup.{js,ts}',
+          '**/test-utils.{js,jsx,ts,tsx}',
+          '**/setup-tests.{js,ts}',
+          '**/*.config.{js,cjs,mjs,ts}',
+        ],
+        includeTypes: true,
+      },
+    ],
+
     // Shop Minis custom rules
     'shop-minis/no-dynamic-asset-paths': 'warn',
     'shop-minis/no-env-without-fallback': 'error',

package/generated-hook-maps/hook-actions-map.json

@@ -15,6 +15,9 @@
   "useCheckPermissions": [
     "CHECK_PERMISSION"
   ],
+  "useCheckScopesConsent": [
+    "CHECK_SCOPES_CONSENT"
+  ],
   "useCloseMini": [
     "CLOSE_MINI"
   ],
@@ -104,6 +107,9 @@
   "useRequestPermissions": [
     "REQUEST_PERMISSION"
   ],
+  "useRequestScopesConsent": [
+    "REQUEST_SCOPES_CONSENT"
+  ],
   "useSavedProducts": [
     "GET_SAVED_PRODUCTS"
   ],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -63,7 +63,7 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.16.0",
+    "@shopify/shop-minis-platform": "0.17.0",
     "@tailwindcss/vite": "4.1.8",
     "@tanstack/react-query": "5.86.0",
     "@types/lodash": "4.17.20",
@@ -77,6 +77,7 @@
     "embla-carousel-react": "8.6.0",
     "eslint": "8.57.0",
     "eslint-plugin-compat": "6.0.2",
+    "eslint-plugin-import-x": "4.16.2",
     "eslint-plugin-no-secrets": "2.2.1",
     "eslint-plugin-react": "7.37.5",
     "js-base64": "3.7.7",

package/src/hooks/index.ts

@@ -51,6 +51,8 @@ export * from './util/useImagePicker'
 export * from './util/useKeyboardAvoidingView'
 export * from './util/useRequestPermissions'
 export * from './util/useCheckPermissions'
+export * from './util/useCheckScopesConsent'
+export * from './util/useRequestScopesConsent'
 
 // - Intent Hooks
 export * from './intents/useIntent'

package/src/hooks/util/useCheckScopesConsent.ts

@@ -0,0 +1,61 @@
+import {CheckScopesConsentResponse} from '@shopify/shop-minis-platform/actions'
+
+import {useShopActionQuery} from '../../internal/reactQuery'
+import {useShopActions} from '../../internal/useShopActions'
+
+export interface UseCheckScopesConsentReturns {
+  /**
+   * Required scopes declared by the mini, fetched fresh from the API.
+   */
+  requiredScopes: string[] | undefined
+  /**
+   * Scopes already granted by the user.
+   */
+  grantedScopes: string[] | undefined
+  /**
+   * Consent status derived from comparing required vs granted scopes.
+   *
+   * - `'granted'` — all required scopes are granted, or none declared
+   * - `'partially_granted'` — at least one required scope is granted but not all
+   * - `'not_granted'` — no required scopes are granted
+   */
+  status: CheckScopesConsentResponse['status'] | undefined
+  loading: boolean
+  error: Error | null
+  /**
+   * Re-fetch scope consent status. Call this after `requestScopesConsent()` resolves
+   * to get the updated status.
+   */
+  refetch: () => Promise<void>
+}
+
+export const useCheckScopesConsent = (): UseCheckScopesConsentReturns => {
+  const {checkScopesConsent} = useShopActions()
+  const {data, loading, error, refetch} = useShopActionQuery(
+    ['scopesConsent'],
+    checkScopesConsent,
+    {}
+  )
+  return {
+    requiredScopes: data?.requiredScopes,
+    grantedScopes: data?.grantedScopes,
+    status: data?.status,
+    loading,
+    error,
+    refetch,
+  }
+}
+
+/**
+ * Returns the current scope consent status for this mini, fetched fresh from the API on mount.
+ *
+ * Use `status` to branch UI on whether the user has granted all required scopes:
+ * - `'granted'` — all required scopes are granted (or none declared)
+ * - `'partially_granted'` — at least one required scope is granted but not all
+ * - `'not_granted'` — no required scopes are granted
+ *
+ * Call `refetch()` after `requestScopesConsent()` resolves to get the updated status.
+ * @publicDocs
+ */
+export type UseCheckScopesConsentGeneratedType =
+  () => UseCheckScopesConsentReturns

package/src/hooks/util/useRequestPermissions.ts

@@ -26,6 +26,7 @@ export const useRequestPermissions = (): UseRequestPermissionsReturns => {
 /**
  * The `useRequestPermissions` hook provides a function to request native device permissions from the user. It handles both app-level and system-level permission requests, showing appropriate dialogs and managing permission state. Supported permissions include camera, microphone, and device motion access.
  *
+ * `errorMessage` is normally a string describing the failure. The value `'request_blocked'` is a reserved sentinel — it means the request couldn't be served because another consent or permission sheet is already showing, or the Mini's scope state hasn't finished loading yet. Don't surface this string to users.
  *
  * > Note: Before using this hook, add the required permissions to your Mini's manifest file: `"permissions": ["CAMERA"]`.
  * @publicDocs

package/src/hooks/util/useRequestScopesConsent.ts

@@ -0,0 +1,38 @@
+import {RequestScopesConsentResponse} from '@shopify/shop-minis-platform/actions'
+
+import {useHandleAction} from '../../internal/useHandleAction'
+import {useShopActions} from '../../internal/useShopActions'
+
+export interface UseRequestScopesConsentReturns {
+  /**
+   * Programmatically show the consent sheet for the Mini's required scopes.
+   *
+   * The sheet will show even if the user previously rejected it in the same
+   * session. Use this to build retry UX (e.g., a "Connect account" button).
+   *
+   * Resolves with `{granted: boolean}`. Rejects with `'request_blocked'`
+   * if the request can't be served right now — either another consent or
+   * permission sheet is already showing, or the Mini's scope state hasn't
+   * finished loading yet.
+   *
+   * Call `refetch()` on `useCheckScopesConsent` after resolution to get the
+   * updated scope status.
+   */
+  requestScopesConsent: () => Promise<RequestScopesConsentResponse>
+}
+
+export const useRequestScopesConsent = (): UseRequestScopesConsentReturns => {
+  const {requestScopesConsent} = useShopActions()
+  return {
+    requestScopesConsent: useHandleAction(requestScopesConsent),
+  }
+}
+
+/**
+ * Returns a function to programmatically show the consent sheet. Use this to
+ * build re-consent UX after the user has previously rejected, or when partial
+ * scope grants are detected via `useCheckScopesConsent`.
+ * @publicDocs
+ */
+export type UseRequestScopesConsentGeneratedType =
+  () => UseRequestScopesConsentReturns

package/src/mocks.ts

@@ -578,6 +578,14 @@ export function makeMockActions(): ShopActions {
     checkPermission: {
       status: 'granted',
     },
+    checkScopesConsent: {
+      data: {
+        requiredScopes: ['profile'],
+        grantedScopes: ['profile'],
+        status: 'granted',
+      },
+    },
+    requestScopesConsent: {granted: true},
     reportError: undefined,
     reportFetch: undefined,
     invokeIntent: {code: 'closed' as const},