MC-35771: Datepicker/calendar control does not use the store locale

Author: tsviklinskyi

app/code/Magento/Customer/Test/Unit/Block/Widget/DobTest.php

@@ -97,6 +97,11 @@ class DobTest extends TestCase
      */
     private $encoder;
 
+    /**
+     * @var ResolverInterface
+     */
+    private $localeResolver;
+
     /**
      * @inheritDoc
      */
@@ -116,14 +121,15 @@ protected function setUp(): void
         $cache->expects($this->any())->method('getFrontend')->willReturn($frontendCache);
 
         $objectManager = new ObjectManager($this);
-        $localeResolver = $this->getMockForAbstractClass(ResolverInterface::class);
-        $localeResolver->expects($this->any())
+        $this->localeResolver = $this->getMockForAbstractClass(ResolverInterface::class);
+        $this->localeResolver->expects($this->any())
             ->method('getLocale')
             ->willReturnCallback(
                 function () {
                     return $this->_locale;
                 }
             );
+        $localeResolver = $this->localeResolver;
         $timezone = $objectManager->getObject(
             Timezone::class,
             ['localeResolver' => $localeResolver, 'dateFormatterFactory' => new DateFormatterFactory()]
@@ -172,7 +178,8 @@ function () use ($timezone, $localeResolver) {
             $this->createMock(Date::class),
             $this->filterFactory,
             [],
-            $this->encoder
+            $this->encoder,
+            $this->localeResolver
         );
     }
 
@@ -612,13 +619,16 @@ public function testGetHtmlExtraParamsWithRequiredOption()
     /**
      * Tests getTranslatedCalendarConfigJson()
      *
+     * @param string $locale
      * @param array $expectedArray
      * @param string $expectedJson
      * @dataProvider getTranslatedCalendarConfigJsonDataProvider
      * @return void
      */
-    public function testGetTranslatedCalendarConfigJson(array $expectedArray, string $expectedJson): void
+    public function testGetTranslatedCalendarConfigJson(string $locale, array $expectedArray, string $expectedJson): void
     {
+        $this->_locale = $locale;
+
         $this->encoder->expects($this->once())
             ->method('encode')
             ->with($expectedArray)
@@ -639,6 +649,7 @@ public function getTranslatedCalendarConfigJsonDataProvider()
     {
         return [
             [
+                'locale' => 'en_US',
                 'expectedArray' => [
                     'closeText' => 'Done',
                     'prevText' => 'Prev',
@@ -653,6 +664,22 @@ public function getTranslatedCalendarConfigJsonDataProvider()
                 ],
                 'expectedJson' => '{"closeText":"Done","prevText":"Prev","nextText":"Next","currentText":"Today","monthNames":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"dayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"dayNamesShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"dayNamesMin":["Su","Mo","Tu","We","Th","Fr","Sa"]}'
             ],
+            [
+                'locale' => 'de_DE',
+                'expectedArray' => [
+                    'closeText' => 'Done',
+                    'prevText' => 'Prev',
+                    'nextText' => 'Next',
+                    'currentText' => 'Today',
+                    'monthNames' => ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
+                        'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
+                    'monthNamesShort' => ['Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sept.', 'Okt.', 'Nov.', 'Dez.'],
+                    'dayNames' => ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+                    'dayNamesShort' => ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+                    'dayNamesMin' => ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+                ],
+                'expectedJson' => '{"closeText":"Done","prevText":"Prev","nextText":"Next","currentText":"Today","monthNames":["Januar","Februar","M\u00e4rz","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],"monthNamesShort":["Jan.","Feb.","M\u00e4rz","Apr.","Mai","Juni","Juli","Aug.","Sept.","Okt.","Nov.","Dez."],"dayNames":["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],"dayNamesShort":["So.","Mo.","Di.","Mi.","Do.","Fr.","Sa."],"dayNamesMin":["So.","Mo.","Di.","Mi.","Do.","Fr.","Sa."]}'
+            ],
         ];
     }
 }

app/code/Magento/Customer/view/frontend/templates/widget/dob.phtml

@@ -4,6 +4,7 @@
  * See COPYING.txt for license details.
  */
 
+/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
 /** @var \Magento\Customer\Block\Widget\Dob $block */
 
 /*
@@ -23,6 +24,7 @@ NOTE: Regarding styles - if we leave it this way, we'll move it to boxes.css. Al
 automatically using block input parameters.
 */
 
+$translatedCalendarConfigJson = $block->getTranslatedCalendarConfigJson();
 $fieldCssClass = 'field date field-' . $block->getHtmlId();
 $fieldCssClass .= $block->isRequired() ? ' required' : '';
 ?>
@@ -46,13 +48,20 @@ $fieldCssClass .= $block->isRequired() ? ' required' : '';
     }
 </script>
 
-<script>
-    require([
-        'jquery',
-        'jquery-ui-modules/datepicker'
-    ], function ( $ ) {
-        $.extend(true, $, {
-            calendarConfig: <?= $block->escapeJs($block->getTranslatedCalendarConfigJson()); ?>
-        });
+<?php $scriptString = <<<script
+
+require([
+    'jquery',
+    'jquery-ui-modules/datepicker'
+], function($){
+
+//<![CDATA[
+    $.extend(true, $, {
+        calendarConfig: {$translatedCalendarConfigJson}
     });
-</script>
+//]]>
+
+});
+script;
+?>
+<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>