import { Meta } from '@storybook/addon-docs';
import { CollapsibleJsonSnippet } from '../../src/tools/docTools';

export const settings = {
    "pages" : {
      "home" : {
        "components" : {
          "Carousel:orderable:c06a8060-3014-49c8-80a4-18995de16c3c" : {
            "backgroundColor" : {
              "value" : "#fff",
              "type" : "COLORPICKER"
            },
            "slides" : {
              "value" : [ {
                "contentType" : "IMAGE_WITH_TEXT",
                "slideData" : {
                  "slideName" : "Product Demo",
                  "buttonLabel" : "Request Demo",
                  "title" : "AppInsights",
                  "text" : "AppInsights provides real-time insights through visualization tools that will drive your company towards digital transformation",
                  "image" : {
                    "type" : "IMAGE_UPLOADER",
                    "filename" : "AppInsights_image632x370.jpg",
                    "url" : "https://d33na3ni6eqf5j.cloudfront.net/fdaaa076-7fe6-4f59-83a0-e8f76067f0ce/99348845-a0ba-4aeb-89ca-61eb426430f1.jpg"
                  },
                  "textAlignment" : "left",
                  "textSize" : "small",
                  "slideLink" : "https://www.appdirect.com/products/appinsights/request-demo-appinsights",
                  "imagePosition" : "right",
                  "backgroundColor" : "#fff"
                }
              }, {
                "contentType" : "IMAGE_ONLY",
                "slideData" : {
                  "slideName" : "Product Promotion",
                  "title" : "One searchable view across all of your enterprise content",
                  "text" : "Secured end-to-end and at rest with AES-256 bit encryption. Users can only search content they have permission to access.",
                  "image" : {
                    "type" : "IMAGE_UPLOADER",
                    "filename" : "AppWise_image.jpg",
                    "url" : "https://d33na3ni6eqf5j.cloudfront.net/5dd60cb8-8d15-4cec-b6bd-1a85ae666f76/05da8a68-5d65-40d3-a68e-a043e800989e.jpg"
                  },
                  "textSize" : "medium",
                  "slideLink" : "https://www.appdirect.com/products/appwise/features/integrations",
                  "textColor" : "#fff",
                  "imageSizing" : "fill",
                  "backgroundColor" : "#707070"
                }
              } ],
              "type" : "SLIDES"
            },
            "delay" : {
              "value" : "5",
              "type" : "DROPDOWN"
            },
            "isDisplayCarets" : {
              "value" : true,
              "type" : "TOGGLE_CHECK"
            },
            "isAutorotate" : {
              "value" : true,
              "type" : "TOGGLE_CHECK"
            },
            "caretsColorTheme" : {
              "value" : "dark",
              "type" : "DROPDOWN"
            },
            "isDisplayDots" : {
              "value" : true,
              "type" : "TOGGLE_CHECK"
            },
            "isDisplayCaretsOnHover" : {
              "value" : true,
              "type" : "TOGGLE_CHECK"
            },
            "height" : {
              "value" : "400",
              "type" : "DROPDOWN"
            }
          },
          "Slider:orderable:906daff8-d299-42ba-b873-91bf4798ba69" : {
            "layout" : {
              "value" : "square",
              "type" : "RADIO"
            },
            "productsList" : {
              "value" : {
                "contentType" : "dynamic",
                "queries" : {
                  "sort" : "ALPHABETICAL"
                }
              },
              "type" : "PRODUCTS_LIST"
            },
            "maxRows" : {
              "value" : "2",
              "type" : "RADIO"
            },
            "size" : {
              "value" : "small",
              "type" : "RADIO"
            },
            "borderRadius" : {
              "value" : 8,
              "type" : "SLIDER"
            },
            "quickviewDisplayOptions" : {
              "value" : [ "isScreenshotVisible" ],
              "type" : "CHECKBOX"
            },
            "quickviewViewMode" : {
              "value" : "default",
              "type" : "DROPDOWN"
            },
            "sliderTitle" : {
              "value" : "uieditor.home.Slider:orderable:906daff8-d299-42ba-b873-91bf4798ba69.sliderTitle",
              "isLocalized" : true,
              "type" : "INPUT"
            },
            "sliderOptions" : {
              "value" : true,
              "type" : "TOGGLE"
            },
            "tileBackgroundColor" : {
              "value" : "#EAEAEA",
              "type" : "COLORPICKER"
            },
            "quickviewOptions" : {
              "value" : [ "isQuickviewVisible" ],
              "type" : "CHECKBOX"
            },
            "displayOptions" : {
              "value" : [ "isDescriptionVisible", "isRatingsVisible" ],
              "type" : "CHECKBOX"
            },
            "buttonLabel" : {
              "value" : "uieditor.home.Slider:orderable:906daff8-d299-42ba-b873-91bf4798ba69.buttonLabel",
              "isLocalized" : true,
              "type" : "INPUT"
            }
          }
        },
        "orderableComponents" : [ {
          "name" : "Carousel",
          "id" : "Carousel:orderable:c06a8060-3014-49c8-80a4-18995de16c3c"
        }, {
          "name" : "Slider",
          "id" : "Slider:orderable:906daff8-d299-42ba-b873-91bf4798ba69"
        } ]
      }
    }
}

