@shopify/ui-extensions 2023.7.2 → 2024.1.0

package/src/surfaces/point-of-sale/api/types/country-code.ts

@@ -0,0 +1,249 @@
+/* eslint @shopify/typescript/prefer-pascal-case-enums: off */
+
+export enum CountryCode {
+  AF = 'AF',
+  AX = 'AX',
+  AL = 'AL',
+  DZ = 'DZ',
+  AD = 'AD',
+  AO = 'AO',
+  AI = 'AI',
+  AG = 'AG',
+  AR = 'AR',
+  AM = 'AM',
+  AW = 'AW',
+  AC = 'AC',
+  AU = 'AU',
+  AT = 'AT',
+  AZ = 'AZ',
+  BS = 'BS',
+  BH = 'BH',
+  BD = 'BD',
+  BB = 'BB',
+  BY = 'BY',
+  BE = 'BE',
+  BZ = 'BZ',
+  BJ = 'BJ',
+  BM = 'BM',
+  BT = 'BT',
+  BO = 'BO',
+  BA = 'BA',
+  BW = 'BW',
+  BV = 'BV',
+  BR = 'BR',
+  IO = 'IO',
+  BN = 'BN',
+  BG = 'BG',
+  BF = 'BF',
+  BI = 'BI',
+  KH = 'KH',
+  CA = 'CA',
+  CV = 'CV',
+  BQ = 'BQ',
+  KY = 'KY',
+  CF = 'CF',
+  TD = 'TD',
+  CL = 'CL',
+  CN = 'CN',
+  CX = 'CX',
+  CC = 'CC',
+  CO = 'CO',
+  KM = 'KM',
+  CG = 'CG',
+  CD = 'CD',
+  CK = 'CK',
+  CR = 'CR',
+  HR = 'HR',
+  CU = 'CU',
+  CW = 'CW',
+  CY = 'CY',
+  CZ = 'CZ',
+  CI = 'CI',
+  DK = 'DK',
+  DJ = 'DJ',
+  DM = 'DM',
+  DO = 'DO',
+  EC = 'EC',
+  EG = 'EG',
+  SV = 'SV',
+  GQ = 'GQ',
+  ER = 'ER',
+  EE = 'EE',
+  SZ = 'SZ',
+  ET = 'ET',
+  FK = 'FK',
+  FO = 'FO',
+  FJ = 'FJ',
+  FI = 'FI',
+  FR = 'FR',
+  GF = 'GF',
+  PF = 'PF',
+  TF = 'TF',
+  GA = 'GA',
+  GM = 'GM',
+  GE = 'GE',
+  DE = 'DE',
+  GH = 'GH',
+  GI = 'GI',
+  GR = 'GR',
+  GL = 'GL',
+  GD = 'GD',
+  GP = 'GP',
+  GT = 'GT',
+  GG = 'GG',
+  GN = 'GN',
+  GW = 'GW',
+  GY = 'GY',
+  HT = 'HT',
+  HM = 'HM',
+  VA = 'VA',
+  HN = 'HN',
+  HK = 'HK',
+  HU = 'HU',
+  IS = 'IS',
+  IN = 'IN',
+  ID = 'ID',
+  IR = 'IR',
+  IQ = 'IQ',
+  IE = 'IE',
+  IM = 'IM',
+  IL = 'IL',
+  IT = 'IT',
+  JM = 'JM',
+  JP = 'JP',
+  JE = 'JE',
+  JO = 'JO',
+  KZ = 'KZ',
+  KE = 'KE',
+  KI = 'KI',
+  KP = 'KP',
+  XK = 'XK',
+  KW = 'KW',
+  KG = 'KG',
+  LA = 'LA',
+  LV = 'LV',
+  LB = 'LB',
+  LS = 'LS',
+  LR = 'LR',
+  LY = 'LY',
+  LI = 'LI',
+  LT = 'LT',
+  LU = 'LU',
+  MO = 'MO',
+  MG = 'MG',
+  MW = 'MW',
+  MY = 'MY',
+  MV = 'MV',
+  ML = 'ML',
+  MT = 'MT',
+  MQ = 'MQ',
+  MR = 'MR',
+  MU = 'MU',
+  YT = 'YT',
+  MX = 'MX',
+  MD = 'MD',
+  MC = 'MC',
+  MN = 'MN',
+  ME = 'ME',
+  MS = 'MS',
+  MA = 'MA',
+  MZ = 'MZ',
+  MM = 'MM',
+  NA = 'NA',
+  NR = 'NR',
+  NP = 'NP',
+  NL = 'NL',
+  AN = 'AN',
+  NC = 'NC',
+  NZ = 'NZ',
+  NI = 'NI',
+  NE = 'NE',
+  NG = 'NG',
+  NU = 'NU',
+  NF = 'NF',
+  MK = 'MK',
+  NO = 'NO',
+  OM = 'OM',
+  PK = 'PK',
+  PS = 'PS',
+  PA = 'PA',
+  PG = 'PG',
+  PY = 'PY',
+  PE = 'PE',
+  PH = 'PH',
+  PN = 'PN',
+  PL = 'PL',
+  PT = 'PT',
+  QA = 'QA',
+  CM = 'CM',
+  RE = 'RE',
+  RO = 'RO',
+  RU = 'RU',
+  RW = 'RW',
+  BL = 'BL',
+  SH = 'SH',
+  KN = 'KN',
+  LC = 'LC',
+  MF = 'MF',
+  PM = 'PM',
+  WS = 'WS',
+  SM = 'SM',
+  ST = 'ST',
+  SA = 'SA',
+  SN = 'SN',
+  RS = 'RS',
+  SC = 'SC',
+  SL = 'SL',
+  SG = 'SG',
+  SX = 'SX',
+  SK = 'SK',
+  SI = 'SI',
+  SB = 'SB',
+  SO = 'SO',
+  ZA = 'ZA',
+  GS = 'GS',
+  KR = 'KR',
+  SS = 'SS',
+  ES = 'ES',
+  LK = 'LK',
+  VC = 'VC',
+  SD = 'SD',
+  SR = 'SR',
+  SJ = 'SJ',
+  SE = 'SE',
+  CH = 'CH',
+  SY = 'SY',
+  TW = 'TW',
+  TJ = 'TJ',
+  TZ = 'TZ',
+  TH = 'TH',
+  TL = 'TL',
+  TG = 'TG',
+  TK = 'TK',
+  TO = 'TO',
+  TT = 'TT',
+  TA = 'TA',
+  TN = 'TN',
+  TR = 'TR',
+  TM = 'TM',
+  TC = 'TC',
+  TV = 'TV',
+  UG = 'UG',
+  UA = 'UA',
+  AE = 'AE',
+  GB = 'GB',
+  US = 'US',
+  UM = 'UM',
+  UY = 'UY',
+  UZ = 'UZ',
+  VU = 'VU',
+  VE = 'VE',
+  VN = 'VN',
+  VG = 'VG',
+  WF = 'WF',
+  EH = 'EH',
+  YE = 'YE',
+  ZM = 'ZM',
+  ZW = 'ZW',
+  ZZ = 'ZZ',
+}

