Fix: issue-590

src/js/constants/selectors-map.ts

@@ -100,6 +100,11 @@ export const mobileMenu = {
   specificChild: (param: string | undefined) => `.menu[data-id="${param}"]`,
 };
 
+export const guestPasswordToggle = {
+  checkbox: '.js-password-form__check',
+  passwordWrapper: '.js-password-form__input-wrapper',
+};
+
 export const visiblePassword = {
   visiblePassword: '.js-visible-password',
 };
@@ -180,6 +185,7 @@ const selectorsMap = {
   languageSelector,
   searchBar,
   mobileMenu,
+  guestPasswordToggle,
   visiblePassword,
   desktopMenu,
   formValidation,

src/js/guest-password-toggle.ts

@@ -0,0 +1,36 @@
+/**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+const initGuestPasswordToggle = () => {
+  const {Theme} = window;
+  const {guestPasswordToggle: GuestPasswordToggleMap} = Theme.selectors;
+  const guestCheckbox = document.querySelector(GuestPasswordToggleMap.checkbox);
+  const guestPasswordWrapper = document.querySelector(GuestPasswordToggleMap.passwordWrapper);
+
+  if (guestCheckbox && guestPasswordWrapper) {
+    guestCheckbox.addEventListener('change', () => {
+      const passwordInput = guestPasswordWrapper.querySelector('input[type="password"]');
+
+      if (guestCheckbox.checked) {
+        guestPasswordWrapper.classList.remove('d-none');
+      } else {
+        guestPasswordWrapper.classList.add('d-none');
+
+        if (passwordInput) {
+          const feedbackContainer = document.querySelector(Theme.selectors.passwordPolicy.container);
+
+          passwordInput.value = '';
+          passwordInput.classList.remove('border-success', 'border-danger', 'border');
+
+          if (feedbackContainer) {
+            feedbackContainer.classList.add('d-none');
+          }
+        }
+      }
+    });
+  }
+};
+
+export default initGuestPasswordToggle;

src/js/theme.ts

@@ -15,6 +15,7 @@ import initMobileMenu from './mobile-menu';
 import initSearchbar from './modules/ps_searchbar';
 import initLanguageSelector from './modules/ps_languageselector';
 import initCurrencySelector from './modules/ps_currencyselector';
+import initGuestPasswordToggle from './guest-password-toggle';
 import initVisiblePassword from './visible-password';
 import initErrorHandler from './errors';
 import useToast from './components/useToast';
@@ -43,6 +44,7 @@ $(() => {
   initLanguageSelector();
   initCurrencySelector();
   initMobileMenu();
+  initGuestPasswordToggle();
   initVisiblePassword();
   initDesktopMenu();
   initFormValidation();
@@ -79,6 +81,7 @@ export default {
   initLanguageSelector,
   initCurrencySelector,
   initMobileMenu,
+  initGuestPasswordToggle,
   initVisiblePassword,
   initDesktopMenu,
 };

templates/checkout/_partials/customer-form.tpl

@@ -6,12 +6,19 @@
 
 {block "form_field"}
   {if $field.name === 'password' and $guest_allowed}
-      <p class="form-informations">
-        <span class="fw-bold form-informations-title">{l s='Create an account' d='Shop.Theme.Checkout'}</span> <span class="font-italic form-informations-option">{l s='(optional)' d='Shop.Theme.Checkout'}</span>
-        <br>
-        <span class="text-muted form-informations-subtitle">{l s='And save time on your next order!' d='Shop.Theme.Checkout'}</span>
-      </p>
-      {$smarty.block.parent}
+    <div class="mb-3">
+      <div class="form-check">
+        <input class="js-password-form__check form-check-input" id="password-form__check" type="checkbox" name="password-form__check">
+        <label class="form-check-label" for="password-form__check">
+          <span class="fw-bold">{l s='Create an account' d='Shop.Theme.Checkout'}</span> <small class="fw-normal">{l s='(optional)' d='Shop.Theme.Checkout'}</small>
+          <br />
+          <span class="text-muted fst-italic">{l s='And save time on your next order!' d='Shop.Theme.Checkout'}</span>
+        </label>
+      </div>
+      <div class="js-password-form__input-wrapper d-none mt-3">
+        {$smarty.block.parent}
+      </div>
+    </div>
   {else}
     {$smarty.block.parent}
   {/if}

templates/checkout/_partials/steps/personal-information.tpl

@@ -63,7 +63,11 @@
           aria-controls="checkout-guest-form"
           aria-selected="{if !$show_login_form}true{else}false{/if}"
         >
-          {l s='New customer' d='Shop.Theme.Checkout'}
+          {if isset($guest_allowed) && $guest_allowed}
+            {l s='Order as a guest' d='Shop.Theme.Checkout'}
+          {else}
+            {l s='New customer' d='Shop.Theme.Checkout'}
+          {/if}
         </button>
       </li>