customer account

.changeset/small-squids-poke.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions': patch
+'@shopify/ui-extensions-react': patch
+---
+
+Move customer account ui extension from main to unstable branch.

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

@@ -6,77 +6,18 @@ export {
   Style,
 } from '@shopify/ui-extensions/customer-account';
 export type {
-  AccessibilityRole,
-  Alignment,
-  AllowedComponentsForRenderExtension,
-  ApiForRenderExtension,
-  Appearance,
-  AtLeastOne,
   ArgumentsForExtension,
-  Autocomplete,
-  AutocompleteField,
-  AutocompleteGroup,
-  Background,
-  BackgroundFit,
-  BackgroundPosition,
-  BackgroundProps,
-  BackgroundRepeat,
-  BlockAlignment,
-  BorderRadius,
-  BorderProps,
-  CornerProps,
-  CornerRadius,
-  BorderStyle,
-  BorderWidth,
-  Breakpoint,
-  Columns,
-  Conditions,
-  ConditionalStyle,
-  ConditionalValue,
-  DayString,
-  DateString,
-  DateRange,
-  DisclosureActivatorProps,
-  DisclosureOpen,
-  DisabledDate,
-  ExtensionTarget,
-  ExtensionTargets,
-  Fit,
-  GridItemSize,
-  I18nTranslate,
-  InlineAlignment,
-  MaybeConditionalStyle,
-  MaybeResponsiveConditionalStyle,
-  InteractiveConditions,
-  MaybeShorthandProperty,
-  NonPresentationalAccessibilityRole,
-  OverlayActivatorProps,
-  PopoverPosition,
   RenderExtension,
-  RenderExtensions,
-  ResolutionCondition,
+  RunExtension,
   ReturnTypeForExtension,
-  Rows,
-  ScrollViewEvent,
-  ShopifyGlobal,
-  ShorthandProperty,
-  SelectedDate,
-  Size,
-  SizingProps,
-  Spacing,
-  SpacingProps,
-  Status,
-  Version,
-  ViewCoordinate,
-  ViewTranslate,
-  ViewportSizeCondition,
-  ViewPosition,
-  ViewPositionType,
-  ViewLikeAccessibilityRole,
-  YearMonth,
+  StandardApi,
+  Language,
+  Localization,
+  I18nTranslate,
+  I18n,
+  FullPageApi,
 } 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 './checkout/components';

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

@@ -0,0 +1,14 @@
+import {CustomerAccountAction as BaseCustomerAccountAction} from '@shopify/ui-extensions/customer-account';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type CustomerAccountActionProps = ReactPropsFromRemoteComponentType<
+  typeof BaseCustomerAccountAction
+>;
+
+export const CustomerAccountAction = createRemoteReactComponent(
+  BaseCustomerAccountAction,
+  {fragmentProps: ['primaryAction', 'secondaryAction']},
+);

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

@@ -0,0 +1,2 @@
+export {CustomerAccountAction} from './CustomerAccountAction';
+export type {CustomerAccountActionProps} from './CustomerAccountAction';

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

@@ -0,0 +1,13 @@
+import {CustomerAccountCard as BaseCustomerAccountCard} from '@shopify/ui-extensions/customer-account';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type CustomerAccountCardProps = ReactPropsFromRemoteComponentType<
+  typeof BaseCustomerAccountCard
+>;
+
+export const CustomerAccountCard = createRemoteReactComponent(
+  BaseCustomerAccountCard,
+);

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

@@ -0,0 +1,2 @@
+export {CustomerAccountCard} from './CustomerAccountCard';
+export type {CustomerAccountCardProps} from './CustomerAccountCard';

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

@@ -0,0 +1,11 @@
+import {PaymentIcon as BasePaymentIcon} from '@shopify/ui-extensions/customer-account';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type PaymentIconProps = ReactPropsFromRemoteComponentType<
+  typeof BasePaymentIcon
+>;
+
+export const PaymentIcon = createRemoteReactComponent(BasePaymentIcon);

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

@@ -0,0 +1,2 @@
+export {PaymentIcon} from './PaymentIcon';
+export type {PaymentIconProps} from './PaymentIcon';

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

@@ -0,0 +1,11 @@
+import {PolicyModal as BasePolicyModal} from '@shopify/ui-extensions/customer-account';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type PolicyModalProps = ReactPropsFromRemoteComponentType<
+  typeof BasePolicyModal
+>;
+
+export const PolicyModal = createRemoteReactComponent(BasePolicyModal);

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

@@ -0,0 +1,2 @@
+export {PolicyModal} from './PolicyModal';
+export type {PolicyModalProps} from './PolicyModal';

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

@@ -0,0 +1,11 @@
+import {Thumbnail as BaseThumbnail} from '@shopify/ui-extensions/customer-account';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type ThumbnailProps = ReactPropsFromRemoteComponentType<
+  typeof BaseThumbnail
+>;
+
+export const Thumbnail = createRemoteReactComponent(BaseThumbnail);

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

@@ -0,0 +1,2 @@
+export {Thumbnail} from './Thumbnail';
+export type {ThumbnailProps} from './Thumbnail';

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

@@ -0,0 +1,6 @@
+export * from './CustomerAccountCard';
+export * from './CustomerAccountAction';
+export * from './PaymentIcon';
+export * from './PolicyModal';
+export * from './Thumbnail';
+export * from './shared-checkout-components';

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

