Commit c5c0f32dcd for woocommerce
commit c5c0f32dcd7d2ce54a7bcde723dfe5ce0ebf0323
Author: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Fri Dec 5 12:03:49 2025 +0100
Remove CYS 1: Simplify CYS and remove entry points from marketplace (#62158)
* Update customize-store index.tsx to new flow
* Styles adjustments
* Update the task list
* Remove unnecessary hooks from CustomizeStore.php
* Update test
* Add changelog
* Bring back necesary types to make sure compilation passes with no errors
* Bring back sitebar styles
* Remove entry points to CYS from marketplace
* Remove margin top from banner header
* Make banner shape cover the whole banner of every screen
* Prefix generic css classes to make them Woo specific
* Remove duplicated mobile header
* Respect asynchronous updateOption action
diff --git a/plugins/woocommerce/changelog/add-simplify-cys b/plugins/woocommerce/changelog/add-simplify-cys
new file mode 100644
index 0000000000..a6b167e41e
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-simplify-cys
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Customize Your Store: Simplify the flow
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-1-illu.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-1-illu.svg
new file mode 100644
index 0000000000..5b97a274a6
--- /dev/null
+++ b/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-1-illu.svg
@@ -0,0 +1,21 @@
+<svg width="248" height="248" viewBox="0 0 248 248" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M178.75 58.011H122.14C115.816 58.011 110.69 63.1371 110.69 69.4605V126.071C110.69 132.394 115.816 137.52 122.14 137.52H178.75C185.073 137.52 190.2 132.394 190.2 126.071V69.4605C190.2 63.1371 185.073 58.011 178.75 58.011Z" fill="#B999FF" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M150.443 70.4337C135.349 70.4337 123.113 82.6694 123.113 97.7637H150.443V70.4337Z" fill="#F2EDFF" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M177.777 97.7677C177.777 82.6734 165.541 70.4376 150.447 70.4376V97.7677H177.777Z" fill="#D1C1FF" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M150.443 125.098C165.537 125.098 177.773 112.862 177.773 97.7676H150.443V125.098Z" fill="#B999FF" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M150.443 125.098C135.349 125.098 123.113 112.862 123.113 97.7676H150.443V125.098Z" fill="#2C045D" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M138.994 97.7676H82.3833C76.0598 97.7676 70.9337 102.894 70.9337 109.217V165.827C70.9337 172.151 76.0598 177.277 82.3833 177.277H138.994C145.317 177.277 150.443 172.151 150.443 165.827V109.217C150.443 102.894 145.317 97.7676 138.994 97.7676Z" fill="#E1D7FF" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M116.9 79.1316V69.8384C116.9 67.4226 118.857 65.4647 121.273 65.4647H130.566C123.017 65.4647 116.9 71.5826 116.9 79.1316Z" fill="#F2EDFF" stroke="#F2EDFF" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M166.438 163.396L143.012 155.614C141.447 155.03 139.707 156.767 140.291 158.336L148.05 181.796C148.676 183.479 151.221 183.074 151.752 181.204L154.004 174.315L163.056 183.368C164.259 184.57 166.346 184.429 167.72 183.055C169.094 181.681 169.235 179.594 168.033 178.391L158.977 169.335L165.839 167.102C167.709 166.572 168.117 164.026 166.434 163.4L166.438 163.396Z" fill="#F2EDFF" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M166.438 163.396L143.012 155.614C141.447 155.03 139.707 156.767 140.291 158.336L148.05 181.796C148.676 183.479 151.221 183.074 151.752 181.204L154.004 174.315L163.056 183.368C164.259 184.57 166.346 184.429 167.72 183.055C169.094 181.681 169.235 179.594 168.033 178.391L158.977 169.335L165.839 167.102C167.709 166.572 168.117 164.026 166.434 163.4L166.438 163.396Z" fill="#F2EDFF" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M43.4547 149.443C43.4547 149.443 32.3411 159.355 42.0999 167.976C51.8549 176.594 75.3302 170.934 66.6668 190.242" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M110.419 98.1455L70.9337 151.63L73.4564 104.855L110.419 98.1455Z" fill="#2C045D" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M74.8759 135.666L110.419 98.1454L91.5999 80.3185L56.0567 117.839C55.0644 118.884 54.3545 120.163 53.992 121.564L47.2329 142.093C46.4544 144.451 48.8244 146.695 51.141 145.795L71.2731 137.933C72.6509 137.49 73.8913 136.715 74.8835 135.669L74.8759 135.666Z" fill="#B999FF" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M110.414 98.1576C112.48 95.9771 109.942 90.2187 104.745 85.296C99.5487 80.3732 93.6614 78.1501 91.5958 80.3307C89.5301 82.5112 92.0683 88.2696 97.2649 93.1924C102.461 98.1152 108.349 100.338 110.414 98.1576Z" fill="#E1D7FF" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M51.1373 145.791C48.8207 146.695 46.4544 144.451 47.2292 142.089L53.9882 121.56C54.3546 120.159 56.3125 117.564 57.301 116.518L57.5567 121.754C57.7856 123.766 58.5108 126.33 60.5297 126.453L61.9533 126.537C63.9722 126.659 65.6362 128.231 65.8652 130.242L66.0293 131.658C66.2583 133.67 68.8612 134.25 70.8801 134.372L76.124 134.345C75.1317 135.391 72.6471 137.486 71.2694 137.925L51.1373 145.787V145.791Z" fill="#F2EDFF" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M50.2709 132.906L47.2406 142.104C46.462 144.463 48.8321 146.711 51.1449 145.802L60.0946 142.306C58.1444 141.913 55.9499 140.742 54.0187 138.913C52.0456 137.043 50.7441 134.864 50.2671 132.906H50.2709Z" fill="#A77EFF" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M140.291 158.336L140.177 177.124L145.813 175.025" fill="#2C045D"/>
+<path d="M140.291 158.336L140.177 177.124L145.813 175.025" stroke="#2C045D" stroke-width="2.28991" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M91.7868 152.134H87.9774L98.9952 122.128H102.746L113.764 152.134H109.954L100.988 126.875H100.753L91.7868 152.134ZM93.1933 140.413H108.548V143.637H93.1933V140.413Z" fill="#2C045D"/>
+<path d="M123.091 152.661C121.665 152.661 120.371 152.392 119.209 151.855C118.046 151.308 117.123 150.521 116.44 149.496C115.756 148.46 115.414 147.21 115.414 145.745C115.414 144.456 115.668 143.411 116.176 142.61C116.684 141.799 117.363 141.164 118.213 140.705C119.062 140.246 120 139.904 121.026 139.679C122.061 139.445 123.101 139.259 124.146 139.123C125.514 138.947 126.622 138.815 127.472 138.727C128.332 138.629 128.957 138.468 129.348 138.244C129.748 138.019 129.948 137.628 129.948 137.071V136.954C129.948 135.509 129.553 134.385 128.762 133.584C127.98 132.784 126.793 132.383 125.201 132.383C123.551 132.383 122.256 132.744 121.319 133.467C120.381 134.19 119.722 134.962 119.341 135.782L116.059 134.61C116.645 133.243 117.426 132.178 118.403 131.416C119.39 130.644 120.464 130.107 121.626 129.804C122.798 129.492 123.951 129.336 125.084 129.336C125.807 129.336 126.637 129.423 127.575 129.599C128.522 129.765 129.435 130.112 130.315 130.64C131.203 131.167 131.941 131.963 132.527 133.028C133.113 134.092 133.406 135.518 133.406 137.306V152.133H129.948V149.086H129.772C129.538 149.574 129.147 150.097 128.6 150.653C128.053 151.21 127.326 151.684 126.417 152.074C125.509 152.465 124.4 152.661 123.091 152.661ZM123.619 149.554C124.986 149.554 126.139 149.286 127.077 148.749C128.024 148.211 128.737 147.518 129.216 146.668C129.704 145.818 129.948 144.925 129.948 143.987V140.822C129.802 140.998 129.479 141.159 128.981 141.306C128.493 141.442 127.926 141.565 127.282 141.672C126.647 141.77 126.027 141.858 125.421 141.936C124.825 142.004 124.342 142.063 123.971 142.112C123.072 142.229 122.232 142.419 121.45 142.683C120.679 142.937 120.054 143.323 119.575 143.84C119.106 144.348 118.872 145.042 118.872 145.921C118.872 147.122 119.316 148.031 120.205 148.646C121.104 149.252 122.242 149.554 123.619 149.554Z" fill="#2C045D"/>
+</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-1-shape.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-1-shape.svg
new file mode 100644
index 0000000000..857c2b8d54
--- /dev/null
+++ b/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-1-shape.svg
@@ -0,0 +1,3 @@
+<svg width="317" height="248" viewBox="0 0 317 248" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M402.404 57.7259C427.151 35.07 410.987 -16.4458 366.317 -57.3411C321.636 -98.246 265.365 -113.034 240.618 -90.3881C225.049 -76.135 225.675 -50.4392 239.417 -23.1661C170.01 -67.5315 96.7497 -78.5726 60.6209 -45.5065C24.5026 -12.4404 36.5629 54.6286 85.0235 118.18C55.2225 105.6 27.1652 105.016 11.5964 119.279C-13.1508 141.935 3.01322 193.451 47.6835 234.346C92.3537 275.241 148.635 290.039 173.372 267.384C188.941 253.13 188.314 227.435 174.573 200.162C243.98 244.527 317.24 255.568 353.369 222.492C389.487 189.426 377.427 122.357 328.966 58.8061C358.767 71.3863 386.824 71.9599 402.393 57.7068L402.404 57.7259Z" fill="#DFD1FB" fill-opacity="0.3"/>
+</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-2-illu.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-2-illu.svg
new file mode 100644
index 0000000000..d4479321ab
--- /dev/null
+++ b/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-2-illu.svg
@@ -0,0 +1,24 @@
+<svg width="248" height="248" viewBox="0 0 248 248" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M62.7809 121.071L115.332 121.071C118.697 121.071 121.425 118.496 121.425 115.32V75.0985C121.425 71.9225 118.697 69.3478 115.332 69.3478H62.7809C59.4159 69.3478 56.688 71.9225 56.688 75.0985L56.688 115.32C56.688 118.496 59.4159 121.071 62.7809 121.071Z" fill="#D1C1FF" stroke="#2C045D" stroke-width="2.00218" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M152.475 110.726H187.148C189.368 110.726 191.168 108.916 191.168 106.682V78.3973C191.168 76.1638 189.368 74.3532 187.148 74.3532H152.475C150.254 74.3532 148.455 76.1638 148.455 78.3973L148.455 106.682C148.455 108.916 150.254 110.726 152.475 110.726Z" fill="#D1C1FF" stroke="#2C045D" stroke-width="2.00218" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M82.049 177.741H168.393C173.922 177.741 178.404 173.259 178.404 167.73V97.7121C178.404 92.1832 173.922 87.7012 168.393 87.7012L82.049 87.7012C76.5201 87.7012 72.0381 92.1832 72.0381 97.7121L72.0381 167.73C72.0381 173.259 76.5201 177.741 82.049 177.741Z" fill="#F2EDFF" stroke="#2C045D" stroke-width="2.00218" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M86.0533 114.897C86.0533 117.017 87.7715 118.735 89.8909 118.735C92.0102 118.735 93.7284 117.017 93.7284 114.897C93.7284 112.778 92.0102 111.06 89.8909 111.06C87.7715 111.06 86.0533 112.778 86.0533 114.897Z" fill="#D1C1FF" stroke="#2C045D" stroke-width="2.00218" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M100.402 114.73H122.76" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M143.115 114.73L150.457 114.73" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M156.463 114.73L163.805 114.73" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M163.805 125.742H86.0533V150.77H163.805V125.742Z" fill="#D1C1FF" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M87.0545 159.779H104.624" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M105.063 168.456H122.632" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M87.0545 168.456H98.0352" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M111.651 159.779H122.632" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M178.404 102.598L178.404 97.7121C178.404 92.1827 173.922 87.7012 168.393 87.7012H82.0492C76.5199 87.7012 72.0383 92.1827 72.0383 97.7121L72.0384 102.598H178.404Z" fill="#A77EFF" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M76.3762 99.3805V96.6373C76.3762 93.9644 77.4903 91.7055 81.308 91.7055H84.0512C79.8118 91.7055 76.3762 95.1412 76.3762 99.3805Z" fill="#F2EDFF" stroke="#F2EDFF" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M177.987 136.921L177.987 153.94L164.853 161.364C163.009 162.406 160.812 162.623 158.8 161.963L158.795 162.442C158.777 164.023 157.986 165.495 156.677 166.383C155.58 167.128 154.164 167.213 152.985 166.607L151.249 165.713C150.53 168.172 148.262 169.851 145.701 169.821L135.852 169.708L177.987 136.921Z" fill="#2C045D"/>
+<path d="M135.653 158.39C141.626 151.079 152.69 155.972 148.691 165.194C147.297 168.124 144.946 168.597 141.9 168.659C139.266 168.712 136.83 170.114 135.793 171.453C135.371 171.998 134.609 171.839 134.42 171.167C133.68 168.529 131.469 163.516 135.653 158.39Z" fill="#F2EDFF" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M154.739 162.769C157.349 160.564 156.962 155.815 153.876 152.161C150.789 148.507 146.171 147.332 143.562 149.536C140.952 151.741 141.339 156.49 144.425 160.144C147.512 163.798 152.129 164.973 154.739 162.769Z" fill="#B999FF" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M190.383 121.323C187.38 117.767 181.973 117.55 178.696 120.854L148.978 149.886C148.856 150.01 148.766 150.163 148.725 150.332C148.475 151.368 149.207 153.204 150.637 154.897C152.067 156.59 153.752 157.619 154.818 157.545C154.992 157.533 155.157 157.469 155.3 157.37L188.891 132.924C192.697 130.245 193.387 124.879 190.383 121.323Z" fill="#B999FF" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M188.891 132.921L184.995 135.663C183.527 136.448 180.476 134.816 177.947 131.82C175.459 128.874 174.352 125.645 175.293 124.29L178.703 120.854C181.98 117.55 187.387 117.767 190.388 121.32C193.392 124.876 192.699 130.242 188.894 132.919L188.891 132.921Z" fill="#2C045D" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M184.938 135.692L180.826 138.574C178.796 138.403 176.379 137.035 174.46 134.764C172.542 132.493 171.601 129.896 171.767 127.871L175.261 124.334C174.372 125.715 175.483 128.908 177.945 131.822C180.408 134.737 183.448 136.408 184.94 135.695L184.938 135.692Z" fill="#F2EDFF" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M184.004 124.813C186.127 124.992 187.932 124.139 188.036 122.909C188.14 121.679 186.502 120.537 184.379 120.358C182.256 120.179 180.451 121.031 180.347 122.262C180.244 123.492 181.881 124.634 184.004 124.813Z" fill="#F2EDFF"/>
+<path d="M148.755 164.436C147.359 167.366 145.01 167.839 141.964 167.901C139.33 167.956 136.893 169.358 135.857 170.697C135.432 171.242 134.67 171.083 134.481 170.411C134.052 168.873 133.121 166.527 133.249 163.823C132.883 166.842 133.949 169.484 134.418 171.167C134.606 171.839 135.368 171.998 135.793 171.452C136.83 170.113 139.266 168.712 141.901 168.656C144.946 168.594 147.295 168.121 148.691 165.191C148.942 164.614 149.132 164.052 149.27 163.512C149.223 163.496 149.173 163.479 149.126 163.463C149.021 163.782 148.899 164.108 148.755 164.436Z" fill="#2C045D" stroke="#2C045D" stroke-width="2.29" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-2-shape.svg b/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-2-shape.svg
new file mode 100644
index 0000000000..7e44febf33
--- /dev/null
+++ b/plugins/woocommerce/client/admin/client/customize-store/assets/images/banner-2-shape.svg
@@ -0,0 +1,3 @@
+<svg width="272" height="248" viewBox="0 0 272 248" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.8155 168.554C-8.7127 153.053 -6.56927 99.2186 25.6164 48.3206C57.8002 -2.58481 107.823 -31.2838 137.359 -15.7847C155.948 -6.02646 161.977 18.9135 155.882 48.7475C210.831 -11.8311 278.083 -41.2677 321.197 -18.6406C364.313 3.99388 370.1 71.7663 340.146 145.479C365.411 125.703 392.114 117.952 410.702 127.71C440.23 143.211 438.087 197.045 405.901 247.944C373.718 298.849 323.693 327.541 294.164 312.039C275.576 302.281 269.547 277.341 275.642 247.507C220.684 308.088 153.433 337.525 110.327 314.895C67.2105 292.261 61.424 224.488 91.3773 150.775C66.1132 170.552 39.41 178.303 20.8214 168.544L20.8155 168.554Z" fill="#DFD1FB" fill-opacity="0.3"/>
+</svg>
diff --git a/plugins/woocommerce/client/admin/client/customize-store/index.tsx b/plugins/woocommerce/client/admin/client/customize-store/index.tsx
index 91d6132f0b..dc951c8027 100644
--- a/plugins/woocommerce/client/admin/client/customize-store/index.tsx
+++ b/plugins/woocommerce/client/admin/client/customize-store/index.tsx
@@ -1,481 +1,311 @@
+/* eslint-disable @woocommerce/dependency-group */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
/**
* External dependencies
*/
-import { store as coreStore } from '@wordpress/core-data';
-import { Sender, createMachine } from 'xstate';
-import { useEffect, useMemo, useState } from '@wordpress/element';
-import { useMachine, useSelector } from '@xstate/react';
+import { useEffect, useMemo } from '@wordpress/element';
+import { __, isRTL } from '@wordpress/i18n';
import {
- getNewPath,
- getQuery,
- updateQueryString,
- getHistory,
- getPersistedQuery,
-} from '@woocommerce/navigation';
-import { optionsStore } from '@woocommerce/data';
-import { dispatch, resolveSelect } from '@wordpress/data';
-import { Spinner } from '@woocommerce/components';
-import { PluginArea } from '@wordpress/plugins';
-import { accessTaskReferralStorage } from '@woocommerce/onboarding';
+ Button,
+ __experimentalHStack as HStack,
+ __experimentalHeading as Heading,
+ __experimentalVStack as VStack,
+ __unstableMotion as motion,
+} from '@wordpress/components';
+import { getAdminLink } from '@woocommerce/settings';
+import { getNewPath } from '@woocommerce/navigation';
+import { recordEvent } from '@woocommerce/tracks';
+// @ts-ignore No types for this exist yet.
+import SidebarButton from '@wordpress/edit-site/build-module/components/sidebar-button';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { useFullScreen } from '~/utils';
-import {
- Intro,
- events as introEvents,
- services as introServices,
- actions as introActions,
-} from './intro';
-import { DesignWithoutAi } from './design-without-ai';
-
-import { AssemblerHub, events as assemblerHubEvents } from './assembler-hub';
-import { services as transitionalServices } from './transitional';
-import { findComponentMeta } from '~/utils/xstate/find-component';
-import {
- CustomizeStoreComponentMeta,
- CustomizeStoreComponent,
- customizeStoreStateMachineContext,
-} from './types';
+import { isWooExpress } from '~/utils/is-woo-express';
+import { isFeatureEnabled } from '~/utils/features';
+import { SiteHub } from './assembler-hub/site-hub';
+import { OPTIONS_STORE_NAME } from '@woocommerce/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import banner1Shape from './assets/images/banner-1-shape.svg';
+import banner2Shape from './assets/images/banner-2-shape.svg';
+import banner1Illu from './assets/images/banner-1-illu.svg';
+import banner2Illu from './assets/images/banner-2-illu.svg';
import './style.scss';
-import {
- navigateOrParent,
- attachParentListeners,
- isIframe,
- redirectToThemes,
-} from './utils';
-import useBodyClass from './hooks/use-body-class';
-import { useXStateInspect } from '~/xstate';
-
-export type customizeStoreStateMachineEvents =
- | introEvents
- | assemblerHubEvents
- | { type: 'EXTERNAL_URL_UPDATE' }
- | { type: 'INSTALL_FONTS' }
- | { type: 'NO_AI_FLOW_ERROR'; payload: { hasError: boolean } }
- | { type: 'IS_FONT_LIBRARY_AVAILABLE'; payload: boolean };
-const updateQueryStep = (
- _context: unknown,
- _evt: unknown,
- { action }: { action: unknown }
-) => {
- const { path } = getQuery() as { path: string };
- const step = ( action as { step: string } ).step;
- const pathFragments = path.split( '/' ); // [0] '', [1] 'customize-store', [2] step slug [3] design-with-ai, assembler-hub path fragments
- if ( pathFragments[ 1 ] === 'customize-store' ) {
- if ( pathFragments[ 2 ] !== step ) {
- // this state machine is only concerned with [2], so we ignore changes to [3]
- // [1] is handled by router at root of wc-admin
- const newPath = `/customize-store/${ step }`;
+const CustomizeStoreController = () => {
+ useFullScreen( [ 'woocommerce-customize-store' ] );
- // Since CYS also runs inside an iframe and because the getHistory
- // creates an instance per window context, making a push to the
- // history only alters that instance. Here we need to alter the
- // browser's (window.top) history and not the history of the iframe.
- if ( isIframe( window ) && window.top ) {
- // window.location.href does not fit in this case since it produces
- // a hard refresh to the page.
- window.top.history.pushState(
- {},
- '',
- getNewPath( {}, newPath )
- );
- return;
- }
+ const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
- updateQueryString( {}, newPath );
- }
- }
-};
+ const currentTheme = useSelect( ( select ) => {
+ // @ts-ignore
+ return select( 'core' ).getCurrentTheme();
+ }, [] );
-const redirectToWooHome = () => {
- const url = getNewPath( getPersistedQuery(), '/', {} );
- navigateOrParent( window, url );
-};
+ const isBlockTheme = currentTheme?.is_block_theme;
-const goBack = () => {
- const history = getHistory();
- if (
- history.__experimentalLocationStack.length >= 2 &&
- ! history.__experimentalLocationStack[
- history.__experimentalLocationStack.length - 2
- ].search.includes( 'customize-store' )
- ) {
- // If the previous location is not a customize-store step, go back in history.
- history.back();
- return;
- }
+ const designUrl = useMemo( () => {
+ // Encoding is needed to carry-over query parameters.
+ const encodedReturnUrl = encodeURIComponent(
+ '/wp-admin/admin.php?page=wc-admin&path=%2Fcustomize-store'
+ );
- redirectToWooHome();
-};
+ return isBlockTheme
+ ? getAdminLink( 'site-editor.php' )
+ : getAdminLink( `customize.php?return=${ encodedReturnUrl }` );
+ }, [ isBlockTheme ] );
-const markTaskComplete = async () => {
- const currentTemplateId: string | undefined = await resolveSelect(
- coreStore
- ).getDefaultTemplateId( { slug: 'home' } );
- return dispatch( optionsStore ).updateOptions( {
- woocommerce_admin_customize_store_completed: 'yes',
- // We use this on the intro page to determine if this same theme was used in the last customization.
- woocommerce_admin_customize_store_completed_theme_id: currentTemplateId,
- } );
-};
+ const marketplaceUrl = useMemo( () => {
+ if ( isWooExpress() ) {
+ return getAdminLink( 'themes.php' );
+ }
+ if ( isFeatureEnabled( 'marketplace' ) ) {
+ return getAdminLink(
+ 'admin.php?page=wc-admin&tab=themes&path=%2Fextensions'
+ );
+ }
+ return 'https://woocommerce.com/product-category/themes/';
+ }, [] );
-const browserPopstateHandler =
- () => ( sendBack: Sender< { type: 'EXTERNAL_URL_UPDATE' } > ) => {
- const popstateHandler = () => {
- sendBack( { type: 'EXTERNAL_URL_UPDATE' } );
- };
- window.addEventListener( 'popstate', popstateHandler );
+ useEffect( () => {
+ document.body.classList.add( 'woocommerce-customize-store' );
return () => {
- window.removeEventListener( 'popstate', popstateHandler );
+ document.body.classList.remove( 'woocommerce-customize-store' );
};
+ }, [] );
+
+ const markTaskComplete = async () => {
+ await updateOptions( {
+ woocommerce_admin_customize_store_completed: 'yes',
+ } );
};
-const CYSSpinner = () => (
- <div className="woocommerce-customize-store__loading">
- <Spinner />
- </div>
-);
+ const isNewTabClick = ( event: React.MouseEvent ) => {
+ // Middle mouse button, Cmd+Click (Mac), or Ctrl+Click (Windows/Linux)
+ return event.button === 1 || event.metaKey || event.ctrlKey;
+ };
-const redirectToReferrer = () => {
- const { getWithExpiry: getCYSTaskReferral, remove: removeCYSTaskReferral } =
- accessTaskReferralStorage( { taskId: 'customize-store' } );
+ const handleClick = async (
+ event: React.MouseEvent< HTMLAnchorElement >,
+ href: string
+ ) => {
+ if ( isNewTabClick( event ) ) {
+ // New tab: page stays open, so fire-and-forget is safe
+ markTaskComplete();
+ return;
+ }
- const taskReferral = getCYSTaskReferral();
+ event.preventDefault();
+ await markTaskComplete();
+ window.location.href = href;
+ };
- if ( taskReferral ) {
- removeCYSTaskReferral();
- window.location.href = taskReferral.returnUrl;
- }
-};
+ const handleDesignClick = async (
+ event: React.MouseEvent< HTMLAnchorElement >
+ ) => {
+ recordEvent( 'customize_your_store_intro_customize_click', {
+ theme_type: isBlockTheme ? 'block' : 'classic',
+ } );
-export const machineActions = {
- updateQueryStep,
- redirectToWooHome,
- redirectToThemes,
- redirectToReferrer,
- goBack,
-};
+ await handleClick( event, designUrl );
+ };
-export const customizeStoreStateMachineActions = {
- ...introActions,
- ...machineActions,
-};
+ const handleMarketplaceClick = async (
+ event: React.MouseEvent< HTMLAnchorElement >
+ ) => {
+ recordEvent( 'customize_your_store_intro_browse_all_themes_click' );
+ await handleClick( event, marketplaceUrl );
+ };
-export const customizeStoreStateMachineServices = {
- ...introServices,
- ...transitionalServices,
- browserPopstateHandler,
- markTaskComplete,
+ const chevronIcon = isRTL() ? chevronRight : chevronLeft;
+
+ return (
+ <div className="woocommerce-customize-store__container">
+ <div className="woocommerce-customize-store-sidebar">
+ <motion.div
+ className="woocommerce-edit-site-layout__header-container"
+ animate={ 'view' }
+ >
+ <SiteHub
+ variants={ {
+ view: { x: 0 },
+ } }
+ isTransparent={ false }
+ className="woocommerce-edit-site-layout__hub"
+ />
+ </motion.div>
+
+ <VStack
+ className="woocommerce-edit-site-sidebar-navigation-screen__main"
+ spacing={ 0 }
+ justify="flex-start"
+ >
+ <HStack
+ spacing={ 4 }
+ alignment="flex-start"
+ className="woocommerce-edit-site-sidebar-navigation-screen__title-icon"
+ >
+ <SidebarButton
+ href={ getNewPath( {}, '/', {} ) }
+ icon={ chevronIcon }
+ label={ __( 'Back', 'woocommerce' ) }
+ showTooltip={ false }
+ />
+
+ <Heading
+ className="woocommerce-edit-site-sidebar-navigation-screen__title"
+ level={ 1 }
+ as="h1"
+ >
+ <Button href={ getNewPath( {}, '/', {} ) }>
+ { __( 'Customize your store', 'woocommerce' ) }
+ </Button>
+ </Heading>
+ </HStack>
+
+ <div className="woocommerce-edit-site-sidebar-navigation-screen__content">
+ <p className="woocommerce-edit-site-sidebar-navigation-screen__description">
+ { __(
+ 'Design a store that reflects your brand and business. Customize your active theme, select a professionally designed theme, or create a new look using our store designer.',
+ 'woocommerce'
+ ) }
+ </p>
+ </div>
+ </VStack>
+ </div>
+
+ <div className="woocommerce-customize-store-main">
+ <div className="woocommerce-customize-store-banner">
+ <div className="woocommerce-customize-store-banner-content">
+ <div className="woocommerce-customize-store__banner-actions">
+ <h2>{ __( 'Design your own', 'woocommerce' ) }</h2>
+ <p>
+ { __(
+ 'Quickly create a beautiful store using our built-in store designer. Choose your layout, select a style, and much more.',
+ 'woocommerce'
+ ) }
+ </p>
+ <Button
+ variant="primary"
+ onClick={ handleDesignClick }
+ href={ designUrl }
+ >
+ { __( 'Start designing', 'woocommerce' ) }
+ </Button>
+ </div>
+ </div>
+ <div className="woocommerce-banner-visual">
+ <img
+ src={ banner1Shape }
+ alt=""
+ className="woocommerce-banner-shape"
+ />
+ <img
+ src={ banner1Illu }
+ alt=""
+ className="woocommerce-banner-icon"
+ />
+ </div>
+ </div>
+
+ <div className="woocommerce-customize-store-banner pick-your-theme-banner">
+ <div className="woocommerce-customize-store-banner-content">
+ <div className="woocommerce-customize-store__banner-actions">
+ <h2>
+ { __(
+ 'Pick your perfect theme',
+ 'woocommerce'
+ ) }
+ </h2>
+ <div className="pick-your-theme-banner__content">
+ <p>
+ { __(
+ 'Bring your vision to life — no coding required. Explore hundreds of free and paid ecommerce-optimized themes.',
+ 'woocommerce'
+ ) }
+ </p>
+ <ul>
+ <li>
+ { __(
+ 'Themes for every industry',
+ 'woocommerce'
+ ) }
+ </li>
+ <li>
+ { __(
+ 'Ready to use out of the box',
+ 'woocommerce'
+ ) }
+ </li>
+ <li>
+ { __(
+ '30-day money-back guarantee',
+ 'woocommerce'
+ ) }
+ </li>
+ </ul>
+ </div>
+ <Button
+ variant="primary"
+ onClick={ handleMarketplaceClick }
+ href={ marketplaceUrl }
+ >
+ { __(
+ 'Browse the Marketplace',
+ 'woocommerce'
+ ) }
+ </Button>
+ </div>
+ </div>
+ <div className="woocommerce-banner-visual">
+ <img
+ src={ banner2Shape }
+ alt=""
+ className="woocommerce-banner-shape"
+ />
+ <img
+ src={ banner2Illu }
+ alt=""
+ className="woocommerce-banner-icon"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ );
};
-export const customizeStoreStateMachineDefinition = createMachine( {
- id: 'customizeStore',
- initial: 'setFlags',
- predictableActionArguments: true,
- preserveActionOrder: true,
- schema: {
- context: {} as customizeStoreStateMachineContext,
- events: {} as customizeStoreStateMachineEvents,
- },
- context: {
- intro: {
- hasErrors: false,
- activeTheme: '',
- customizeStoreTaskCompleted: false,
- },
- isFontLibraryAvailable: null,
- isPTKPatternsAPIAvailable: null,
- activeThemeHasMods: undefined,
- } as customizeStoreStateMachineContext,
- invoke: {
- src: 'browserPopstateHandler',
- },
- on: {
- GO_BACK_TO_DESIGN_WITHOUT_AI: {
- target: 'intro',
- actions: [ { type: 'updateQueryStep', step: 'intro' } ],
- },
- EXTERNAL_URL_UPDATE: {
- target: 'navigate',
- },
- NO_AI_FLOW_ERROR: {
- target: 'intro',
- actions: [
- { type: 'assignNoAIFlowError' },
- { type: 'updateQueryStep', step: 'intro' },
- ],
- },
- INSTALL_FONTS: {
- target: 'designWithoutAi.installFonts',
- },
- },
- states: {
- setFlags: {
- invoke: {
- src: 'setFlags',
- onDone: {
- actions: 'assignFlags',
- target: 'navigate',
- },
- },
- },
- navigate: {
- always: [
- {
- target: 'intro',
- cond: {
- type: 'hasStepInUrl',
- step: 'intro',
- },
- },
- {
- target: 'designWithoutAi',
- cond: {
- type: 'hasStepInUrl',
- step: 'design',
- },
- },
- {
- target: 'assemblerHub',
- cond: {
- type: 'hasStepInUrl',
- step: 'assembler-hub',
- },
- },
- {
- target: 'transitionalScreen',
- cond: {
- type: 'hasStepInUrl',
- step: 'transitional',
- },
- },
- {
- target: 'intro',
- },
- ],
- },
- intro: {
- id: 'intro',
- initial: 'fetchIntroData',
- states: {
- fetchIntroData: {
- initial: 'pending',
- states: {
- pending: {
- invoke: {
- src: 'fetchIntroData',
- onError: {
- actions: 'assignFetchIntroDataError',
- target: 'success',
- },
- onDone: {
- target: 'success',
- actions: [
- 'assignActiveTheme',
- 'assignCustomizeStoreCompleted',
- 'assignCurrentThemeIsAiGenerated',
- ],
- },
- },
- },
- success: { type: 'final' },
- },
- onDone: 'intro',
- },
- intro: {
- meta: {
- component: Intro,
- },
- },
- },
- on: {
- CLICKED_ON_BREADCRUMB: {
- actions: 'goBack',
- },
- DESIGN_WITHOUT_AI: {
- actions: [ 'recordTracksDesignWithoutAIClicked' ],
- target: 'designWithoutAi',
- },
- SELECTED_NEW_THEME: {
- actions: [ 'recordTracksThemeSelected' ],
- target: 'appearanceTask',
- },
- SELECTED_ACTIVE_THEME: {
- actions: [ 'recordTracksThemeSelected' ],
- target: 'appearanceTask',
- },
- SELECTED_BROWSE_ALL_THEMES: {
- actions: [
- 'recordTracksBrowseAllThemesClicked',
- 'redirectToThemes',
- ],
- },
- },
- },
- designWithoutAi: {
- initial: 'preDesignWithoutAi',
- states: {
- preDesignWithoutAi: {
- always: {
- target: 'designWithoutAi',
- },
- },
- designWithoutAi: {
- entry: [ { type: 'updateQueryStep', step: 'design' } ],
- meta: {
- component: DesignWithoutAi,
- },
- },
- // This state is used to install fonts and then redirect to the assembler hub.
- installFonts: {
- entry: [
- {
- type: 'updateQueryStep',
- step: 'design/install-fonts',
- },
- ],
- meta: {
- component: DesignWithoutAi,
- },
- },
- // This state is used to install patterns and then redirect to the assembler hub.
- installPatterns: {
- entry: [
- {
- type: 'updateQueryStep',
- step: 'design/install-patterns',
- },
- ],
- meta: {
- component: DesignWithoutAi,
- },
- },
- },
- },
- assemblerHub: {
- initial: 'fetchCustomizeStoreCompleted',
- states: {
- fetchCustomizeStoreCompleted: {
- invoke: {
- src: 'fetchCustomizeStoreCompleted',
- onDone: {
- actions: 'assignCustomizeStoreCompleted',
- target: 'checkCustomizeStoreCompleted',
- },
- },
- },
- checkCustomizeStoreCompleted: {
- always: [
- {
- // Redirect to the "intro step" if the active theme has no modifications.
- cond: 'customizeTaskIsNotCompleted',
- actions: [
- { type: 'updateQueryStep', step: 'intro' },
- ],
- target: '#customizeStore.intro',
- },
- {
- // Otherwise, proceed to the next step.
- cond: 'customizeTaskIsCompleted',
- target: 'assemblerHub',
- },
- ],
- },
- assemblerHub: {
- entry: [
- { type: 'updateQueryStep', step: 'assembler-hub' },
- ],
- meta: {
- component: AssemblerHub,
- },
- },
- postAssemblerHub: {
- invoke: [
- {
- src: 'markTaskComplete',
- onDone: {
- target: '#customizeStore.transitionalScreen',
- },
- },
- {
- // Pre-fetch survey completed option so we can show the screen immediately.
- src: 'fetchSurveyCompletedOption',
- },
- ],
- },
- },
- on: {
- FINISH_CUSTOMIZATION: {
- target: '.postAssemblerHub',
- },
- },
- },
- transitionalScreen: {
- initial: 'fetchCustomizeStoreCompleted',
- states: {
- fetchCustomizeStoreCompleted: {
- invoke: {
- src: 'fetchCustomizeStoreCompleted',
- onDone: {
- actions: 'assignCustomizeStoreCompleted',
- target: 'checkCustomizeStoreCompleted',
- },
- },
- },
- checkCustomizeStoreCompleted: {
- always: [
- {
- // Redirect to the "intro step" if the active theme has no modifications.
- cond: 'customizeTaskIsNotCompleted',
- actions: [
- { type: 'updateQueryStep', step: 'intro' },
- ],
- target: '#customizeStore.intro',
- },
- {
- cond: 'hasTaskReferral',
- target: 'skipTransitional',
- },
- {
- // Otherwise, proceed to the next step.
- cond: 'customizeTaskIsCompleted',
- target: 'preTransitional',
- },
- ],
- },
- preTransitional: {
- meta: {
- component: CYSSpinner,
- },
- invoke: {
- src: 'fetchSurveyCompletedOption',
- onError: {
- target: 'transitional', // leave it as initialised default on error
- },
- onDone: {
- target: 'transitional',
- },
- },
- },
- skipTransitional: {
- entry: [ 'redirectToReferrer' ],
- },
- transitional: {
- entry: [
- { type: 'updateQueryStep', step: 'transitional' },
- ],
- meta: {
- component: AssemblerHub,
- },
- },
- },
- },
- appearanceTask: {},
- },
-} );
+export default CustomizeStoreController;
+
+// ============================================================================
+// Stub exports for backwards compatibility with old flow code (intro, design-without-ai, etc.)
+// These will be removed in Phase 2 cleanup (see https://github.com/woocommerce/woocommerce/pull/61991).
+// ============================================================================
+
+/**
+ * Stub event type for backwards compatibility.
+ * The old state machine code references this type.
+ */
+export type customizeStoreStateMachineEvents =
+ | { type: 'GO_BACK_TO_DESIGN_WITHOUT_AI' }
+ | { type: 'EXTERNAL_URL_UPDATE' }
+ | { type: 'INSTALL_FONTS' }
+ | { type: 'NO_AI_FLOW_ERROR'; payload: { hasError: boolean } }
+ | { type: 'IS_FONT_LIBRARY_AVAILABLE'; payload: boolean }
+ | { type: 'FINISH_CUSTOMIZATION' }
+ | { type: 'SELECTED_BROWSE_ALL_THEMES' }
+ | { type: 'DESIGN_WITHOUT_AI' }
+ | { type: 'CLICKED_ON_BREADCRUMB' }
+ | { type: 'JETPACK_OFFLINE_HOWTO' }
+ | { type: 'SELECTED_NEW_THEME'; payload: { theme: string } }
+ | { type: 'SELECTED_ACTIVE_THEME'; payload: { theme: string } };
+
+/**
+ * Global window type declaration for backwards compatibility.
+ * The old flow code sets/reads this global object.
+ */
declare global {
interface Window {
__wcCustomizeStore: {
@@ -488,131 +318,3 @@ declare global {
};
}
}
-
-export const CustomizeStoreController = ( {
- actionOverrides,
- servicesOverrides,
-}: {
- actionOverrides: Partial< typeof customizeStoreStateMachineActions >;
- servicesOverrides: Partial< typeof customizeStoreStateMachineServices >;
-} ) => {
- useFullScreen( [ 'woocommerce-customize-store' ] );
-
- const augmentedStateMachine = useMemo( () => {
- return customizeStoreStateMachineDefinition.withConfig( {
- services: {
- ...customizeStoreStateMachineServices,
- ...servicesOverrides,
- },
- actions: {
- ...customizeStoreStateMachineActions,
- ...actionOverrides,
- },
- guards: {
- hasStepInUrl: ( _ctx, _evt, { cond }: { cond: unknown } ) => {
- const { path = '' } = getQuery() as { path: string };
- const pathFragments = path.split( '/' );
- return (
- pathFragments[ 2 ] === // [0] '', [1] 'customize-store', [2] step slug
- ( cond as { step: string | undefined } ).step
- );
- },
- activeThemeHasMods: ( _ctx ) => {
- return !! _ctx.activeThemeHasMods;
- },
- activeThemeHasNoMods: ( _ctx ) => {
- return ! _ctx.activeThemeHasMods;
- },
- customizeTaskIsCompleted: ( _ctx ) => {
- return _ctx.intro.customizeStoreTaskCompleted;
- },
- customizeTaskIsNotCompleted: ( _ctx ) => {
- return ! _ctx.intro.customizeStoreTaskCompleted;
- },
- hasTaskReferral: () => {
- const { getWithExpiry: getCYSTaskReferral } =
- accessTaskReferralStorage( {
- taskId: 'customize-store',
- } );
- return getCYSTaskReferral() !== null;
- },
- },
- } );
- }, [ actionOverrides, servicesOverrides ] );
-
- const { versionEnabled } = useXStateInspect();
-
- const [ state, send, service ] = useMachine( augmentedStateMachine, {
- devTools: versionEnabled === 'V4',
- } );
-
- useEffect( () => {
- if ( isIframe( window ) ) {
- return;
- }
- window.__wcCustomizeStore = {
- ...window.__wcCustomizeStore,
- // This is needed because the iframe loads the entire Customize Store app.
- // This means that the iframe instance will have different state machines
- // than the parent window.
- // Check https://github.com/woocommerce/woocommerce/issues/45278 for more details.
- sendEventToIntroMachine: (
- typeEvent: customizeStoreStateMachineEvents
- ) => send( typeEvent ),
- };
- }, [ send ] );
-
- window.__wcCustomizeStore = {
- ...window.__wcCustomizeStore,
- };
-
- // eslint-disable-next-line react-hooks/exhaustive-deps -- false positive due to function name match, this isn't from react std lib
- const currentNodeMeta = useSelector( service, ( currentState ) =>
- findComponentMeta< CustomizeStoreComponentMeta >(
- currentState?.meta ?? undefined
- )
- );
-
- const [ CurrentComponent, setCurrentComponent ] =
- useState< CustomizeStoreComponent | null >( null );
- useEffect( () => {
- if ( currentNodeMeta?.component ) {
- setCurrentComponent( () => currentNodeMeta?.component );
- }
- }, [ CurrentComponent, currentNodeMeta?.component ] );
-
- // Run listeners for parent window.
- useEffect( () => {
- const removeListener = attachParentListeners();
- return removeListener;
- }, [] );
-
- useBodyClass( 'is-fullscreen-mode' );
-
- const currentNodeCssLabel =
- state.value instanceof Object
- ? Object.keys( state.value )[ 0 ]
- : state.value;
-
- return (
- <>
- <div
- className={ `woocommerce-customize-store__container woocommerce-customize-store__step-${ currentNodeCssLabel }` }
- >
- { CurrentComponent ? (
- <CurrentComponent
- parentMachine={ service }
- sendEvent={ send }
- context={ state.context }
- currentState={ state.value }
- />
- ) : (
- <CYSSpinner />
- ) }
- </div>
- <PluginArea scope="woocommerce-customize-store" />
- </>
- );
-};
-
-export default CustomizeStoreController;
diff --git a/plugins/woocommerce/client/admin/client/customize-store/style.scss b/plugins/woocommerce/client/admin/client/customize-store/style.scss
index 4d2b4792c2..56357ceab7 100644
--- a/plugins/woocommerce/client/admin/client/customize-store/style.scss
+++ b/plugins/woocommerce/client/admin/client/customize-store/style.scss
@@ -32,292 +32,249 @@
}
}
-body.woocommerce-customize-store.js.is-fullscreen-mode {
- margin-top: 0 !important;
- height: 100%;
-
- & > div.tour-kit.woocommerce-tour-kit > div > div.tour-kit-spotlight.is-visible {
- outline: 99999px solid rgba(0, 0, 0, 0.15);
- }
+// Splash page layout
+.woocommerce-customize-store__container {
+ display: flex;
+ flex-direction: row;
+ background-color: #fcfcfc;
+ min-height: 100vh;
- #screen-meta-links {
- display: none;
+ @media screen and (max-width: 782px) {
+ flex-direction: column;
}
}
-.woocommerce-cys-layout {
+.woocommerce-customize-store-sidebar {
+ width: 380px;
+ height: 100%;
+ padding: 0 16px;
display: flex;
flex-direction: column;
- align-items: center;
+ overflow-x: hidden;
- h1 {
- text-align: center;
- color: #000;
- font-size: 32px;
- font-style: normal;
- font-weight: 500;
- line-height: 40px; /* 125% */
- margin-top: 100px;
- margin-bottom: 60px;
- }
-
- .woocommerce-cys-page {
- width: 615px;
- display: flex;
- flex-direction: column;
- align-items: center;
+ @media screen and (min-width: 768px) and (max-width: 1024px) {
+ width: 280px;
}
- button.is-primary {
- width: 404px;
- display: block;
- height: 48px;
- margin-top: 32px;
+ .woocommerce-edit-site-layout__hub {
+ width: 380px;
+ height: 64px;
}
-}
-.woocommerce-design-with-ai__container {
- .woocommerce-onboarding-loader {
- img {
- width: 216px;
- height: 136px;
- }
+ .woocommerce-edit-site-site-hub {
+ align-items: center;
+ display: flex;
+ gap: 8px;
+ justify-content: space-between;
}
-}
-
-.woocommerce-cys-design-with-ai {
- .components-base-control {
- width: 404px;
- textarea {
- margin: 0 0 12px 0;
- height: 167px;
- border-radius: 2px;
- border: 1px solid #bbb;
- background: #fff;
- color: $gray-900;
- font-size: 13px;
- font-style: normal;
- font-weight: 400;
- line-height: 18px; /* 138.462% */
-
- &::placeholder {
- color: #757575;
- }
- &:focus {
- box-shadow: none;
- border-color: var(--wp-admin-theme-color, #3858e9);
- }
- }
+ .woocommerce-edit-site-site-hub__view-mode-toggle-container {
+ height: 64px;
+ padding: 16px 12px 0 0;
+ color: #ccc;
+ width: auto;
}
- .woocommerce-cys-design-with-ai-guide {
- padding: 12px;
- width: 404px;
- border-radius: 2px;
- background: var(--wp-admin-theme-color-background-04, rgba(168, 168, 170, 0.301));
- color: var(--gutenberg-gray-800, #2f2f2f);
-
- p {
- padding: 0;
- margin: 0;
- font-size: 13px;
- font-style: normal;
- font-weight: 500;
- line-height: 20px; /* 153.846% */
- }
- ul {
- list-style: inside;
- margin-left: 8px;
- li {
- font-weight: 400;
- }
- }
+ .woocommerce-edit-site-sidebar-navigation-screen__title-icon {
+ align-items: center;
+ background-color: transparent;
+ padding-top: 16px;
+ padding-bottom: 0;
+ margin-bottom: 8px;
+ gap: 0;
+ width: 348px;
+ z-index: 2;
}
-}
-.woocommerce-cys-design-with-ai-look-and-feel,
-.woocommerce-cys-design-with-ai-tone-of-voice {
- .choices {
- width: 404px;
+ .woocommerce-edit-site-layout__view-mode-toggle-icon.edit-site-site-icon {
+ align-items: center;
display: flex;
- flex-direction: column;
- gap: 16px;
}
-}
-.woocommerce-cys-design-with-ai__error-notice.is-error {
- background: #fce2e4;
- padding: $gap-small;
- // gap: 12px;
- font-size: 13px;
- font-style: normal;
- font-weight: 400;
- line-height: 24px;
- color: $gray-900;
-
- .components-notice__content {
+ .woocommerce-edit-site-site-hub__site-title {
+ color: $gray-900;
+ font-size: 0.8125rem;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 20px;
margin: 0;
}
- .components-button {
- padding: 0;
- height: initial;
+ .edit-site-site-icon__image {
+ border-radius: 2px;
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ background: rgba(0, 0, 0, 0);
}
-}
-.cys-fullscreen-iframe {
- display: block;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border: none;
- z-index: 9999;
- transition: opacity 1.2s linear;
- opacity: 0;
-}
+ .woocommerce-edit-site-site-hub__view-mode-toggle-container {
+ .woocommerce-edit-site-layout__view-mode-toggle,
+ .woocommerce-edit-site-layout__view-mode-toggle-icon.edit-site-site-icon,
+ .edit-site-site-icon__icon {
+ width: 32px;
+ height: 32px;
+ fill: #ccc;
+ }
+ }
-.woocommerce-customize-store__onboarding-welcome-modal,
-.woocommerce-customize-store__design-change-warning-modal,
-.woocommerce-customize-store__theme-switch-warning-modal {
- width: 480px;
- max-width: 480px;
+ .woocommerce-edit-site-sidebar-navigation-screen__main {
+ height: 100%;
+ margin-bottom: 0;
- .components-modal__header {
- padding-top: 32px;
- }
+ .edit-site-sidebar-button {
+ color: $gray-900;
+ height: 40px;
+ }
- p {
- padding: 16px 0 16px 0;
- margin: 0;
- }
+ .woocommerce-edit-site-sidebar-navigation-screen__title {
+ flex-grow: 1;
+ padding: 0;
- a,
- button {
- text-decoration: none !important;
- }
+ button {
+ font-size: 1rem;
+ color: $gray-900;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 24px;
+ padding: 0;
+ }
+ }
- .components-button {
- padding: 8px 16px;
- }
+ .woocommerce-edit-site-sidebar-navigation-screen__description {
+ color: $gray-700;
+ font-size: 0.8125rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px;
+ margin-block: 0 32px;
- h1 {
- line-height: 28px;
- font-size: 20px;
- color: #1e1e1e;
- }
+ a {
+ text-decoration: none;
+ }
+ }
- span {
- color: #1e1e1e;
- font-weight: 700;
+ .woocommerce-edit-site-sidebar-navigation-screen__content {
+ padding-inline: 16px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
}
- .woocommerce-customize-store__design-change-warning-modal-footer,
- .woocommerce-customize-store__theme-switch-warning-modal-footer {
- display: flex;
- gap: 12px;
- justify-content: flex-end;
+ .woocommerce-edit-site-layout__header-container {
+ position: static;
+
+ @media screen and (max-width: 782px) {
+ display: none;
+ }
}
}
-.woocommerce-customize-store__opt-in-usage-tracking-modal {
- width: 480px;
- max-width: 480px;
-
- a {
- text-decoration: underline;
- color: inherit;
- }
+.woocommerce-customize-store-main {
+ flex: 1;
+ padding: 2rem 2.5rem;
+ overflow: auto;
- .components-modal__header {
- padding: 32px 32px 16px 32px;
+ @media screen and (max-width: 782px) {
+ padding: 1rem;
+ width: 100%;
}
- .components-modal__content {
- padding: 0;
- }
+ .woocommerce-customize-store-banner {
+ background: rgba(242, 237, 255, 0.6);
+ border-radius: 4px;
+ display: flex;
+ margin-bottom: 1.5rem;
+ min-height: 248px;
+ width: 100%;
+ align-items: center;
+ padding: 2rem 3rem;
+ position: relative;
+ overflow: hidden;
- .core-profiler__checkbox {
- padding: 16px 32px 16px 32px;
+ @media screen and (max-width: 782px) {
+ padding: 1.5rem;
+ min-height: 200px;
+ }
- div {
+ .woocommerce-banner-visual {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ pointer-events: none;
- .components-checkbox-control__input-container {
- display: block;
+ @media screen and (max-width: 1024px) {
+ display: none;
}
- }
- }
- .woocommerce-customize-store__design-change-warning-modal-footer {
- border-top: 1px solid #ddd;
- padding: 24px 32px 32px 32px;
- width: 100%;
- display: flex;
- gap: 12px;
- justify-content: flex-end;
+ .woocommerce-banner-shape {
+ position: absolute;
+ height: 100%;
+ width: auto;
+ }
- button.is-link {
- padding: 6px 12px;
- text-decoration: none;
+ .woocommerce-banner-icon {
+ position: relative;
+ }
}
- }
-}
+ .woocommerce-customize-store-banner-content {
+ width: 100%;
+ max-width: 60%;
-.woocommerce-onboarding-loader {
- min-height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- background-color: #fff;
+ @media screen and (max-width: 1024px) {
+ max-width: 100%;
+ }
- .woocommerce-onboarding-loader-wrapper {
- align-items: flex-start;
- display: flex;
- flex-direction: column;
- justify-content: center;
- max-width: 520px;
- min-height: 400px;
+ button.components-button {
+ padding: 8px 16px;
+ height: 40px;
+ }
- .woocommerce-onboarding-loader-container {
- text-align: center;
- min-height: 400px;
- }
+ h2 {
+ font-size: 1.25rem;
+ line-height: 23.87px;
+ font-weight: 500;
+ color: #000;
+ padding: 0;
+ margin-top: 0;
+ }
- .loader-hearticon {
- position: relative;
- top: 2px;
- left: 2px;
- }
- }
-}
+ p {
+ margin: 12px 0 28px 0;
+ color: #2f2f2f;
+ line-height: 16px;
+ }
-.woocommerce-customize-store__step-designWithoutAi {
- .woocommerce-onboarding-loader-wrapper {
- min-height: auto;
- .woocommerce-onboarding-loader-container {
- min-height: auto;
+ .pick-your-theme-banner__content {
+ display: flex;
+ gap: 1rem;
+ flex-direction: row;
+
+ ul {
+ flex: 1 1 50%;
+ list-style: disc;
+ padding-left: 1rem;
+
+ li {
+ margin-bottom: 0;
+ line-height: 1.5;
+ }
+ }
+
+ p {
+ line-height: 1.5;
+ flex: 1 1 50%;
+ }
+ }
}
}
}
-
-.progress-bar.smooth-transition {
- .woocommerce-onboarding-progress-bar__filler {
- transition: width linear 2s;
- }
-}
-
-.woocommerce-cys-wordpress-header-logo {
- position: absolute;
- top: 28px;
- left: 24px;
-}
-
-.woocommerce-edit-site-layout__hub svg.woocommerce-cys-wordpress-header-logo {
- width: 24px;
- height: 24px;
-}
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/content/content.scss b/plugins/woocommerce/client/admin/client/marketplace/components/content/content.scss
index d8202faa42..94308517ef 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/content/content.scss
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/content/content.scss
@@ -8,10 +8,6 @@
min-height: 500px;
}
-.woocommerce-marketplace__content .woocommerce-customize-store-banner .woocommerce-customize-store-banner-content {
- width: 100%;
-}
-
@media screen and (min-width: $breakpoint-medium) {
.woocommerce-marketplace__content {
padding: $grid-unit-30 $grid-unit-40;
@@ -24,12 +20,6 @@
}
}
-@media screen and (max-width: $breakpoint-medium) {
- .woocommerce-marketplace__content .woocommerce-customize-store-banner .woocommerce-customize-store-banner-content {
- margin-top: 40px;
- }
-}
-
// Tweaks to Connect Notice
.woocommerce-marketplace__connect-notice {
background-color: #fef8ee;
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/product-list-content.scss b/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/product-list-content.scss
index dd53132168..eafdef761b 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/product-list-content.scss
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/product-list-content.scss
@@ -13,17 +13,6 @@
height: 270px;
}
- .woocommerce-customize-store-banner {
- grid-column: 1 / -1;
- display: block;
- width: 100%;
- margin: 16px 0;
- }
-
- .woocommerce-customize-store-banner-content {
- margin-top: 63px;
- }
-
&__browse-wp-theme-directory {
margin-top: 24px;
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/product-list-content.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/product-list-content.tsx
index fcb4598191..297567ffe9 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/product-list-content.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-list-content/product-list-content.tsx
@@ -3,19 +3,15 @@
*/
import { Fragment, useEffect, useState } from '@wordpress/element';
import clsx from 'clsx';
-import { addQueryArgs } from '@wordpress/url';
/**
* Internal dependencies
*/
import './product-list-content.scss';
-import '~/customize-store/intro/intro.scss';
-import '~/customize-store/style.scss';
import ProductCard from '../product-card/product-card';
import { Product, ProductCardType, ProductType } from '../product-list/types';
import { appendURLParams } from '../../utils/functions';
-import { ADMIN_URL, getAdminSetting } from '~/utils/admin-settings';
-import { NoAIBanner } from '~/customize-store/intro/intro-banners';
+import { getAdminSetting } from '~/utils/admin-settings';
export default function ProductListContent( props: {
products: Product[];
@@ -105,8 +101,6 @@ export default function ProductListContent( props: {
setProductsToShow( props.products.slice( 0, completeRows * columns ) );
}, [ columns, props.products, props.productGroup, props.cardType ] );
- const bannerPosition = columns * 2 - 1;
-
const classes = clsx(
'woocommerce-marketplace__product-list-content',
props.className
@@ -183,23 +177,6 @@ export default function ProductListContent( props: {
} ),
} }
/>
- { index === bannerPosition &&
- props.type === 'theme' && (
- <NoAIBanner
- redirectToCYSFlow={ () => {
- const customizeStoreDesignUrl =
- addQueryArgs(
- `${ ADMIN_URL }admin.php`,
- {
- page: 'wc-admin',
- path: '/customize-store/design',
- }
- );
- window.location.href =
- customizeStoreDesignUrl;
- } }
- />
- ) }
</Fragment>
) ) }
</div>
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/products/products.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/products/products.tsx
index 3771e44a63..ed401afab2 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/products/products.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/products/products.tsx
@@ -2,17 +2,10 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
-import {
- createInterpolateElement,
- useContext,
- useState,
-} from '@wordpress/element';
+import { createInterpolateElement, useContext } from '@wordpress/element';
import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation';
import { Button } from '@wordpress/components';
import clsx from 'clsx';
-import { addQueryArgs } from '@wordpress/url';
-import { useSelect } from '@wordpress/data';
-import { onboardingStore } from '@woocommerce/data';
/**
* Internal dependencies
@@ -25,7 +18,6 @@ import ProductLoader from '../product-loader/product-loader';
import NoResults from '../product-list-content/no-results';
import { Product, ProductType, SearchResultType } from '../product-list/types';
import { ADMIN_URL } from '~/utils/admin-settings';
-import { ThemeSwitchWarningModal } from '~/customize-store/intro/warning-modals';
interface ProductsProps {
categorySelector?: boolean;
@@ -57,29 +49,6 @@ export default function Products( props: ProductsProps ) {
const label = LABELS[ props.type ].label;
const query = useQuery();
const category = query?.category;
- interface Theme {
- stylesheet?: string;
- }
-
- const currentTheme = useSelect( ( select ) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- return select( 'core' ).getCurrentTheme() as Theme;
- }, [] );
- const isDefaultTheme = currentTheme?.stylesheet === 'twentytwentyfour';
- const [ isModalOpen, setIsModalOpen ] = useState( false );
- const customizeStoreDesignUrl = addQueryArgs( `${ ADMIN_URL }admin.php`, {
- page: 'wc-admin',
- path: '/customize-store/design',
- } );
- const assemblerHubUrl = addQueryArgs( `${ ADMIN_URL }admin.php`, {
- page: 'wc-admin',
- path: '/customize-store/assembler-hub',
- } );
-
- const customizeStoreTask = useSelect( ( select ) => {
- return select( onboardingStore ).getTask( 'customize-store' );
- }, [] );
// Only show the "View all" button when on search but not showing a specific section of results.
const showAllButton = props.showAllButton ?? false;
@@ -147,31 +116,7 @@ export default function Products( props: ProductsProps ) {
<CategorySelector type={ props.type } />
) }
</div>
- { props.type === 'theme' && (
- <Button
- className="woocommerce-marketplace__customize-your-store-button"
- variant="secondary"
- text={ __( 'Design your own', 'woocommerce' ) }
- onClick={ () => {
- if ( ! isDefaultTheme ) {
- setIsModalOpen( true );
- } else if ( customizeStoreTask?.isComplete ) {
- window.location.href = assemblerHubUrl;
- } else {
- window.location.href = customizeStoreDesignUrl;
- }
- } }
- />
- ) }
</nav>
- { isModalOpen && (
- <ThemeSwitchWarningModal
- setIsModalOpen={ setIsModalOpen }
- redirectToCYSFlow={ () => {
- window.location.href = customizeStoreDesignUrl;
- } }
- />
- ) }
<ProductListContent
products={ products }
type={ props.type }
diff --git a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/TaskLists.php b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/TaskLists.php
index 9da51efeaa..d0ffb55a3a 100644
--- a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/TaskLists.php
+++ b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/TaskLists.php
@@ -50,7 +50,6 @@ class TaskLists {
'Tax',
'Shipping',
'Marketing',
- 'Appearance',
'AdditionalPayments',
'ReviewShippingOptions',
'GetMobileApp',
@@ -111,8 +110,8 @@ class TaskLists {
$tasks = array(
'StoreDetails',
'Products',
- 'Appearance',
'Payments',
+ 'CustomizeStore',
'Tax',
'Shipping',
'LaunchYourStore',
diff --git a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php
index f7194f126f..280931044e 100644
--- a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php
+++ b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/CustomizeStore.php
@@ -19,13 +19,6 @@ class CustomizeStore extends Task {
public function __construct( $task_list ) {
parent::__construct( $task_list );
- add_action( 'admin_enqueue_scripts', array( $this, 'possibly_add_site_editor_scripts' ) );
-
- add_action( 'show_admin_bar', array( $this, 'possibly_hide_wp_admin_bar' ) );
-
- // Hook to remove unwanted UI elements when users are viewing with ?cys-hide-admin-bar=true.
- add_action( 'wp_head', array( $this, 'possibly_remove_unwanted_ui_elements' ) );
-
add_action( 'save_post_wp_global_styles', array( $this, 'mark_task_as_complete_block_theme' ), 10, 3 );
add_action( 'save_post_wp_template', array( $this, 'mark_task_as_complete_block_theme' ), 10, 3 );
add_action( 'save_post_wp_template_part', array( $this, 'mark_task_as_complete_block_theme' ), 10, 3 );
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/onboarding/setup-checklist.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/onboarding/setup-checklist.spec.js
index cd79b714d3..ef05a4b360 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/onboarding/setup-checklist.spec.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/onboarding/setup-checklist.spec.js
@@ -68,7 +68,7 @@ test(
await page.goto( 'wp-admin/admin.php?page=wc-admin' );
await test.step( 'Load the WC Admin page.', async () => {
await expect(
- page.getByRole( 'button', { name: 'Choose your theme' } )
+ page.getByRole( 'button', { name: 'Customize your store' } )
).toBeVisible();
await expect( page.getByText( 'Store management' ) ).toBeHidden();
} );
@@ -83,7 +83,7 @@ test(
.click();
await expect(
page.getByRole( 'heading', {
- name: 'Start customizing your store',
+ name: 'Customize your store',
} )
).toBeHidden();
await expect( page.getByText( 'Store management' ) ).toBeVisible();