package/src/surfaces/point-of-sale/api/types/multiple-resource-result.ts

@@ -0,0 +1,14 @@
+/**
+ * The result of a fetch function where the input is multiple IDs.
+ * This object contains the resources that were found, as well as an array of IDs specifying which IDs, if any, did not correspond to a resource.
+ */
+export interface MultipleResourceResult<T> {
+  /**
+   * The resources that were fetched using the IDs provided.
+   */
+  fetchedResources: T[];
+  /**
+   * The IDs for which a resource was not found.
+   */
+  idsForResourcesNotFound: number[];
+}

package/src/surfaces/point-of-sale/api/types/paginated-result.ts

@@ -0,0 +1,20 @@
+/**
+ * Contains a page of fetched results.
+ */
+export interface PaginatedResult<T> {
+  /**
+   * The items returned from the fetch.
+   */
+  items: T[];
+
+  /**
+   * The cursor of the last item. This can be used to fetch more results.
+   * The format of this cursor may look different depending on if POS is fetching results from the remote API, or its local database. However, that should not affect its usage with the search functions.
+   */
+  lastCursor?: string;
+
+  /**
+   * Whether or not there is another page of results that can be fetched.
+   */
+  hasNextPage: boolean;
+}

package/src/surfaces/point-of-sale/api/types/product.ts

