add user cancelled to example and copy tweaks.

Author: fatbattk

packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/camera-api.doc.ts

@@ -38,8 +38,8 @@ const data: ReferenceEntityTemplateSchema = {
       sectionContent: `
 - Camera functionality requires the device to have a camera and appropriate permissions granted by the user.
 - Only one camera operation can be in progress at a time. Attempting to call \`takePhoto()\` while a capture is already in progress will result in a rejected promise.
-- Base64 strings can be memory-intensive for large images. Use appropriate maxWidth and maxHeight settings to optimize performance.
-- The \`facingMode\` parameter may not work reliably on some Android devices to set the initial camera, as camera facing mode handling is not standardized across Android manufacturers. The rear-facing camera is used by default if the specified facing mode is not supported. Users can still manually toggle between cameras once the camera interface is open.
+- Base64 strings can be memory-intensive for large images. Use appropriate \`maxWidth\`, \`maxHeight\`, and \`quality\` settings to optimize performance.
+- The \`facingMode\` parameter may not behave consistently on all Android devices, because camera-facing behavior varies across manufacturers. If a requested mode isn't supported, the rear-facing camera is used by default, and users can still manually switch cameras from the camera interface.
 `,
     },
   ],

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/camera-api/take-photo-display.jsx

@@ -16,7 +16,10 @@ const Extension = () => {
       setImageData(photo);
       shopify.toast.show('Photo captured successfully!');
     } catch (error) {
-      shopify.toast.show(`Error: ${error.message}`);
+      // skip showing errors when the user cancels the photo capture.
+      if (!error.message.includes('User cancelled')) {
+        shopify.toast.show(`Error: ${error.message}`);
+      }
     } finally {
       setIsCapturing(false);
     }
@@ -38,7 +41,9 @@ const Extension = () => {
               <s-section heading="Image Details">
                 <s-text>Width: {imageData.width}px</s-text>
                 <s-text>Height: {imageData.height}px</s-text>
-                <s-text>File Size: {(imageData.fileSize / 1024).toFixed(2)} KB</s-text>
+                <s-text>
+                  File Size: {(imageData.fileSize / 1024).toFixed(2)} KB
+                </s-text>
                 <s-text>Type: {imageData.type}</s-text>
               </s-section>
             </>
@@ -48,4 +53,3 @@ const Extension = () => {
     </s-page>
   );
 };
-

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/camera-api/take-photo-upload.jsx

@@ -11,7 +11,11 @@ const Extension = () => {
   const handleCaptureAndUpload = async () => {
     setIsProcessing(true);
     try {
-      const photo = await shopify.camera.takePhoto({quality: 0.8, maxWidth: 1520, maxHeight: 1520});
+      const photo = await shopify.camera.takePhoto({
+        quality: 0.8,
+        maxWidth: 1520,
+        maxHeight: 1520,
+      });
 
       // Upload the image to your backend server
       // (Replace with your actual backend endpoint)

packages/ui-extensions/src/surfaces/point-of-sale/api/camera-api/camera-api.ts

@@ -1,3 +1,6 @@
+/**
+ * Specifies configuration options for capturing photos using the device camera.
+ */
 export interface CameraMediaOptions {
   /**
    * The camera that will be active when the camera interface first opens.
@@ -24,6 +27,9 @@ export interface CameraMediaOptions {
   quality?: number;
 }
 
+/**
+ * Represents the captured image and associated metadata returned by `shopify.camera.takePhoto()`.
+ */
 export interface CameraMediaResponse {
   /** The image data as base64 string. */
   base64: string;
@@ -37,6 +43,9 @@ export interface CameraMediaResponse {
   type: string;
 }
 
+/**
+ * Provides camera capabilities for the POS device.
+ */
 export interface CameraApiContent {
   /**
    * Launch the device's camera to take a photo.
@@ -51,6 +60,10 @@ export interface CameraApiContent {
   takePhoto: (options?: CameraMediaOptions) => Promise<CameraMediaResponse>;
 }
 
+/**
+ * The `CameraApi` object provides access to device camera functionality for capturing photos.
+ * Access these properties through `shopify.camera`.
+ */
 export interface CameraApi {
   camera: CameraApiContent;
 }