[WebsiteBuilder]
[WebsiteBuilder]
  Description
    A flexible, customizable, full featured, multi-page web site builder
    Shows a list of pages that can be edited
    Provides a way to re-order, add new pages, and delete them
    Then provides tools (that can be configured or overwritten) for editing and configuring any of the pages in the list
  Screens/States
    Web Site Builder
  User Stories
    As a user I would like to be able to create/edit multiple web pages
    As a user, I want to choose from a library of templates of pre-built web pages
    As a user, I want to be able to do basic page editing on the templates I choose
    As a user I would like to be able to drag editor objects in between pages
    As a user, I would like changes I make to be automatically saved as I make them
    As a user I would like to add new pages to my site
    As a user I would like to remove pages from my site
    As a user I would like to change the order that my pages are presented to my visitors
    As a developer I would like to customize the look and feel of my page builder
    As a user I would like to sometimes see my pages in read-only mode (e.g. page preview)
    Remembers funnel settings and state, so that next time the funnel opens it opens to the same tab/subtab
  Components
    <MobileToggle />
      Description
        A tool for fine-tuning the mobile responsive settings of a web page
      User Stories
        As a user, I want my pages to look great in all mobile devices and I would like to see how they look in each major mobile format
        As a user, I would like to control how my page will look on a mobile device independently from how it will look on a desktop
        As a user I would like to show a group of mobile icons that I can click on to toggle between the most popular mobile states
        As a user when I am in a responsive state, I would like an option to rotate the screen to see how it looks in landscape view
        As a user I would like each mobile view to represent an actual media query that is enforced on the live site
        As a user when I change style properties of an editor item, the changes I make are recorded for the selected media query
        As a user I would like to position the mobile toggle menu in various places on the page
        As a user I would like a "responsive" state that lets me manually increase / decrease the width of the page view, so I can see exactly how it will look in the entire set of mobile states
        As a user, when I change to a popular screen size, I would like to see a background that somewhat matches the mobile device I am targeting (e.g. an iphone)
        As a user, when I change from state to state, the properties of the various editor items should update to reflect the specific choices for that media query
        As a developer I would like to provide my own mobile toggle component to use instead of the default one provided
        As a user I would like to create new media queries
        As a user I would like to delete any media query I create
        As a user, when I delete a media query, the properties that contain that media query settings should be removed too
        As a developer I would like to decide which media queries show up in the main view and which ones are hidden behind a "more" button
        As a developer I would like to provide my own custom actions to add in the dropdown menu
        As a user, I would like to preview a publish-ready version of my page on my mobile device (or separate window) LIVE as I'm editing the page (or funnel)
        As a user I would like to zoom in/out so I can see the full view of my page in the mobile context
      Props
        location:enum
          The location to use for the component
          enum(TOP, BOTTOM, INLINE)
        devices:array
          The list of mobile devices to show and the associated media queries that should be enforced
          { id, type, mediaQuery, containerSettings, icon, caption, isRotated, canDelete, canResize, showInMain }
        showMore:bool
          Whether or not the "more options" menu shows up
        moreActions:array
          The list of actions to show as well as the function to trigger when clicked
        canCreateDevices:bool
          Whether or not the user can create their own devices/media queries
        showQRPreview:bool
          Whether or not to show a QR code for previewing the page
        showZoomButtons:bool
          Whether or not to show options for zooming in/out of the page
        isExpanded:bool
          Whether or not the mobile toggle component is in expanded view
          [Width x Height] & Zoom
      Events
        onChange()
          Triggers when the active media query is to be changed
        onShowMoreToggle()
          Triggers when the "show More" button is toggled
        onZoomChange()
          Triggers when the zoom of the page is to be changed
        onNewDevice()
          Triggers when a new device is to be created
        onDeleteDevice()
          Triggers when an existing device is to be deleted
      Hooks
        onComponentRender()
          MobileToggle
            Triggers when the component is to be rendered in the dom
        onListItems()
          MobileToggleDevices
            Triggers when the list of mobile devices (and their associated media queries) are generated
          MobileToggleActions
            Triggers when the list of Mobile Toggle actions (for the mobile toggle menu) are being generated
        onEventTrigger()
          MobileToggle_Change
            Triggers when the active media query is to be changed
          MobileToggle_ShowMoreToggle
            Triggers when the "show More" button is toggled
          MobileToggle_ZoomChange
            Triggers when the zoom of the page is to be changed
          MobileToggle_NewDevice
            Triggers when a new device is to be created
          MobileToggle_DeleteDevice
            Triggers when an existing device is to be deleted
      Tests
        Rendering
          Should render in the dom
          Should render the component at the top of the page if the TOP value is chosen for the location prop
          Should render the component at the bottom of the page if the BOTTOM value is chosen for the location prop
          Should render the component inline if the INLINE value is chosen for the location prop
          Should render the same number of mobile devices in the dom as there are items in the devices array prop
          Should render a "more" button when the showMore prop value is true
          Should render the same number of "more actions" as can be found in the moreActions array prop
          Should not render a menu item to create new devices if the canCreateDevices prop is false
          Should render a generated QR preview code when showQRPreview prop is true
          Should render options for zooming in/out of the page when the showZoomButtons prop is set to true
          Should render an expanded version of the component when the isExpanded prop is set to true
        Events
          Should trigger the onChange() event when the active media query is to be changed
          Should trigger the onShowMoreToggle() event when the "show More" button is toggled
          Should trigger the onZoomChange() event when the zoom of the page is to be changed
          Should trigger the onNewDevice() event when a new device is to be created
          Should trigger the onDeleteDevice() event when an existing device is to be deleted
        Hooks
          Should trigger the onComponentRender("MobileToggle") plugin hook when the component is to be rendered in the dom
          Should trigger the onListItems("MobileToggleDevices") plugin hook when the list of mobile devices (and their associated media queries) are generated
          Should trigger the onListItems("MobileToggleActions") plugin hook when the list of Mobile Toggle actions (for the mobile toggle menu) are being generated
          Should trigger the onEventTrigger("MobileToggle_Change") plugin hook when the active media query is to be changed
          Should trigger the onEventTrigger("MobileToggle_ShowMoreToggle") plugin hook when the "show More" button is toggled
          Should trigger the onEventTrigger("MobileToggle_ZoomChange") plugin hook when the zoom of the page is to be changed
          Should trigger the onEventTrigger("MobileToggle_NewDevice") plugin hook when a new device is to be created
          Should trigger the onEventTrigger("MobileToggle_DeleteDevice") plugin hook when an existing device is to be deleted
    <WebPageSettings />
      Description
        Lets you set basic information about the page
        Such as the name, url slug, whether its the home page or 404 page, the type of page, etc.
        visibility (publish vs draft)
        Option to Simplify UX by letting users edit all the page settings from one screen. Just answer all (or some) of the questions, and be done.
      User Stories
        As a user, I want to be able to make any one of my pages the HOME PAGE (or 404 page) of my site
        Should be able to easily go back to the edit view from this screen
        Ability to link to different sections externally (and internally)
      Props
        sections:array
          The list of components to render as sections
          [PageDetails, ChooseTheme, ChooseTracking, CRM, Merchant, SEO]
          {id, icon, title, caption, isActive, component }
        renderAsPage:bool
          Whether to render the sections as one long page
        renderAsTabs:bool
          Whether to render the sections as one long page
        sectionWrapperComponent:element
          The component to wrap each section inside
      Events
        onChange()
          Triggers when the page settings are to be changed
        onReset()
          Triggers when all the page settings are to be reset/cleared
      Methods
        goToSection()
      Components
        <PageURLSection />
          Description
            Prebuilt section for capturing what url slug they want for this page.
            Includes a link for campaign level domain management
            <SlugField />
          Props
            data:object
              All of the page settings
          Events
            onChange()
              Triggers when the page settings are to be changed
          Hooks
            onComponentRender()
              PageURLSection
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
            Events
              Should trigger the onChange() event when the page settings are to be changed
            Hooks
              Should trigger the onComponentRender("PageURLSection") plugin hook when the component renders in the dom
          fields
            slugfifeld
        <PageDetailsSection />
          Description
            Prebuilt section for capturing page details (name, label, type)
          Props
            data:object
              All of the page settings
          Events
            onChange()
              Triggers when the page settings are to be changed
          Hooks
            onComponentRender()
              PageDetailsSection
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
              Should render fields on the page that have values matching what is inside data prop
            Events
              Should trigger the onChange() event when the page settings are to be changed
            Hooks
              Should trigger the onComponentRender("PageDetailsSection") plugin hook when the component renders in the dom
          fields
            (formbuilder)
        <ChangeTemplateSection />
          Description
            Prebuilt section for opening the <Templates /> section (e.g. in a popup window)
            Just some instructional text and a button
          Props
            data:object
              (current template selected)
          Events
            onChange()
              Triggers when the page settings are to be changed
            onTemplateSelectorOpen()
              Triggers when the template selector / popup is to be opened
          Hooks
            onEventTrigger()
              ChangeTemplateSection
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
            Events
              Should trigger the onChange() event when the page settings are to be changed
              Should trigger the onTemplateSelectorOpen() event when the template selector screen is to be shown
            Hooks
              Should trigger the onComponentRender("ChangeTemplateSection") plugin hook when the component renders in the dom
          Screens
            Shows TemplateSelector
        <PageVisibilitySection />
          Description
            Shows the <Visibility /> component from the <FunnelBuilder /> component
          Props
            data:object
              All of the page settings
          Events
            onChange()
              Triggers when the page settings change
          Hooks
            onComponentRender()
              PageVisibility
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
            Events
              Should trigger the onChange() event when the page settings are to be changed
            Hooks
              Should trigger the onComponentRender("PageVisibility") plugin hook when the component renders in the dom
        <SetAsHomePageSection />
          Description
            Prebuilt section for capturing whether or not the page should be the default home page for the domain
          Props
            data:object
              All of the page settings
          Events
            onChange()
              Triggers when the page settings are to be changed
          Hooks
            onComponentRender()
              SetAsHomePageSection
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
            Events
              Should trigger the onChange() event when the page settings are to be changed
            Hooks
              Should trigger the onComponentRender("SetAsHomePageSection") plugin hook when the component renders in the dom
          field
            toggle switch
            text
        <SetAs404Section />
          Description
            Prebuilt section for capturing whether or not the page should be the default 404 page for the domain
          Props
            data:object
              All of the page settings
          Events
            onChange()
              Triggers when the page settings are to be changed
          Hooks
            onComponentRender()
              SetAs404Section
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
            Events
              Should trigger the onChange() event when the page settings are to be changed
            Hooks
              Should trigger the onComponentRender("SetAs404Section") plugin hook when the component renders in the dom
          field
            toggle switch
            text
        <SaveAsTemplate />
          Description
            Prebuilt section for capturing whether or not the page should be saved as a template
          Props
            data:object
              All of the page settings
          Events
            onChange()
              Triggers when the page settings are to be changed
          Hooks
            onComponentRender()
              SaveAsTemplate
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
            Events
              Should trigger the onChange() event when the page settings are to be changed
            Hooks
              Should trigger the onComponentRender("SaveAsTemplate") plugin hook when the component renders in the dom
          field
            save btn
            text
        <SEOSettingsSection />
          Description
            A tool that lets you set the SEO settings for the page
          User Stories
            As a user, I want to add advanced SEO settings to a page.
            As a user I want a plesant UX, so I would expect to be asked basic SEO information, with an option to provide more advanced SEO information (e.g. favicon, og meta data, etc.)
          Props
            data:object
              All of the page settings
            advancedSettingsAreShowing:bool
              Whether or not the section for Advanced SEO is showing
          Events
            onChange()
              Triggers when the page settings are to be changed
            onShowAdvancedToggle()
              Triggers when the advanced seo settings section is to show or not
          Hooks
            onComponentRender()
              SEOSettingsSection
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
              Should not render the advanced setting when the advancedSettingsAreShowing prop is false
            Events
              Should trigger the onChange() event when the page settings are to be changed
            Hooks
              Should trigger the onComponentRender("SEOSettingsSection") plugin hook when the component renders in the dom
          fields
            title
            keywords
            description
            favicon
            image
            video
        <ChooseCRMIntegrationSection />
          Description
            A button (and description) for opening the CRM Integrations Wizard
            Optionally renders an integration search selector (instead of a button)
          Props
            data:object
              All of the page settings
            searchSelectorIsVisible:bool
              Whether or not the Integration Provider selector is showing
          Events
            onChange()
              Triggers when the page settings are to be changed
            onIntegrationSelectorOpen()
              Triggers when the Integration wizard is to be opened
          Hooks
            onComponentRender()
              ChooseCRMIntegrationSection
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
            Events
              Should trigger the onChange() event when the page settings are to be changed
            Hooks
              Should trigger the onComponentRender("ChooseCRMIntegrationSection") plugin hook when the component renders in the dom
          wireframe
            (same)
            Shows IntegrationWizard
        <ChoosePaymentIntegrationSection />
          Description
            A button (and description) for opening the Payment Integrations Wizard
            Optionally renders an integration search selector (instead of a button)
          Props
            data:object
              All of the page settings
            searchSelectorIsVisible:bool
              Whether or not the Integration Provider selector is showing
          Events
            onChange()
              Triggers when the page settings are to be changed
            onIntegrationSelectorOpen()
              Triggers when the Integration wizard is to be opened
          Hooks
            onComponentRender()
              ChoosePaymentIntegrationSection
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
            Events
              Should trigger the onChange() event when the page settings are to be changed
            Hooks
              Should trigger the onComponentRender("ChoosePaymentIntegrationSection") plugin hook when the component renders in the dom
          wireframe
            (same)
        <SetMyPageScriptsSection />
          Description
            A button (and description) for opening the Page Scripts configurator
          Props
            data:object
              All of the page settings
          Events
            onChange()
              Triggers when the page settings are to be changed
            onPageScriptsOpen()
              Triggers when the Page Script builder is to be opened
          Hooks
            onComponentRender()
              SetMyPageScriptsSection
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
            Events
              Should trigger the onChange() event when the page settings are to be changed
            Hooks
              Should trigger the onComponentRender("SetMyPageScriptsSection") plugin hook when the component renders in the dom
          wireframe
            (same)
            shows TrackingScriptBuilder
        <ScheduleSection />
          Description
            Lets the user set the start & end dates that the page is available
            Also let's them choose the "promo has ended" pages
          Props
            data:object
              All of the page settings
          Events
            onChange()
              Triggers when the page settings are to be changed
            onPageScheduleOpen()
              Triggers when the Schedule Section is to be opened
          Hooks
            onComponentRender()
              ScheduleSection
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
            Events
              Should trigger the onChange() event when the page settings are to be changed
            Hooks
              Should trigger the onComponentRender("ScheduleSection") plugin hook when the component renders in the dom
          fields
            (date picker)
      Hooks
        onComponentRender()
          WebPageSettings
            Triggers when the component renders in the dom
        onListItems()
          WebPageSettingsSectionList
            Triggers when the web page settings section list is being generated
        onEventTrigger()
          WebPageSettingsChange
            Triggers when the web page settings are to be changed
      Tests
        Rendering
          Should render in the dom
          Should render each section provided in the sections prop in the dom
          Should render each section as one long page (instead of tabs) when renderAsPage prop is true
          Should render each section as tabs when renderAsTabs prop is true
          Should wrap the sections with the component in sectionWrapperComponent prop if one is provided
        Events
          Should trigger the onChange() event when the page settings are to be changed
          Should trigger the onReset() event when all the page settings are to be reset/cleared
        Methods
          Should navigate directly to the provided section when the goToSection() method is called
        Hooks
          Should trigger the onComponentRender("WebPageSettings") plugin hook when the component renders in the dom
          Should trigger the onListItems("WebPageSettingsSectionList") plugin hook when the web page settings section list is being generated
          Should trigger the onEventTrigger("WebPageSettingsChange") plugin hook when the web page settings are to be changed
    <IntegrationWizard />
      Description
        A collection of commonly used integration steps that plugins can use to build customized integration wizards
      User Stories
        As a user I would like an easy way to select and configure a 3rd party integration to use
        As a user I want the integration wizard to dynamically take me through a different set of steps based on the integration I select
        As a user I only want to see integrations that are relevent to the type of integration that I need (e.g. crm's, payments, etc.)
        As a developer, when building an integration wizard for my integration, I want to leverage pre-existing integration steps because the information I need to collect from users is often the same
        As a user, after the initial integration provider is selected, it should retrieve the next set of steps from the integration provider's plugin itself
      Props
        type:enum
          The type of integration wizard this is
          enum(CRM, PAYMENT)
        showStepByStepLegend:bool
          Whether or not a step by step legend should show
        steps:array
          The data for each of the step to walk through
          { id, component, label, index, nextHref, prevHref, isActive }
      Events
        onChange()
          Triggered when the integration payload is to change
        onStepChange()
          Triggers when a different step is to be activated
        onSuccess()
          Triggers when the final page of the sequence is reached
      Methods
        switchSteps()
          Switches the step from one to another
        updateStepData()
          Updates the data used to know what steps to take and when
      <ChooseCRMProvider />
        Description
          A wizard that lets you select an integration and the relevant list that you want to route form information to
          Will show the wizard steps provided
          Uses the <IntegrationWizard /> component to generate the initial steps (showing the provider), then letting the integration plugin take it from there (merge their steps in with yours)
        User Stories
          As a user, I want to connect my pages to my email CRM, so that when visitors submit their contact information, my email CRM captures the information allowing me to follow up with them to close the sale
          As a user, I would like to provide new optin subscribers with a custom thank you email, without needing to bring in my own custom auto-responder
          Each Integration is its own plugin, which has its own wizard for collecting and setting this information
        Props
          data:object
            the current payload object we're building
            { payload: { type, amount, name, campaignId } }
        Events
          onChange()
            Triggers when the data changes
        Hooks
          onComponentRender()
            ChooseCRMProvider
              Triggers the plugin hook when the component renders in the dom
        Tests
          Rendering
            Should render in the dom
          Events
            Should trigger the onChange() event when the data changes
            Should observe that the payload contains the chosen crm provider after one is chosen
          Hooks
            Should trigger the onComponentRender("ChooseCRMProvider") plugin hook when the component renders in the dom
      <ChoosePaymentProvider />
        Description
          A wizard that lets you select a new or existing payment provider and then presents a customized set of steps for collects the relevant information to connect the page to the payment provider
          Selections are saved with the page so that the live page knows how to handle actions that require it
          Uses the <IntegrationWizard /> component to generate the initial steps (showing the provider), then letting the integration plugin take it from there (merge their steps in with yours)
          Each Integration is its own plugin, which has its own wizard for collecting and setting this information
        User Stories
          As a user, I want to connect my pages to my payment provider, so that when visitors submit their contact information, my merchant account captures the information
          Each Integration is its own plugin, which has its own wizard for collecting and setting this information
        Props
          data:object
            the current payload object we're building
            { payload: { type, amount, name, campaignId } }
        Events
          onChange()
            Triggers when the data changes
        Hooks
          onComponentRender()
            ChoosePaymentProvider
              Triggers the plugin hook when the component renders in the dom
        Tests
          Rendering
            Should render in the dom
          Events
            Should trigger the onChange() event when the data changes
            Should observe that the payload contains the chosen payment provider after one is chosen
          Hooks
            Should trigger the onComponentRender("ChoosePaymentProvider") plugin hook when the component renders in the dom
      Components
        <IntegrationEditor />
        <ChooseProvider />
          Description
            Shows a filtered list of integrations for the user to select from
            Allows the user to edit or create the integration from this screen too
          User Stories
            As a user I want to see a list of integrations to choose from
            As a user i only want to see integrations that are relevant to what I am doing
            As a user, I want to be able to provide API credentials as needed directly from the screen (without having to break the natural progression of what I am currently trying to do)
            As a user once I have selected my integration, and the API credentials are entered, I would like to be taken to the next step in my sequence
            As a user I would like a way to verify that I have entered the correct API credentials (e.g. an API handshake request)
            As a user I would like to see a tutorial/video/article showing me how to retrieve my API credentials
            As a developer, I would like to have the option to customize the message that asks the user to select their provider
          Props
            allIntegrations:array
              The entire list of available integrations
            filter:object
              The filter to apply to the list of integrations
            label:string
              The placeholder of the search text field for the provider selector
            providerSettings:object
              the current payload object we're building
              { payload: { type, amount, name, campaignId } }
            prevHref:string
              The slug for the [back] button
            nextHref:string
              The slug to use for the [next] button
            index:int
              The number of the current step we are in the sequence
            message:string
              The text asking the user to select their provider
          Events
            onChange()
              Triggers when the data changes
          Hooks
            onComponentRender()
              IntegrationChooseProvider
                Triggers the plugin hook when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
              Should render the same amount of integration icons as the number of items in the allIntegrations prop
              Should apply the filter found in the filter prop to the allIntegrations prop and render the same number of icons as is returned
              Should render a placeholder in the search field that matches the label prop
              Should set the href of the [previous] button to the prevHref prop if one is provided
              Should set the href of the [next] button to the nextHref prop if one is provided
              Should render the text found in the message prop if one is provided
            Events
              Should trigger the onChange() event when the data changes
              Should navigate to the next item (using the number found in the index + 1) based on the index prop if no prevHref or nextHref prop is found
              Should observe that the payload contains the chosen provider after one is chosen
            Hooks
              Should trigger the onComponentRender("IntegrationChooseProvider") plugin hook when the component renders in the dom
        <ChooseCampaign />
          Description
            Dropdown of campaigns to choose from
          User Stories
            As a user I would like to see a list of campaigns retrieved from my 3rd party integration to be able to select from
            As a user I would like to select the specific campaign to use for this integration
            As a user, once I am satisfied with my selection, I would like to be taken to the next step
            As a developer, I would like to have the option to customize the message that asks the user to select their campaign
          Props
            providerSettings
              the current payload object we're building
              { payload: { type, amount, name, campaignId } }
            list:array
              [{ id, name }]
            prevHref:string
              The slug for the [back] button
            nextHref:string
              The slug to use for the [next] button
            index:int
              The number of the current step we are in the sequence
            message:string
              The text asking the user to select their campaign
            isLoading:bool
              Whether or not data is being fetched from the 3rd party provider right now
          Events
            onChange()
              Triggers when the data changes
            onGetProviderCampaigns()
              Triggers when looking for a list of provider campaigns to show in the dropdown menu
          Hooks
            onComponentRender()
              IntegrationChooseCampaign
                Triggers the plugin hook when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
              Should render the same number of dropdown items as can be found in the list prop
              Should set the href of the [previous] button to the prevHref prop if one is provided
              Should set the href of the [next] button to the nextHref prop if one is provided
              Should render the text found in the message prop if one is provided
              Should render a loading image/component if the isLoading prop is true (and looking for data)
            Events
              Should trigger the onChange() event when the data changes
              Should trigger the onGetProviderCampaigns() when looking for a list of provider campaigns to show in the dropdown menu
              Should navigate to the next item (using the number found in the index + 1) based on the index prop if no prevHref or nextHref prop is found
              Should observe that the payload contains the chosen campaign after one is chosen
            Hooks
              Should trigger the onComponentRender("IntegrationChooseCampaign") plugin hook when the component renders in the dom
        <ChooseAmount />
          Description
            Let's the user enter an amount
          User Stories
            As a user, I would like to enter the amount of money I want my payment provider to charge my visitors
            As a user, once I am satisfied, I would like to be taken to the next step
            As a developer, I would like to have the option to customize the message that asks the user to enter the amount to charge
          Props
            providerSettings:object
              { payload: { type, amount, name, campaignId } }
            showProvider:bool
              Whether or not the back button should take them back to the "Choose Provider" step
            prevHref:string
              The slug for the [back] button
            nextHref:string
              The slug to use for the [next] button
            index:int
              The number of the current step we are in the sequence
            message:string
              The text asking the user to choose the amount to charge
          Events
            onChange()
              Triggers when the data changes
          Hooks
            onComponentRender()
              IntegrationChooseAmount
                Triggers the plugin hook when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
              Should set the href of the [previous] button to the prevHref prop if one is provided
              Should set the href of the [next] button to the nextHref prop if one is provided
              Should render the text found in the message prop if one is provided
            Events
              Should trigger the onChange() event when the data changes
              Should navigate to the next item (using the number found in the index + 1) based on the index prop if no prevHref or nextHref prop is found
              Should observe that the payload contains the chosen amount to charge after one is entered
            Hooks
              Should trigger the onComponentRender("IntegrationChooseAmount") plugin hook when the component renders in the dom
        <ChooseOffer />
          Description
            Lets the user choose from a selection of offers
            Lets the user quickly create a new offer/promotion
          User Stories
            As a user, I would like to see the list of offers I have previously created
            As a user, I would like to select the offer I want to associate with this purchase
            As a user, I would like a way to quickly create a new offer to add to the list
            As a user I would like a way to quickly navigate to the main offer management dashboard
            As a user, once I am satisfied, I would like to be taken to the next step
            As a developer, I would like to have the option to customize the message that asks the user to select the offer
          Props
            providerSettings:object
              { payload: { type, amount, name, offerId } }
            showProvider:bool
              Whether or not the back button should take them back to the "Choose Provider" step
            prevHref:string
              The slug for the [back] button
            nextHref:string
              The slug to use for the [next] button
            index:int
              The number of the current step we are in the sequence
            message:string
              The text asking the user to choose the offer
          <OfferBuilder />
          Events
            onChange()
              Triggers when the data changes
          Hooks
            onComponentRender()
              IntegrationChooseOffer
                Triggers the plugin hook when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
              Should set the href of the [previous] button to the prevHref prop if one is provided
              Should set the href of the [next] button to the nextHref prop if one is provided
              Should render the text found in the message prop if one is provided
            Events
              Should trigger the onChange() event when the data changes
              Should navigate to the next item (using the number found in the index + 1) based on the index prop if no prevHref or nextHref prop is found
              Should observe that the payload contains the offerId chosen when one is selected
            Hooks
              Should trigger the onComponentRender("IntegrationChooseOffer") plugin hook when the component renders in the dom
        <Success />
          Description
            The final "Success" message. When the integration is configured
          User Stories
            As a user I don't want to my settings to save until I have reached this screen
            As a user once I have completed all the steps I would like to see a confirmation that the settings have been saved
            As a developer, I would like to have the option to customize the success message that the user sees
            As a user, once I am satisfied, I would like to be taken back to where I was before this wizard
          Props
            providerSettings:object
              { payload: { type, amount, name, campaignId } }
            prevHref:string
              The slug for the [back] button
            nextHref:string
              The slug to use for the [next] button
            index:int
              The number of the current step we are in the sequence
            message:string
              The text letting the user know that the wizard is complete
            footer:string
              A follow-up message to let the user know "next steps"
          Hooks
            onComponentRender()
              IntegrationSuccess
                Triggers the plugin hook when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
              Should set the href of the [previous] button to the prevHref prop if one is provided
              Should set the href of the [next] button to the nextHref prop if one is provided
              Should render the text found in the message prop if one is provided
              Should render the text found in the footer prop if one is provided
            Events
              Should observe that a call is made to the database indicating that the payload has been fully generated
            Hooks
              Should trigger the onComponentRender("IntegrationSuccess") plugin hook when the component renders in the dom
      Hooks
        onComponentRender()
          IntegrationWizard
            Triggers the plugin hook when the component renders in the dom
        onListItems()
          IntegrationWizardSteps
            Triggers when the integration wizard steps are being generated
            (use this to change the step sequence for your particular integration)
        onEventTrigger()
          IntegrationWizardStepChange
            Triggers when a different step is to be activated
          IntegrationPayloadChange
            Triggered when the integration payload is to change
          IntegrationWizardSuccess
            Triggers when the final page of the sequence is reached
      Tests
        Rendering
          Should render in the dom
          Should render a "step legend" when the showStepByStepLegend prop is true
          Should render a the same number of steps as the number of items in the steps prop
        Events
          Should trigger the onChange() event when the integration payload is to change
          Should trigger the onStepChange() event when a different step is to be activated
          Should trigger the onSuccess() event when the final page of the sequence is reached
        Methods
          Should switch the step from one to another when each step has completed
            Should update the steps prop when the updateStepData method is called
        Hooks
          Should trigger the onComponentRender("IntegrationWizard") plugin hook when the component renders in the dom
          Should trigger the onListItems("IntegrationWizardSteps") plugin hook when the integration wizard steps are being generated
          Should trigger the onEventTrigger("IntegrationWizardStepChange") plugin hook when a different step is to be activated
          Should trigger the onEventTrigger("IntegrationPayloadChange") plugin hook when the integration payload is to change
          Should trigger the onEventTrigger("IntegrationWizardSuccess") plugin hook when the final page of the sequence is reached
      (replicate)
    <TemplateSelector />
      Description
        A way to show a collection of thumbnails that the user can preview, or select for editing
      User Stories
        As a user I would like to see a list of templates that I can choose from for my project
        As a user I would like to see those templates as thumbnails (with different views for mobile, fullscreen, etc.)
        As a user I would to be able to preview any template in full screen mode before committing to my selection
        As a user I would like to to see the list of templates categorized by the type of template
        As a user I would like the templates to automatically change/update if information about my company (such as branding, color scheme, etc.) changes
        As a user I would like my page's content to immediately update to the page content of the template when I select one
        As a developer I would like the flexibility to display my templates in unique ways
      Props
        tabs:array
          The list of tabs to show and what they do when activated
          { id, caption, isActive, component }
        showTabs:bool
          Whether or not to show the tab strip
        title:string
          The title/caption to show at the top of the template selector
        filter:object
          The initial filter to use against the incoming list of templates
        templates:array
          The incoming list of templates
          { id, description, image, component, name, page, type, isHighlighted, canDelete }
        thumbnailWrapperComponent:element
          The component to use (instead of the default) as the parent component for each thumbnail
        thumbnailComponent:element
          The component to use instead of the default thumbnail component
        templateWrapper:element
          The component to use (instead of the default) as the parent component for the template selection window
          for overwriting the traditional grid/column style
        previewComponent:element
          The component to use (instead of the default) as the component for showing previews
        filterComponent:element
          The component to use (instead of the default) as the component for handling filters
      Components
        <TemplateItem />
          description
            The specific template item that can be selected
          props
            name:string
              The name to use for the template item
            description:string
              The description of the template item
            pageId:string
              The pageId in the database associated with this template
            mode:enum
              The current mode that the template item is in. States will often toggle when hovered on/off (e.g. preview mode vs take action mode)
              enum(NORMAL, ACTIVE)
            image:string
              The image to use for this template
            component:element
              The component to use (instead of an image) for this template
            canDelete:bool
              Whether or not the user can delete this template
          events
            onSelect()
              Triggered when the user selects the template
            onPreview()
              Triggers when the user tries to preview the template
            onDelete()
              Triggers when the user tries to delete the template
            onModeChange()
              Triggers when the mode changes
          tests
            Rendering
              Should render in the dom
              Should render a name in the dom when one is provided in the props
              Should render a description in the dom when one is provided in the props
              Should render the component in its "normal" mode when the mode prop is set to "NORMAL"
              Should render the component in its "ACTIVE" mode when the mode prop is set to "ACTIVE"
              Should render the provided image in the image prop when one is provided
              Should render the provided component in the component prop when one is provided
              Should render a delete button in the dom when the canDelete prop is true
            Events
              Should trigger the onSelect() event when the user selects the template
              Should trigger the onPreview() event when the user tries to preview the template
              Should trigger the onDelete() event when the user tries to delete the template
              Should trigger the onModeChange() event when the mode changes
        <PreviewWindow />
          description
            The window that appears when the user wants to preview the page in a larger screen
          props
            ...the same template item props
            viewMode:enum
              The various modes that the preview window will render
              enum(FULLSCREEN, WITH_MOBILE, ETC.)
          events
            onClose()
              Triggers when the preview window is to be closed
            onModeChange()
              Triggers when the mode changes
          tests
            Rendering
              Should render in the dom
              Should render the full screen version of the component when FULLSCREEN is set for the viewMode prop
              Should render the mobile previews when WITH_MOBILE is set for the viewMode prop
            Events
              Triggers the onClose() event when the preview window is to be closed
              Triggers the onModeChange() event when the mode changes
        <FilterComponent />
          description
            The default window used to filter the list of templates that are showing
            (default method is tabs and a couple dropdowns)
          props
            templates:array
              The incoming list of templates
              { id, description, image, component, name, page, type, isHighlighted, canDelete }
            filter:object
              The active filter conditions being applied right now
          events
            onFilterChange()
              Triggers when the filter conditions change and the new filter is to be applied
          tests
            Rendering
              Should render in the dom
              Should show the filter conditions in the dom reflected by the properties found in the filter prop
            Events
              Should trigger the onFilterChange() event when the filter conditions change and the new filter is to be applied
      Events
        onItemSelect()
          Triggers when a template item is selected
        onItemClick()
          Triggers when a template item is clicked
        onDoubleClick()
          Triggers when a template item is double clicked
        onItemMouseEnter()
          Triggers when the mouse enters a template item
        onItemMouseLeave()
          Triggers when the leaves a template item
        onItemDelete()
          Triggers when a template item is to be deleted
        onFilterUpdate()
          Triggers when a template's filter settings change
        onShowPreview()
          Triggers when a template item is to be previewed
      Methods
        selectTemplate()
          Changes the page's content to match the templates
        previewTemplate()
          Previews the page template
      Hooks
        onComponentRender()
          TemplateSelector
            Triggers the plugin hook when the component renders in the dom
          ThumbnailComponent
            Triggers the plugin hook when the component renders in the dom
          TemplateWrapper
            Triggers the plugin hook when the component renders in the dom
          PreviewComponent
            Triggers the plugin hook when the component renders in the dom
        onListItems()
          TemplateSelectorTabs
            Trigger the plugin hook when template selector tabs are being listed
          Templates
            Trigger the plugin hook when templates are being listed
        onEventTrigger()
          TemplateItemSelect
            Triggers the plugin event hook when a template item is selected
          TemplateItemClick
            Triggers the plugin event hook when a template item is clicked
          TemplateDoubleClick
            Triggers the plugin event hook when a template item is double clicked
          TemplateItemMouseEnter
            Triggers the plugin event hook when the mouse enters a template item
          TemplateItemMouseLeave
            Triggers the plugin event hook when the leaves a template item
          TemplateItemDelete
            Triggers the plugin event hook when a template item is to be deleted
          TemplateFilterUpdate
            Triggers the plugin event hook when a template's filter settings change
          ShowTemplatePreview
            Triggers the plugin event hook when a template item is to be previewed
      Tests
        Rendering
          Should render in the dom
          Should render the same number of tabs in the dom as the number of items in the tabs array
          Should not show any tab strip when the showTabs prop is false
          Should render a title/caption in the dom when one is provided in the title prop
          Should render the same number of templates in the dom as the number of items in the templates array
          Should apply the filter found in the filter prop to the templates array and thus render the same number of templates found after the filter is applied
          Should render the component found in the thumbnailWrapperComponent prop (instead of the default) as the parent component for each thumbnail when one is provided
          Should render the component found in the thumbnailComponent prop instead of the default thumbnail component when one is provided
          Should render the component found in the templateWrapper prop (instead of the default) as the parent component for the template selection window when one is provided
          Should render the component found in the previewComponent prop (instead of the default) as the component for showing previews when one is provided
          Should render the component found in the filterComponent prop (instead of the default) as the component for handling filters when one is provided
        Events
          Triggers the onItemSelect() event when a template item is selected
          Triggers the onItemClick() event when a template item is clicked
          Triggers the onDoubleClick() event when a template item is double clicked
          Triggers the onItemMouseEnter() event when the mouse enters a template item
          Triggers the onItemMouseLeave() event when the mouse leaves a template item
          Triggers the onItemDelete() event when a template item is to be deleted
          Triggers the onFilterUpdate() event when a template's filter settings change
          Triggers the onShowPreview() event when a template item is to be previewed
        Methods
          Should observe that the page's content is updated to match the selected template when one is selected
          Should open a preview screen when the previewTemplate method is called
        Hooks
          Should trigger the onComponentRender("TemplateSelector") plugin hook when the component renders in the dom
          Should trigger the onComponentRender("ThumbnailComponent") plugin hook when the component renders in the dom
          Should trigger the onComponentRender("TemplateWrapper") plugin hook when the component renders in the dom
          Should trigger the onComponentRender("PreviewComponent") plugin hook when the component renders in the dom
          Should trigger the onListItems("TemplateSelectorTabs") plugin hook when template selector tabs are being listed
          Should trigger the onListItems("Templates") plugin hook when templates are being listed
          Should trigger the onEventTrigger("TemplateItemSelect") plugin event hook when a template item is selected
          Should trigger the onEventTrigger("TemplateItemClick") plugin event hook when a template item is clicked
          Should trigger the onEventTrigger("TemplateDoubleClick") plugin event hook when a template item is double clicked
          Should trigger the onEventTrigger("TemplateItemMouseEnter") plugin event hook when the mouse enters a template item
          Should trigger the onEventTrigger("TemplateItemMouseLeave") plugin event hook when the leaves a template item
          Should trigger the onEventTrigger("TemplateItemDelete") plugin event hook when a template item is to be deleted
          Should trigger the onEventTrigger("TemplateFilterUpdate") plugin event hook when a template's filter settings change
          Should trigger the onEventTrigger("ShowTemplatePreview") plugin event hook when a template item is to be previewed
      design
        same as current
    <AncestorBreadcrumbs />
      Description
        Shows the ancestors of the selected item
        If an item is nested inside of multiple containers, this is a convenient way to quickly see that hierarchy and make appropriate changes
      User Stories
        As a user I would like to see the hierarchy/ancenstry of the selected page element
        As a user I would like to be able to select on any parent page element from that hierarchy
        As a user I would like to be able to access the page elements properties from the ancestor list
        click on any to select it in the view
        double-click to rename it
        higlights the page object when hovered
      Props
        location:enum
          The location (e.g. BOTTOM, TOP, BOTTOMLEFT, etc.) to display the breadcrums
      Events
        onItemSelect()
          Triggers when a breadcrumb item is selected
        onItemMouseEnter()
          Triggers when the mouse enters a breadcrumb item
        onItemMouseLeave()
          Triggers when the mouse leaves a breadcrumb item
        onItemDoubleClick()
          Triggers when a breadcrumb item is double-clicked
      Hooks
        onComponentRender()
          AncestorBreadcrumbs
            Trigger this plugin hook when the component renders in the dom
        onListItems()
          AncestorBreadcrumbs
            Trigger this plugin hook when breadcrumbs are being listed
        onEventTrigger()
          BreadcrumbSelect
            Trigger this plugin hook when a breadcrumb item is selected
          BreadcrumbMouseEnter
            Trigger this plugin hook when the mouse enters a breadcrumb item
          BreadcrumbMouseLeave
            Trigger this plugin hook when the mouse leaves a breadcrumb item
          BreadcrumbDoubleClick
            Trigger this plugin hook when a breadcrumb item is double-clicked
      Tests
        Rendering
          Should render in the dom
          Should render the component at the BOTTOM of the screen when the "BOTTOM" location is provided in the props
          Should render the component at the BOTTOM LEFT of the screen when the "BOTTOMLEFT" location is provided in the props
          Should render the component at the BOTTOM RIGHT of the screen when the "BOTTOMRIGHT" location is provided in the props
          Should render the component at the TOP of the screen when the "TOP" location is provided in the props
          Should render the component at the TOP LEFT of the screen when the "TOPLEFT" location is provided in the props
          Should render the component at the TOP RIGHT of the screen when the "TOPRIGHT" location is provided in the props
        Events
          Triggers the onItemSelect() event when a breadcrumb item is selected
          Triggers the onItemMouseEnter() event when the mouse enters a breadcrumb item
          Triggers the onItemMouseLeave() event when the mouse leaves a breadcrumb item
          Triggers the onItemDoubleClick() event when a breadcrumb item is double-clicked
        Hooks
          Triggers the onComponentRender("AncestorBreadcrumbs") plugin hook when the component renders in the dom
          Triggers the onListItems("AncestorBreadcrumbs") plugin hook when breadcrumbs are being listed
          Triggers the onEventTrigger("BreadcrumbSelect") plugin hook when a breadcrumb item is selected
          Triggers the onEventTrigger("BreadcrumbMouseEnter") plugin hook when the mouse enters a breadcrumb item
          Triggers the onEventTrigger("BreadcrumbMouseLeave") plugin hook when the mouse leaves a breadcrumb item
          Triggers the onEventTrigger("BreadcrumbDoubleClick") plugin hook when a breadcrumb item is double-clicked
    <TrackingScriptBuilder />
      Description
        A way to add javascript code to the <body>, <head>, and before the closing </body> tag of a page or campaign
        This component focuses on letting the user create the script. The parent component can decide what to do with it
      User Stories
        As a user, I want the ability to add 3rd party tracking code to my pages, so that I can see advanced data analytics, set up retargeting pixels, etc.
      Props
        data:object
          The current page settings data
        showAsTabs:bool
          Whether or not to show the tracking sections as tabs
        headSectionIsVisible:bool
          Whether or not to show the <Head /> section for tracking
        openingBodySectionIsVisible:bool
          Whether or not to show the <Body /> section for tracking
        closingBodySectionIsVisible:bool
          Whether or not to show the </Body> section for tracking
      Events
        onChange()
          Triggers when the tracking content changes
        onSwitchTabs()
          Triggers when the tabs switch
      Methods
        switchTabs()
          Switch the tabs
      Hooks
        onComponentRender()
          TrackingScriptBuilder
            Trigger this plugin hook when the component renders in the dom
        onEventTrigger()
          TrackingScriptChanges
            Trigger this plugin hook when the tracking content changes
          TrackingScriptTabSwitches
            Trigger this plugin hook when the tabs switch
      Tests
        Rendering
          Should render in the dom
          Should show the sections as tabs when the showAsTabs prop is true
          Should not show the <Head /> section when the headSectionIsVisible prop is false
          Should not show the <Body /> section when the openingBodySectionIsVisible prop is false
          Should not show the </ Body> section when the closingBodySectionIsVisible prop is false
        Events
          Triggers the onChange() event when the tracking content changes
          Triggers the onSwitchTabs() event when the tabs switch
        Methods
          Should switch the tabs when the switchTabs() method is called
        Hooks
          Triggers the onComponentRender("TrackingScriptBuilder") plugin hook when the component renders in the dom
          Triggers the onEventTrigger("TrackingScriptChanges") plugin hook when the tracking content changes
          Triggers the onEventTrigger("TrackingScriptTabSwitches") plugin hook when the tabs switch
  Schema
    Props
      pages:array
        The list of pages being edited
        { id, page, content, ...from db }
      pageListStyle:enum
        How the list of pages are displayed
        enum(TOOLBAR, SIDEBAR, CUSTOM, DROPDOWN, NONE)
      pageListLocation:enum
        Where the list of pages are displayed
        enum(TOP, BOTTOM, LEFT, RIGHT)
      pageListComponent:element
        Will replace the default page list component with this one
      canAddPages:bool
        Whether or not the user can add new pages
      canDeletePages:bool
        Whether or not the user can delete pages
      canReorderPages:bool
        Whether or not the user can change the order that pages are presented to the user
      canAddNewItems:bool
        Whether or not the user can add new editor items on the page
      addNewComponent:element
        Replaces the default [add new] button and sidebar with this component
      editorSettings:object
        The props to pass along to the <Editor /> component
      canChooseTemplate:bool
        Whether or not the user can choose a template for their pages
      templateSettings:object
        The props to pass along to the <Templates /> component
      templateComponent:element
        Replaces the default <Templates /> component
      mobileSettings:object
        The props to use for the <MobileToggle /> component
      enableMobileOptimization:bool
        Whether or not mobile optimization is enabled
      mobileOptimizationComponent:element
        Replaces the default <MobileToggle /> component
      ancestorBreadcrumbsSettings:object
        The props to use for the <AncestorBreadcrumbs /> component
      ancestorBreadcrumbsAreVisible:bool
        Whether or not the ancestor breadcrumb selector should render on the page
      ancestorBreadcrumbsComponent:element
        Replaces the default <AncestorBreadcrumbs /> component
      pageSettings:object
        The props to use for the <Page Settings /> component
      disablePageSettings:bool
        Whether or not the <PageSettings /> component should render
      pageSettingsComponent:element
        Replaces the default <PageSettings /> component
    Globals
      setMobileState()
      getMobileState()
      renameObject()
      deleteObject()
      cloneObject()
      makeThisMyHomePage()
      makeThisMy404Page()
      makeThisATemplate()
    Events
      onReorderPage()
        Triggers when the page order changes
      onNewPage()
        Triggers when a new page is added to the page list
      onDeletePage()
        Triggers when a page is deleted
      onDuplicatePage()
        Triggers when a page is deleted
      onPreview()
        Triggers when a page is to be previewed
      onChange()
        Triggers when the content of the page changes
    Methods
      switchTab()
        Switches the editor from one page to another
    Hooks
      onComponentRender()
        WebsiteBuilder
          Trigger this plugin hook when the component renders in the dom
      onListItems()
        WebsiteBuilderPages
          Trigger this plugin hook when website builder pages are being listed
      onEventTrigger()
        ReorderPage
          Trigger this plugin hook when the page order changes
        NewPage
          Trigger this plugin hook when a new page is added to the page list
        DeletePage
          Trigger this plugin hook when a page is deleted
        DuplicatePage
          Trigger this plugin hook when a page is deleted
        PreviewPage
          Trigger this plugin hook when a page is to be previewed
        PageContentChange
          Trigger this plugin hook when the content of the page changes
  Test Scenarios
    Rendering
      Should render in the dom
      Should show the same number of pages in the page sections as the number of items in the page array
      Should render the page sections as a TOOLBAR when the TOOLBAR style is passed to the pageListStyle props
      Should render the page sections as a SIDEBAR when the SIDEBAR style is passed to the pageListStyle props
      Should render the page sections as a CUSTOM when the CUSTOM style is passed to the pageListStyle props
      Should render the page sections as a DROPDOWN when the DROPDOWN style is passed to the pageListStyle props
      Should not render any page sections when "NONE" is passed to the pageListStyle props
      Should show the page sections at the TOP of the page when the TOP location is passed to the pageListLocation props
      Should show the page sections at the BOTTOM of the page when the BOTTOM location is passed to the pageListLocation props
      Should show the page sections at the LEFT of the page when the LEFT location is passed to the pageListLocation props
      Should show the page sections at the RIGHT of the page when the RIGHT location is passed to the pageListLocation props
      Should be that the items found in the "templateSettings" prop should also be found in the <Templates /> component's props
      Should be that the items found in the "editorSettings" prop should also be found in the <Editor /> component's props
      Should be that the items found in the "addNewComponent" prop should also be found in the <add new /> component's props
      Should be that the items found in the "pageSettings" prop should also be found in the <Page Settings /> component's props
      Should be that the items found in the "mobileSettings" prop should also be found in the <MobileToggle /> component's props
      Should render the component found in the pageSettingsComponent props instead of the default component when rendering the <PageSettings /> component
      Should render the component found in the templateComponent props instead of the default component when rendering the <Templates /> component
      Should render the component found in the ancestorBreadcrumbsComponent props instead of the default component when rendering the <AncestorBreadcrumbs /> component
      Should render the component found in the mobileOptimizationComponent props instead of the default component when rendering the <MobileToggle /> component
      Should render the component found in the ancestorBreadcrumbsSettings props instead of the default component when rendering the <AncestorBreadcrumbs /> component
      Should render the component found in the pageListComponent props instead of the default component when rendering the Page List component
      Should be that mobile optimization is enabled when the "enableMobileOptimization" in the props is set to true
      The ancestor breadcrumb selector should not render on the page when the "ancestorBreadcrumbsAreVisible" value in the props is set to false
      Should not be able to change the order that pages are presented to the user when the "canReorderPages" in the props is set to false
      Should not be able to delete pages when "canDeletePages" in the props is set to false
      Should not be able to add new pages when "canAddPages" in the props is set to false
      The <PageSettings /> component should not render when "disablePageSettings" in the props is set to false
      Should not be able to choose a template for their pages when "canChooseTemplate" in the props is set to false
      Should not be able to add new editor items on the page when "canAddNewItems" in the props is set to false
    Events
      Should trigger onReorderPage() event when the page order changes
      Should trigger onNewPage() event when a new page is added to the page list
      Should trigger onDeletePage() event when a page is deleted
      Should trigger onDuplicatePage() event when a page is deleted
      Should trigger onPreview() event when a page is to be previewed
      Should trigger onChange() event when the content of the page changes
    Methods
      Should switch the editor from one page to another when the tabs are changed
    Hooks
      Should trigger the onComponentRender("WebsiteBuilder") plugin hook when the component renders in the dom
      Should trigger the onListItems("WebsiteBuilderPages") plugin hook when website builder pages are being listed
      Should trigger the onEventTrigger("ReorderPage") plugin hook when the page order changes
      Should trigger the onEventTrigger("NewPage") plugin hook when a new page is added to the page list
      Should trigger the onEventTrigger("DeletePage") plugin hook when a page is deleted
      Should trigger the onEventTrigger("DuplicatePage") plugin hook when a page is deleted
      Should trigger the onEventTrigger("PreviewPage") plugin hook when a page is to be previewed
      Should trigger the onEventTrigger("PageContentChange") plugin hook when the content of the page changes
"A button that shows all the pages (or the active page) in a mobile frame
Ability to toggle on/off objects in mobile only view
Ability to set properties that appear only in mobile view"
includes an option called "custom" where you can adjust the responsive settings by dragging along the width of the page, and a new device and "media query" is created and saved
A gear icon in the top right of the page, that opens a right sidebar or popup when clicked.
It lets you set the slug, crm settings, tracking, merchant, seo, etc.
This is a plugin