Dialog

Examples

• Show a confirmation dialog

  Description

  Present important information or confirmations that require user attention. This example demonstrates a Dialog that overlays the interface to display alerts, confirmations, or input prompts with customizable buttons and actions, blocking interaction until merchants respond.

  React

  import React, {useState} from 'react';
  import {
    Button,
    Dialog,
    Screen,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';
  
  const SmartGridModal = () => {
    const [visible, setVisible] = useState(false);
  
    const handlePrimaryAction = () => {
      setVisible(false);
      console.log('Primary action pressed');
    };
  
    const handleSecondaryAction = () => {
      setVisible(false);
      console.log('Secondary action pressed');
    };
  
    return (
      <Screen name="Dialog" title="Dialog Title">
        <Button
          title="Show dialog"
          onPress={() => setVisible(true)}
        />
        <Dialog
          type="error"
          title="Dialog title"
          content="Dialog content"
          actionText="Primary action"
          onAction={handlePrimaryAction}
          secondaryActionText="Secondary action"
          onSecondaryAction={handleSecondaryAction}
          isVisible={visible}
        />
      </Screen>
    );
  };
  
  export default reactExtension(
    'pos.home.modal.render',
    () => <SmartGridModal />,
  );
  

  TS

  import {
    Button,
    Dialog,
    Screen,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';
  
  export default extension(
    'pos.home.modal.render',
    (root) => {
      const mainScreen = root.createComponent(
        Screen,
        {
          name: 'Dialog',
          title: 'Dialog Title',
        },
      );
  
      const button = root.createComponent(Button, {
        title: 'Show dialog',
        onPress: () =>
          dialog.updateProps({visible: true}),
      });
  
      const handlePrimaryAction = () => {
        dialog.updateProps({visible: false});
        console.log('Primary action pressed');
      };
  
      const handleSecondaryAction = () => {
        dialog.updateProps({visible: false});
        console.log('Secondary action pressed');
      };
  
      const dialog = root.createComponent(Dialog, {
        type: 'error',
        title: 'Dialog title',
        content: 'Dialog content',
        actionText: 'Primary action',
        onAction: handlePrimaryAction,
        secondaryActionText: 'Secondary action',
        onSecondaryAction: handleSecondaryAction,
        isVisible: false,
      });
  
      mainScreen.append(button);
      mainScreen.append(dialog);
      root.append(mainScreen);
    },
  );