Merge pull request #1586 from Shopify/customer-account-2024-01

prepare customer accounts for 2024-01 stable release

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

@@ -5,11 +5,8 @@ export {
   isConditionalStyleWithDefault,
   Style,
 } from '@shopify/ui-extensions/customer-account';
-export {render, reactExtension} from './customer-account/render';
-
 export type {
   AccessibilityRole,
-  ActionExtensionApi,
   Alignment,
   AllowedComponentsForRenderExtension,
   ApiForRenderExtension,
@@ -45,17 +42,12 @@ export type {
   ExtensionTarget,
   ExtensionTargets,
   Fit,
-  FullExtensionNavigation,
-  FullPageApi,
   GridItemSize,
-  I18n,
   I18nTranslate,
   InlineAlignment,
   MaybeConditionalStyle,
   MaybeResponsiveConditionalStyle,
   InteractiveConditions,
-  Language,
-  Localization,
   MaybeShorthandProperty,
   NonPresentationalAccessibilityRole,
   OverlayActivatorProps,
@@ -75,7 +67,6 @@ export type {
   SpacingProps,
   Status,
   Version,
-  VisibilityProps,
   ViewCoordinate,
   ViewTranslate,
   ViewportSizeCondition,
@@ -85,5 +76,7 @@ export type {
   YearMonth,
 } from '@shopify/ui-extensions/customer-account';
 
-export * from './customer-account/components';
 export * from './customer-account/hooks';
+export {render, reactExtension} from './customer-account/render';
+
+export * from './customer-account/components';

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

@@ -1,8 +1,2 @@
 export * from './Card';
-export * from './CustomerAccountAction';
-export * from './Page';
-/* @internal */
-export * from './PolicyModal';
-export * from './ResourceItem';
-export * from './ImageGroup';
 export * from './shared-checkout-components';

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

@@ -17,13 +17,3 @@ export class ExtensionHasNoMethodError extends Error {
     );
   }
 }
-
-export class ExtensionHasNoFieldError extends Error {
-  name = 'ExtensionHasNoFieldrror';
-
-  constructor(field: string, target: ExtensionTarget) {
-    super(
-      `Cannot access '${field}' on target '${target}'. The corresponding property was not found on the API.`,
-    );
-  }
-}

packages/ui-extensions-react/src/surfaces/customer-account/hooks/app-metafields.ts

@@ -1,15 +1,12 @@
 import type {
+  RenderExtensionTarget,
   AppMetafieldEntryTarget,
   Metafield,
   AppMetafieldEntry,
-  RenderOrderStatusExtensionTarget,
 } from '@shopify/ui-extensions/customer-account';
 import {useMemo} from 'react';
 
-import {
-  CustomerAccountUIExtensionError,
-  ExtensionHasNoFieldError,
-} from '../errors';
+import {CustomerAccountUIExtensionError} from '../errors';
 
 import {useApi} from './api';
 import {useSubscription} from './subscription';
@@ -28,16 +25,9 @@ type AppMetafieldFilterKeys = keyof AppMetafieldFilters;
  * @arg {AppMetafieldFilters} - filter the list of returned metafields
  */
 export function useAppMetafields<
-  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
+  Target extends RenderExtensionTarget = RenderExtensionTarget,
 >(filters: AppMetafieldFilters = {}): AppMetafieldEntry[] {
-  const api = useApi<Target>();
-  const extensionTarget = api.extension.target;
-
-  if (!('appMetafields' in api)) {
-    throw new ExtensionHasNoFieldError('appMetafields', extensionTarget);
-  }
-
-  const appMetafields = useSubscription(api.appMetafields);
+  const appMetafields = useSubscription(useApi<Target>().appMetafields);
 
   return useMemo(() => {
     if (filters.key && !filters.namespace) {

packages/ui-extensions-react/src/surfaces/customer-account/hooks/attributes.ts

@@ -1,26 +1,18 @@
 import type {
   Attribute,
-  RenderOrderStatusExtensionTarget,
+  RenderExtensionTarget,
 } from '@shopify/ui-extensions/customer-account';
 
 import {useApi} from './api';
 import {useSubscription} from './subscription';
-import {ExtensionHasNoFieldError} from '../errors';
 
 /**
  * Returns the proposed `attributes` applied to the checkout.
  */
 export function useAttributes<
-  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
+  Target extends RenderExtensionTarget = RenderExtensionTarget,
 >(): Attribute[] | undefined {
-  const api = useApi<Target>();
-  const extensionTarget = api.extension.target;
-
-  if (!('attributes' in api)) {
-    throw new ExtensionHasNoFieldError('attributes', extensionTarget);
-  }
-
-  return useSubscription(api.attributes);
+  return useSubscription(useApi<Target>().attributes);
 }
 
 /**
@@ -29,7 +21,7 @@ export function useAttributes<
  * @param keys - An array of attribute keys.
  */
 export function useAttributeValues<
-  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
+  Target extends RenderExtensionTarget = RenderExtensionTarget,
 >(keys: string[]): (string | undefined)[] {
   const attributes = useAttributes<Target>();
 

packages/ui-extensions-react/src/surfaces/customer-account/hooks/buyer-identity.ts

@@ -1,11 +1,10 @@
 import type {
   Customer,
-  OrderStatusBuyerIdentity,
   PurchasingCompany,
-  RenderOrderStatusExtensionTarget,
+  RenderExtensionTarget,
 } from '@shopify/ui-extensions/customer-account';
 
-import {ExtensionHasNoFieldError, ScopeNotGrantedError} from '../errors';
+import {ScopeNotGrantedError} from '../errors';
 
 import {useApi} from './api';
 import {useSubscription} from './subscription';
@@ -16,9 +15,15 @@ import {useSubscription} from './subscription';
  * The value is `undefined` if the buyer isn't a known customer for this shop or if they haven't logged in yet.
  */
 export function useCustomer<
-  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
+  Target extends RenderExtensionTarget = RenderExtensionTarget,
 >(): Customer | undefined {
-  const buyerIdentity = useInternalBuyerIdentity<Target>();
+  const buyerIdentity = useApi<Target>().buyerIdentity;
+
+  if (!buyerIdentity) {
+    throw new ScopeNotGrantedError(
+      'Using buyer identity requires having personal customer data permissions granted to your app.',
+    );
+  }
 
   return useSubscription(buyerIdentity.customer);
 }
@@ -28,9 +33,15 @@ export function useCustomer<
  * The value is `undefined` if the app does not have access to customer data.
  */
 export function useEmail<
-  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
+  Target extends RenderExtensionTarget = RenderExtensionTarget,
 >(): string | undefined {
-  const buyerIdentity = useInternalBuyerIdentity<Target>();
+  const buyerIdentity = useApi<Target>().buyerIdentity;
+
+  if (!buyerIdentity) {
+    throw new ScopeNotGrantedError(
+      'Using buyer identity requires having personal customer data permissions granted to your app.',
+    );
+  }
 
   return useSubscription(buyerIdentity.email);
 }
@@ -40,9 +51,15 @@ export function useEmail<
  * The value is `undefined` if the app does not have access to customer data.
  */
 export function usePhone<
-  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
+  Target extends RenderExtensionTarget = RenderExtensionTarget,
 >(): string | undefined {
-  const buyerIdentity = useInternalBuyerIdentity<Target>();
+  const buyerIdentity = useApi<Target>().buyerIdentity;
+
+  if (!buyerIdentity) {
+    throw new ScopeNotGrantedError(
+      'Using buyer identity requires having personal customer data permissions granted to your app.',
+    );
+  }
 
   return useSubscription(buyerIdentity.phone);
 }
@@ -55,28 +72,15 @@ export function usePhone<
  * The value is `undefined` if a business customer isn't logged in. This function throws an error if the app doesn't have access to customer data.
  */
 export function usePurchasingCompany<
-  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
+  Target extends RenderExtensionTarget = RenderExtensionTarget,
 >(): PurchasingCompany | undefined {
-  const buyerIdentity = useInternalBuyerIdentity<Target>();
+  const buyerIdentity = useApi<Target>().buyerIdentity;
 
-  return useSubscription(buyerIdentity.purchasingCompany);
-}
-
-function useInternalBuyerIdentity<
-  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
->(): OrderStatusBuyerIdentity {
-  const api = useApi<Target>();
-  const extensionTarget = api.extension.target;
-
-  if (!('buyerIdentity' in api)) {
-    throw new ExtensionHasNoFieldError('buyerIdentity', extensionTarget);
-  }
-
-  if (!api.buyerIdentity) {
+  if (!buyerIdentity) {
     throw new ScopeNotGrantedError(
       'Using buyer identity requires having personal customer data permissions granted to your app.',
     );
   }
 
-  return api.buyerIdentity;
+  return useSubscription(buyerIdentity.purchasingCompany);
 }