@@ -0,0 +1,62 @@
+export interface Product {
+  id: number;
+  createdAt: string;
+  updatedAt: string;
+  title: string;
+  description: string;
+  descriptionHtml: string;
+  featuredImage?: string;
+  isGiftCard: boolean;
+  tracksInventory: boolean;
+  vendor: string;
+  minVariantPrice: string;
+  maxVariantPrice: string;
+  productType: string;
+  productCategory: string;
+  tags: string[];
+  numVariants: number;
+  totalAvailableInventory?: number;
+  totalInventory: number;
+  variants: ProductVariant[];
+  options: ProductOption[];
+  hasOnlyDefaultVariant: boolean;
+  hasInStockVariants?: boolean;
+  onlineStoreUrl?: string;
+}
+
+export interface ProductVariant {
+  id: number;
+  createdAt: string;
+  updatedAt: string;
+  title: string;
+  price: string;
+  compareAtPrice?: string;
+  taxable: boolean;
+  sku?: string;
+  barcode?: string;
+  displayName: string;
+  image?: string;
+  inventoryIsTracked: boolean;
+  inventoryAtLocation?: number;
+  inventoryAtAllLocations?: number;
+  inventoryPolicy: ProductVariantInventoryPolicy;
+  hasInStockVariants?: boolean;
+  options?: ProductVariantOption[];
+  product?: Product;
+  productId: number;
+  position: number;
+}
+
+export interface ProductVariantOption {
+  name: string;
+  value: string;
+}
+
+export type ProductVariantInventoryPolicy = 'DENY' | 'CONTINUE';
+
+export interface ProductOption {
+  id: number;
+  name: string;
+  optionValues: string[];
+  productId: number;
+}

package/src/surfaces/point-of-sale/api/types/session.ts

@@ -0,0 +1,27 @@
+export interface Session {
+  /**
+   * The shop ID associated with the shop currently logged into POS.
+   */
+  shopId: number;
+
+  /**
+   * The user ID associated with the Shopify account currently authenticated on POS.
+   */
+  userId: number;
+
+  /**
+   * The shop domain associated with the shop currently logged into POS.
+   */
+  shopDomain: string;
+
+  /**
+   * The location ID associated with the POS' current location.
+   */
+  locationId: number;
+
+  /**
+   * The staff ID who is currently pinned into the POS.
+   * Note that this staff member ID may be different to the User ID, as the staff member who enters their PIN may be different to the User who logged onto POS.
+   */
+  staffMemberId?: number;
+}

package/src/surfaces/point-of-sale/api.ts

@@ -0,0 +1,79 @@
+export type {
+  CartApi,
+  DiscountType,
+  CartDiscountType,
+  CartApiContent,
+  LineItemDiscountType,
+} from './api/cart-api/cart-api';
+
+export type {
+  ConnectivityStateSeverity,
+  ConnectivityState,
+  ConnectivityApiContent,
+  ConnectivityApi,
+} from './api/connectivity-api/connectivity-api';
+
+export type {LocaleApi, LocaleApiContent} from './api/locale-api/locale-api';
+
+export type {
+  NavigationApiContent,
+  NavigationApi,
+} from './api/navigation-api/navigation-api';
+
+export type {
+  ProductSortType,
+  ProductSearchParams,
+  ProductSearchApi,
+  ProductSearchApiContent,
+} from './api/product-search-api/product-search-api';
+
+export type {
+  ScannerSource,
+  ScannerSubscriptionResult,
+  ScannerApi,
+  ScannerApiContent,
+} from './api/scanner-api/scanner-api';
+
+export type {
+  SessionApiContent,
+  SessionApi,
+} from './api/session-api/session-api';
+
+export type {
+  SmartGridApi,
+  SmartGridApiContent,
+} from './api/smartgrid-api/smartgrid-api';
+
+export type {
+  ShowToastOptions,
+  ToastApiContent,
+  ToastApi,
+} from './api/toast-api/toast-api';
+
+export type {
+  Cart,
+  Customer,
+  LineItem,
+  Discount,
+  SetLineItemPropertiesInput,
+  SetLineItemDiscountInput,
+  LineItemDiscount,
+  CustomSale,
+  Address,
+} from './api/types/cart';
+
+export type {MultipleResourceResult} from './api/types/multiple-resource-result';
+
+export type {PaginatedResult} from './api/types/paginated-result';
+
+export type {
+  Product,
+  ProductVariant,
+  ProductVariantOption,
+  ProductVariantInventoryPolicy,
+  ProductOption,
+} from './api/types/product';
+
+export type {CountryCode} from './api/types/country-code';
+
+export type {Session} from './api/types/session';

package/src/surfaces/point-of-sale/components/Badge/Badge.ts

@@ -0,0 +1,18 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export type BadgeVariant =
+  | 'neutral'
+  | 'critical'
+  | 'warning'
+  | 'success'
+  | 'highlight';
+
+export type BadgeStatus = 'empty' | 'partial' | 'complete';
+
+export interface BadgeProps {
+  text: string;
+  variant: BadgeVariant;
+  status?: BadgeStatus;
+}
+
+export const Badge = createRemoteComponent<'Badge', BadgeProps>('Badge');