<Meta title="Docs/Customization/Layout Management" />

# Layout Management
<br />

## Description

Layout Management is a feature available in Plaza theme that enables you to manage multiple components in a page container element.
Through the page container element, you can add default components to your theme for any storefront page. Then, in the Storefront Builder visual editor, a Marketplace Manager can add, delete, and reorder components inside the page container element.

## Example

For example, you might want a `Carousel` and a `Slider` component on the home page. Inside your `home.html` file in the `content/pages/home` theme folder, you would add this tag element anywhere in your page:

```html
<PageOrderableContainer name="PageOrderableContainer" id="PageOrderableContainer1"></PageOrderableContainer>
```

This element sets a page container section on the home page.

Next, in the `settings.json` file of your current theme, specify which components you want to include in the page container
section:

<CollapsibleJsonSnippet
    summary="settings.json"
    code={settings}
/>    

As you can see, for each component that you want to add to the container, you need to follow this pattern for the component ID:

`{componentName}:orderable:{uuid}`

<li><b>componentName</b>: The component exported name.</li>
<li><b>uuid</b>: A generated UUID. You can generate whatever UUID you want.</li>

For example, to add a `Carousel` to the container, you can identify the component with this unique ID:

`Carousel:orderable:c06a8060-3014-49c8-80a4-18995de16c3c`

Finally, there is an `orderableComponents` array that you need to fill with the components that you want to manage in the container for a given storefront page. Make sure to use the same component ID that you declared previously for that page. Here is what the array would look like for the previous example:

```js
"orderableComponents": [
    {
      "name": "Carousel",
      "id": "Carousel:orderable:c06a8060-3014-49c8-80a4-18995de16c3c"
    },
    {
      "name": "Slider",
      "id": "Slider:orderable:906daff8-d299-42ba-b873-91bf4798ba69"
    }
]
```

### Integration with the visual editor

In order to manage the layout with the Storefront Builder visual editor, you need to package the theme using `sfb-toolkit package`. Then, upload the theme .zip file with the Theme Manager so you can customize it with the visual editor.

As you can see below in the screenshot, in the components list on the home page you see the components that you set as default for the `PageOrderableContainer` in the `settings.json` file. They are easily identified with a drag handle icon because those components can be reordered between them.

When a page contains a `PageOrderableContainer` section, an "Add" icon appears in the top right of the components list. This means that you can add more components to the `PageOrderableContainer` section.

Finally, when you hover the mouse over an "orderable" component, a trash icon appears, which indicates that you can delete the component.

<img src="/LAYOUT_MANAGEMENT.png" alt="Layout Management" />

In summary, layout management is a powerful feature in the Plaza theme. It enables Marketplace Managers to dynamically add components in the visual editor if the theme developer has set a `PageOrderableContainer` element in the page. Also, Marketplace Managers can reorder and delete components.
