Components
AppEmbedStatus

AppEmbedStatus Component

The AppEmbedStatus component is designed to guide users through the process of enabling app embeds for a Shopify app. It provides instructions, action buttons, and visual feedback on the embed status.

Features

  • Conditional rendering based on app configuration and embed status
  • Step-by-step instructions for enabling app embeds
  • Action buttons for enabling embeds and verifying status
  • Visual feedback on successful embed activation

Usage

import { AppEmbedStatus } from './app/component/dashboard/AppEmbedStatus';
 
const MyPage = () => {
  return (
    <Layout>
      <AppEmbedStatus />
      {/* Other page content */}
    </Layout>
  );
};

Component Behavior

  1. If app embed is not required (requireAppEmbed is false), the component doesn't render anything.
  2. If the app embed is already enabled, it displays a success banner.
  3. If the app embed is not enabled, it shows instructions and action buttons to guide the user through the process.

Dependencies

  • Shopify Polaris components
  • Remix hooks and components
  • App configuration (for requireAppEmbed setting)

Notes

  • The component uses Remix's useLoaderData and useActionData for data management.
  • It includes an animated GIF to visually guide users through the embed process.
  • The component is responsive, adjusting its layout for different screen sizes.
PageTitleBarReadyTable