package/src/surfaces/point-of-sale/components/Banner/Banner.ts

@@ -0,0 +1,39 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export type BannerVariant = 'confirmation' | 'alert' | 'error' | 'information';
+
+export interface BannerProps {
+  /**
+   * The title of the banner.
+   */
+  title: string;
+
+  /**
+   * Banners have multiple variants that can be used to
+   * change the color and style of the banner.
+   */
+  variant: BannerVariant;
+
+  /**
+   * @defaultValue 'dismiss'
+   */
+  action?: string;
+
+  /**
+   * Dismisses the banner by default.
+   */
+  onPress?: () => void;
+
+  /**
+   * Use this parameter to hide the action button.
+   */
+  hideAction?: boolean;
+
+  /**
+   * Whether or not the banner is visible.
+   * @defaultValue true
+   */
+  visible: boolean;
+}
+
+export const Banner = createRemoteComponent<'Banner', BannerProps>('Banner');

package/src/surfaces/point-of-sale/components/Button/Button.ts

@@ -0,0 +1,13 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export type ButtonType = 'primary' | 'basic' | 'destructive' | 'plain';
+
+export interface ButtonProps {
+  title: string;
+  type?: ButtonType;
+  onPress?: () => void;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+}
+
+export const Button = createRemoteComponent<'Button', ButtonProps>('Button');

package/src/surfaces/point-of-sale/components/CameraScanner/CameraScanner.ts

@@ -0,0 +1,8 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface CameraScannerProps {}
+
+export const CameraScanner = createRemoteComponent<
+  'CameraScanner',
+  CameraScannerProps
+>('CameraScanner');

package/src/surfaces/point-of-sale/components/DateField/DateField.ts

@@ -0,0 +1,20 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import {InputProps} from '../shared/InputField';
+
+export interface DateFieldProps
+  extends Pick<
+    InputProps,
+    | 'value'
+    | 'error'
+    | 'label'
+    | 'disabled'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onChange'
+    | 'action'
+    | 'helpText'
+  > {}
+
+export const DateField = createRemoteComponent<'DateField', DateFieldProps>(
+  'DateField',
+);

package/src/surfaces/point-of-sale/components/DatePicker/DatePicker.ts

@@ -0,0 +1,12 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface DatePickerProps {
+  selected?: string;
+  onChange?(selected: string): void;
+  visibleState: [boolean, (visible: boolean) => void];
+  inputMode?: 'inline' | 'spinner';
+}
+
+export const DatePicker = createRemoteComponent<'DatePicker', DatePickerProps>(
+  'DatePicker',
+);

package/src/surfaces/point-of-sale/components/Dialog/Dialog.ts

@@ -0,0 +1,17 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export type DialogType = 'default' | 'alert' | 'error' | 'destructive';
+
+export interface DialogProps {
+  title: string;
+  content?: string;
+  actionText: string;
+  secondaryActionText?: string;
+  showSecondaryAction?: boolean;
+  type?: DialogType;
+  onAction: () => void;
+  onSecondaryAction?: () => void;
+  isVisible: boolean;
+}
+
+export const Dialog = createRemoteComponent<'Dialog', DialogProps>('Dialog');

package/src/surfaces/point-of-sale/components/EmailField/EmailField.ts

@@ -0,0 +1,8 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import type {InputProps, MinMaxLengthProps} from '../shared/InputField';
+
+export interface EmailFieldProps extends InputProps, MinMaxLengthProps {}
+
+export const EmailField = createRemoteComponent<'EmailField', EmailFieldProps>(
+  'EmailField',
+);

package/src/surfaces/point-of-sale/components/FormattedTextField/FormattedTextField.ts

@@ -0,0 +1,16 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import type {AutoCapitalizationType} from '../shared/auto-capitalization-type';
+import type {BaseTextFieldProps} from '../shared/BaseTextField';
+
+export type InputType = 'text' | 'number' | 'currency' | 'giftcard' | 'email';
+
+export interface FormattedTextFieldProps extends BaseTextFieldProps {
+  inputType?: InputType;
+  autoCapitalize?: AutoCapitalizationType;
+  customValidator?: (text: string) => boolean;
+}
+
+export const FormattedTextField = createRemoteComponent<
+  'FormattedTextField',
+  FormattedTextFieldProps
+>('FormattedTextField');