magento/magento2#32990: Date and Time Format for Custom Option Not Working

app/code/Magento/Catalog/Block/Product/View/Options/Type/Date.php

@@ -93,7 +93,10 @@ public function getCalendarDateHtml()
  $yearStart = $this->_catalogProductOptionTypeDate->getYearStart();
  $yearEnd = $this->_catalogProductOptionTypeDate->getYearEnd();
 
- $dateFormat = $this->_localeDate->getDateFormatWithLongYear();
+ $fieldsSeparator = '/';
+ $fieldsOrder = $this->_catalogProductOptionTypeDate->getConfigData('date_fields_order') ?? '';
+ $fieldsOrder = str_replace(",", $fieldsSeparator, $fieldsOrder);
+ $dateFormat = $fieldsOrder !== "m/d/y" ? $fieldsOrder : $this->_localeDate->getDateFormatWithLongYear();
  /** Escape RTL characters which are present in some locales and corrupt formatting */
  $escapedDateFormat = preg_replace('/[^MmDdYy\/\.\-]/', '', $dateFormat);
  $value = null;

app/code/Magento/Catalog/Test/Mftf/ActionGroup/AdminAddCustomizableOptionToSimpleProductActionGroup.xml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+ <actionGroup name="AdminAddCustomizableOptionToSimpleProductActionGroup">
+ <annotations>
+ <description value="Add a custom option of type date to simple product." />
+ </annotations>
+
+ <click selector="{{AdminProductCustomizableOptionSection.customizableOptionsToggle}}" stepKey="expandCustomOptions"/>
+ <scrollTo selector="{{AdminProductCustomizableOptionSection.customizableOptionsToggle}}" stepKey="scrollToCustomizableOptions"/>
+
+ <click selector="{{AdminProductCustomizableOptionSection.addButtonOption}}" stepKey="clickAddButtonOption"/>
+ <waitForElementVisible selector="{{AdminProductCustomizableOptionSection.customOptionXTitle}}" stepKey="waitForOptions"/>
+ <fillField selector="{{AdminProductCustomizableOptionSection.customOptionXTitle}}" userInput="custom option 1" stepKey="fillOptionTitle"/>
+
+ <click selector="{{AdminProductCustomizableOptionSection.customOptionSelectType}}" stepKey="selectType"/>
+ <click selector="{{AdminProductCustomizableOptionSection.customOptionSelectField}}" stepKey="selectField"/>
+ <click selector="{{AdminProductCustomizableOptionSection.uncheckRequired}}" stepKey="uncheckRequired"/>
+ <fillField selector="{{AdminProductCustomizableOptionSection.customizableOptionPrice}}" userInput="0" stepKey="fillPrice"/>
+
+ <waitForElementVisible selector="{{AdminProductCustomizableOptionSection.save}}" stepKey="waitForSaveButton"/>
+ <click selector="{{AdminProductCustomizableOptionSection.save}}" stepKey="clickSaveButton"/>
+ <waitForPageLoad stepKey="waitForAttributeToSave"/>
+ <seeElement selector="{{AdminProductCustomizableOptionSection.successMessage}}" stepKey="seeSuccessMessage"/>
+ </actionGroup>
+</actionGroups>

app/code/Magento/Catalog/Test/Mftf/ActionGroup/AdminConfigExpandDateAndTimeTabActionGroup.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+ <actionGroup name="AdminConfigExpandDateAndTimeTabActionGroup">
+ <annotations>
+ <description>Expand date and time options tab.</description>
+ </annotations>
+
+ <scrollTo selector="{{CatalogSection.dateAndTimeCustomOptions}}" stepKey="scrollDownToDateAndTime"/>
+ <conditionalClick selector="{{CatalogSection.dateAndTimeCustomOptions}}" dependentSelector="{{CatalogSection.CheckIfTabExpandForDateAndTimeCustomOptions}}" visible="true" stepKey="expandDateAndTimeCustomOptionsTab"/>
+ </actionGroup>
+</actionGroups>

app/code/Magento/Catalog/Test/Mftf/ActionGroup/AssertProductDateFormatInStorefrontActionGroup.xml

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+ <actionGroup name="AssertProductDateFormatInStorefrontActionGroup">
+ <annotations>
+ <description value="Go to product page on the storefront and assert sku and custom option date format"/>
+ </annotations>
+
+ <arguments>
+ <argument name="product"/>
+ </arguments>
+
+ <!-- Go to storefront product page, assert product sku and date custom option -->
+ <amOnPage url="{{product.urlKey}}.html" stepKey="navigateToProductPage"/>
+ <waitForPageLoad stepKey="waitForPageLoad"/>
+
+ <see userInput="{{product.sku}}" selector="{{StorefrontProductInfoMainSection.productSku}}" stepKey="assertProductSku"/>
+
+ <click selector="{{StorefrontProductInfoMainSection.productCalenderButton}}" stepKey="clickCalenderButton"/>
+ <click selector="{{StorefrontProductInfoMainSection.productCalenderGoToday}}" stepKey="clickCalenderGoTodayButton"/>
+
+ <generateDate date="Now" format="j/n/Y" stepKey="currentDate"/>
+
+ <executeJS function="
+ var xpath = '{{StorefrontProductInfoMainSection.customDateField}}';
+ var result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
+ var element = result.singleNodeValue;
+ return element.value;
+ " stepKey="dateValue"/>
+
+ <assertEquals stepKey="assertDateFormat">
+ <actualResult type="variable">dateValue</actualResult>
+ <expectedResult type="variable">currentDate</expectedResult>
+ </assertEquals>
+
+ </actionGroup>
+</actionGroups>

