refactor: make new copy localizable (#17207)

* refactor: make this localizable

base on https://github.com/calcom/cal.com/pull/17198 making the new copy localizable

* Update common.json

* Update common.json

* Update common.json

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>

apps/web/public/static/locales/en/common.json

@@ -1797,6 +1797,7 @@
   "wrong_code": "Wrong verification code",
   "not_verified": "Not yet verified",
   "no_availability_in_month": "No availability in {{month}}",
+  "view_previous_month": "View previous month",
   "view_next_month": "View next month",
   "send_code": "Send code",
   "number_verified": "Number Verified",

packages/features/calendars/DatePicker.tsx

@@ -310,7 +310,7 @@ const DatePicker = ({
     scrollToTimeSlots?: () => void;
   }) => {
   const browsingDate = passThroughProps.browsingDate || dayjs().startOf("month");
-  const { i18n } = useLocale();
+  const { i18n, t } = useLocale();
   const bookingData = useBookerStore((state) => state.bookingData);
   const isBookingInPast = bookingData ? new Date(bookingData.endTime) < new Date() : false;
 
@@ -358,7 +358,7 @@ const DatePicker = ({
               color="minimal"
               variant="icon"
               StartIcon="chevron-left"
-              aria-label="Previous Month"
+              aria-label={t("view_previous_month")}
             />
             <Button
               className={classNames(
@@ -370,7 +370,7 @@ const DatePicker = ({
               color="minimal"
               variant="icon"
               StartIcon="chevron-right"
-              aria-label="Next Month"
+              aria-label={t("view_next_month")}
             />
           </div>
         </div>