@@ -0,0 +1,101 @@
+export {
+  Banner,
+  BlockLayout,
+  BlockSpacer,
+  BlockStack,
+  Button,
+  Checkbox,
+  Choice,
+  ChoiceList,
+  DateField,
+  DatePicker,
+  Divider,
+  Form,
+  Grid,
+  GridItem,
+  Heading,
+  HeadingGroup,
+  Icon,
+  Image,
+  InlineLayout,
+  InlineStack,
+  InlineSpacer,
+  Link,
+  List,
+  ListItem,
+  Pressable,
+  Select,
+  SkeletonImage,
+  SkeletonText,
+  SkeletonTextBlock,
+  Spinner,
+  Stepper,
+  Tag,
+  Text,
+  TextBlock,
+  TextField,
+  View,
+  Modal,
+  Popover,
+  ScrollView,
+  Tooltip,
+} from '../../checkout/components';
+
+export type {
+  BannerProps,
+  BlockLayoutProps,
+  BlockSpacerProps,
+  BlockStackProps,
+  ButtonProps,
+  CheckboxProps,
+  ChoiceProps,
+  ChoiceListProps,
+  DatePickerProps,
+  DateFieldProps,
+  DividerProps,
+  FormProps,
+  GridProps,
+  GridItemSize,
+  GridItemProps,
+  HeadingProps,
+  HeadingGroupProps,
+  IconProps,
+  ImageProps,
+  InlineLayoutProps,
+  InlineStackProps,
+  InlineSpacerProps,
+  LinkProps,
+  ListProps,
+  ListItemProps,
+  ModalProps,
+  PopoverProps,
+  PressableProps,
+  SelectProps,
+  SkeletonImageProps,
+  SkeletonTextProps,
+  SkeletonTextBlockProps,
+  SpinnerProps,
+  StepperProps,
+  TagProps,
+  TextProps,
+  TextBlockProps,
+  TextFieldProps,
+  ViewProps,
+  ViewPosition,
+  ViewPositionType,
+  ViewTranslate,
+  ViewCoordinate,
+  AccessibilityRole,
+  ViewLikeAccessibilityRole,
+  NonPresentationalAccessibilityRole,
+  Autocomplete,
+  AutocompleteField,
+  AutocompleteGroup,
+  Status,
+  Size,
+  Spacing,
+  Alignment,
+  Appearance,
+  ScrollViewProps,
+  TooltipProps,
+} from '../../checkout';

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

@@ -1,5 +1,5 @@
 import type {
-  RenderExtensionTarget,
+  RenderOrderStatusExtensionTarget,
   AppMetafieldEntryTarget,
   Metafield,
   AppMetafieldEntry,
@@ -25,7 +25,7 @@ type AppMetafieldFilterKeys = keyof AppMetafieldFilters;
  * @arg {AppMetafieldFilters} - filter the list of returned metafields
  */
 export function useAppMetafields<
-  Target extends RenderExtensionTarget = RenderExtensionTarget,
+  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
 >(filters: AppMetafieldFilters = {}): AppMetafieldEntry[] {
   const appMetafields = useSubscription(useApi<Target>().appMetafields);
 

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

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

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

@@ -1,7 +1,9 @@
 import type {
   Customer,
-  PurchasingCompany,
+  OrderStatusPurchasingCompany,
+  PurchasingCompany as CustomerAccountPurchasingCompany,
   RenderExtensionTarget,
+  RenderOrderStatusExtensionTarget,
 } from '@shopify/ui-extensions/customer-account';
 
 import {ScopeNotGrantedError} from '../errors';
@@ -15,7 +17,7 @@ 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 RenderExtensionTarget = RenderExtensionTarget,
+  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
 >(): Customer | undefined {
   const buyerIdentity = useApi<Target>().buyerIdentity;
 
@@ -33,7 +35,7 @@ export function useCustomer<
  * The value is `undefined` if the app does not have access to customer data.
  */
 export function useEmail<
-  Target extends RenderExtensionTarget = RenderExtensionTarget,
+  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
 >(): string | undefined {
   const buyerIdentity = useApi<Target>().buyerIdentity;
 
@@ -51,7 +53,7 @@ export function useEmail<
  * The value is `undefined` if the app does not have access to customer data.
  */
 export function usePhone<
-  Target extends RenderExtensionTarget = RenderExtensionTarget,
+  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
 >(): string | undefined {
   const buyerIdentity = useApi<Target>().buyerIdentity;
 
@@ -64,6 +66,10 @@ export function usePhone<
   return useSubscription(buyerIdentity.phone);
 }
 
+type PurchasingCompany<Target> = Target extends RenderOrderStatusExtensionTarget
+  ? OrderStatusPurchasingCompany | undefined
+  : CustomerAccountPurchasingCompany | undefined;
+
 /**
  * Provides information about the company and its location that the business customer
  * is purchasing on behalf of during a B2B checkout. It includes details that can be utilized to
@@ -73,7 +79,7 @@ export function usePhone<
  */
 export function usePurchasingCompany<
   Target extends RenderExtensionTarget = RenderExtensionTarget,
->(): PurchasingCompany | undefined {
+>(): PurchasingCompany<Target> {
   const buyerIdentity = useApi<Target>().buyerIdentity;
 
   if (!buyerIdentity) {
@@ -82,5 +88,7 @@ export function usePurchasingCompany<
     );
   }
 
-  return useSubscription(buyerIdentity.purchasingCompany);
+  return useSubscription(
+    buyerIdentity.purchasingCompany,
+  ) as PurchasingCompany<Target>;
 }