app/code/Magento/Catalog/Test/Mftf/ActionGroup/SelectDropdownDateAndTimeActionGroup.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+ <actionGroup name="SelectDropdownDateAndTimeActionGroup">
+ <annotations>
+ <description>Select options for Use JavaScript Calendar and Date Fields Order dropdown</description>
+ </annotations>
+
+ <arguments>
+ <argument name="useJsCalender" type="string"/>
+ <argument name="firstFieldOfDateOrder" type="string"/>
+ <argument name="secondFieldOfDateOrder" type="string"/>
+ <argument name="thirdFieldOfDateOrder" type="string" defaultValue="Year"/>
+ </arguments>
+
+ <selectOption selector="{{AdminCustomizeDateAndTimeSection.dateAndTimeJsCalenderStatus}}"
+ userInput="{{useJsCalender}}" stepKey="selectJsCalender" />
+ <selectOption selector="{{AdminCustomizeDateAndTimeSection.dateAndTimeFirstFieldOrder}}"
+ userInput="{{firstFieldOfDateOrder}}" stepKey="selectFirstFieldOrder" />
+ <selectOption selector="{{AdminCustomizeDateAndTimeSection.dateAndTimeSecondFieldOrder}}"
+ userInput="{{secondFieldOfDateOrder}}" stepKey="selectSecondFieldOrder" />
+ <selectOption selector="{{AdminCustomizeDateAndTimeSection.dateAndTimeThirdFieldOrder}}"
+ userInput="{{thirdFieldOfDateOrder}}" stepKey="selectThirdFieldOrder" />
+ </actionGroup>
+</actionGroups>

app/code/Magento/Catalog/Test/Mftf/Section/AdminCustomizeDateAndTimeSection.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
+<sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
+ <section name="AdminCustomizeDateAndTimeSection">
+ <element name="dateAndTimeJsCalenderStatus" type="select" selector="//*[@id='catalog_custom_options_use_calendar']"/>
+ <element name="dateAndTimeFirstFieldOrder" type="select" selector="//*[@id='catalog_custom_options_date_fields_order'][1]"/>
+ <element name="dateAndTimeSecondFieldOrder" type="select" selector="//*[@id='catalog_custom_options_date_fields_order'][2]"/>
+ <element name="dateAndTimeThirdFieldOrder" type="select" selector="//*[@id='catalog_custom_options_date_fields_order'][3]"/>
+ </section>
+</sections>

app/code/Magento/Catalog/Test/Mftf/Section/AdminProductCustomizableOptionSection.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
+<sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
+ <section name="AdminProductCustomizableOptionSection">
+ <element name="customizableOptionsToggle" type="button" selector="//span[text()='Customizable Options']"/>
+ <element name="addButtonOption" type="button" selector="button[data-index='button_add']"/>
+ <element name="customOptionXTitle" type="input" selector="[name='product[options][0][title]']"/>
+ <element name="customOptionSelectType" type="select" selector="[data-index='container_common'] .admin__action-multiselect-text"/>
+ <element name="customOptionSelectField" type="select" selector="//label[contains(text(),'Date')]" />
+ <element name="uncheckRequired" type="checkbox" selector="//span[contains(text(),'Required')]"/>
+ <element name="customizableOptionPrice" type="input" selector=".//*[@name='product[options][0][price]']" />
+ <element name="save" type="button" selector="//*[@id='save-button']" timeout="30"/>
+ <element name="successMessage" type="text" selector=".message.message-success.success"/>
+ </section>
+</sections>

app/code/Magento/Catalog/Test/Mftf/Section/StorefrontProductInfoMainSection.xml

@@ -114,5 +114,8 @@
  <element name="swatchOptionDisabled" type="text" selector=".//*[@class='swatch-option color disabled']"/>
  <element name="addToCartEnabled" type="button" selector="#product-addtocart-button:not([disabled])"/>
  <element name="selectCustomOptionDropDown" type="select" selector="//select[contains(@class,' required product-custom-option admin__control-select')]"/>
+ <element name="productCalenderButton" type="button" selector="//*[@id='product-options-wrapper']/div/div/fieldset/div/button" />
+ <element name="productCalenderGoToday" type="button" selector="//*[@id='ui-datepicker-div']/div[2]/button[1]" />
+ <element name="customDateField" type="text" selector='//*[@class="product-custom-option datetime-picker input-text _has-datepicker"]' />
  </section>
 </sections>

