Improve birthdate picker

packages/lake/__stories__/DatePicker.stories.tsx

@@ -229,7 +229,6 @@ export const Inline = () => {
                   onValueChange={onChange}
                   value={value}
                   error={error}
-                  order="DMY"
                 />
               </View>
             )}

packages/shared-business/src/components/InlineDatePicker.tsx

@@ -8,8 +8,9 @@ import { breakpoints, colors } from "@swan-io/lake/src/constants/design";
 import { useResponsive } from "@swan-io/lake/src/hooks/useResponsive";
 import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
 import { StyleSheet, View } from "react-native";
+import { match } from "ts-pattern";
 import { ExtractedDate } from "../utils/date";
-import { t } from "../utils/i18n";
+import { getCountry, t } from "../utils/i18n";
 
 const months = [
   { value: "01", name: t("datePicker.month.january") },
@@ -28,7 +29,7 @@ const months = [
 
 const styles = StyleSheet.create({
   dayMobile: {
-    maxWidth: 60,
+    maxWidth: 70,
     flexGrow: 0,
   },
   day: {
@@ -54,16 +55,21 @@ export type InlineDatePickerProps = {
   onValueChange: (value: ExtractedDate) => void;
   error?: string;
   onBlur?: () => void;
-  order: "DMY" | "MDY" | "YMD";
 };
 
+// https://en.wikipedia.org/wiki/List_of_date_formats_by_country
+const order = match(getCountry().cca2)
+  .returnType<"DMY" | "MDY" | "YMD">()
+  .with("US", () => "MDY")
+  .with("CN", "JP", "KR", "KP", "TW", "HU", "MN", "LT", "BT", () => "YMD")
+  .otherwise(() => "DMY");
+
 export const InlineDatePicker = ({
   value = { day: "", month: "", year: "" },
   label,
   onValueChange,
   error,
   onBlur,
-  order,
 }: InlineDatePickerProps) => {
   const { desktop } = useResponsive(breakpoints.small);
 

packages/shared-business/src/utils/i18n.ts

@@ -1,4 +1,5 @@
 import { createIntl, createIntlCache } from "@formatjs/intl";
+import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
 import { RifmProps, getRifmProps } from "@swan-io/lake/src/utils/rifm";
 import { BadStatusError } from "@swan-io/request";
 import dayjs from "dayjs";
@@ -17,6 +18,7 @@ import utc from "dayjs/plugin/utc";
 import { ReactElement, ReactNode, cloneElement, isValidElement } from "react";
 import { P, match } from "ts-pattern";
 import type { DateFormat } from "../components/DatePicker";
+import { Country, countries, france } from "../constants/countries";
 import translationDE from "../locales/de.json";
 import translationEN from "../locales/en.json";
 import translationES from "../locales/es.json";
@@ -179,3 +181,21 @@ export const translateError = (error: unknown) => {
 
   return t(isTranslationKey(key) ? key : "error.generic");
 };
+
+export const getCountry = (): Country => {
+  const navigatorCountries = navigator.languages
+    .map(language => language.split("-")[1])
+    .filter(isNotNullish);
+
+  for (let index = 0; index < navigatorCountries.length; index++) {
+    const navigatorCountry = navigatorCountries[index];
+    const country = countries.find(({ cca2 }) => cca2 === navigatorCountry);
+
+    if (isNotNullish(country)) {
+      return country;
+    }
+  }
+
+  // fallback to france when no valid country found in navigator locales
+  return france;
+};