app/code/Magento/Catalog/Test/Mftf/Test/AdminJsCalenderDateFormatTest.xml

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
+<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
+ <test name="AdminJsCalenderDateFormatTest">
+ <annotations>
+ <features value="Catalog"/>
+ <stories value="Storefront should reflect the js calender format configured in the backend" />
+ <title value="Check if js calender format configured in backend is reflected on storefront" />
+ <description value="Check if js calender format configured in backend is reflected on storefront" />
+ <severity value="AVERAGE"/>
+ <testCaseId value="AC-12164"/>
+ <group value="Catalog"/>
+ </annotations>
+
+ <before>
+ <createData entity="_defaultCategory" stepKey="createPreReqCategory"/>
+ </before>
+
+ <after>
+ <deleteData createDataKey="createPreReqCategory" stepKey="deletePreReqCategory"/>
+ <actionGroup ref="DeleteProductBySkuActionGroup" stepKey="deleteProduct">
+ <argument name="sku" value="{{_defaultProduct.sku}}"/>
+ </actionGroup>
+ <actionGroup ref="ResetAdminDataGridToDefaultViewActionGroup" stepKey="clearFilter"/>
+
+ <actionGroup ref="AdminOpenStoreConfigCatalogPageActionGroup" stepKey="navigateToConfigurationPage2"/>
+ <actionGroup ref="AdminConfigExpandDateAndTimeTabActionGroup" stepKey="expandDateAndTimeCustomOptionsTab2"/>
+ <actionGroup ref="SelectDropdownDateAndTimeActionGroup" stepKey="RevertDateAndTimeFieldOrder">
+ <argument name="useJsCalender" value="No"/>
+ <argument name="firstFieldOfDateOrder" value="Month"/>
+ <argument name="secondFieldOfDateOrder" value="Day"/>
+ </actionGroup>
+ <actionGroup ref="AdminCheckUseSystemValueActionGroup" stepKey="checkUseSystemValueForDateFieldsOrder">
+ <argument name="rowId" value="row_catalog_custom_options_date_fields_order"/>
+ </actionGroup>
+ <actionGroup ref="AdminSaveConfigActionGroup" stepKey="saveDateAndTimeConfig2"/>
+
+ <actionGroup ref="AdminLogoutActionGroup" stepKey="logoutOfAdmin"/>
+ </after>
+
+ <actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/>
+
+ <!-- Open admin configuration, got to catalog, expand date and time tab -->
+ <actionGroup ref="AdminOpenStoreConfigCatalogPageActionGroup" stepKey="navigateToConfigurationPage"/>
+ <actionGroup ref="AdminConfigExpandDateAndTimeTabActionGroup" stepKey="expandDateAndTimeCustomOptionsTab"/>
+
+ <!-- Customize date and time configuration to D/M/Y -->
+ <actionGroup ref="AdminUncheckUseSystemValueActionGroup" stepKey="uncheckUseSystemValueForDateFieldsOrder">
+ <argument name="rowId" value="row_catalog_custom_options_date_fields_order"/>
+ </actionGroup>
+ <actionGroup ref="SelectDropdownDateAndTimeActionGroup" stepKey="CustomizeDateAndTimeFieldOrder">
+ <argument name="useJsCalender" value="Yes"/>
+ <argument name="firstFieldOfDateOrder" value="Day"/>
+ <argument name="secondFieldOfDateOrder" value="Month"/>
+ </actionGroup>
+ <actionGroup ref="AdminSaveConfigActionGroup" stepKey="saveDateAndTimeConfig"/>
+
+ <!-- Create simple product on storefront -->
+ <actionGroup ref="FillAdminSimpleProductFormActionGroup" stepKey="fillProductFieldsInAdmin">
+ <argument name="category" value="$$createPreReqCategory$$"/>
+ <argument name="simpleProduct" value="_defaultProduct"/>
+ </actionGroup>
+
+ <!-- Add customizable date option -->
+ <actionGroup ref="AdminAddCustomizableOptionToSimpleProductActionGroup" stepKey="AddCustomizableDateOption"/>
+
+ <actionGroup ref="CliIndexerReindexActionGroup" stepKey="runCronIndex">
+ <argument name="indices" value=""/>
+ </actionGroup>
+
+ <!-- Assert date on storefront -->
+ <actionGroup ref="AssertProductDateFormatInStorefrontActionGroup" stepKey="assertDateFormat">
+ <argument name="product" value="_defaultProduct"/>
+ </actionGroup>
+ </test>
+</tests>

app/code/Magento/Config/Test/Mftf/Section/CatalogSection/CatalogSection.xml

@@ -27,5 +27,7 @@
  <element name="productsPerPageOnGridAllowedValues" type="input" selector="//input[@id='catalog_frontend_grid_per_page_values']"/>
  <element name="productsPerPageOnGridDefaultValue" type="input" selector="//input[@id='catalog_frontend_grid_per_page']"/>
  <element name="productsPerPageOnGridDefaultValueUseConfigCheckbox" type="checkbox" selector="//input[@id='catalog_frontend_grid_per_page_inherit']"/>
+ <element name="dateAndTimeCustomOptions" type="select" selector="#catalog_custom_options-head"/>
+ <element name="CheckIfTabExpandForDateAndTimeCustomOptions" type="button" selector="#catalog_custom_options-head:not(.open)"/>
  </section>
 </sections>