From 8e3df545c9a7476f8a3f7942efb836b3c5b909a5 Mon Sep 17 00:00:00 2001 From: Anzhela-Sahakyan Date: Mon, 14 Oct 2024 23:01:34 +0400 Subject: [PATCH 1/8] pushing to work on it later --- src/Body/Fields/Date/Date.js | 69 ++++++++++++++++++++++++++++++++++-- 1 file changed, 67 insertions(+), 2 deletions(-) diff --git a/src/Body/Fields/Date/Date.js b/src/Body/Fields/Date/Date.js index 9c5c2cab..a70028a8 100644 --- a/src/Body/Fields/Date/Date.js +++ b/src/Body/Fields/Date/Date.js @@ -1,13 +1,15 @@ -import React from 'react' +import React, { useEffect, useState } from 'react' import { Input } from 'boomform' import { iphoneCheck } from '../../../Helpers/global' const Date = ({ validation = {}, payment, ...props }) => { const { min, max } = validation + const [selectedDate, setSelectedDate] = useState(null) + if (min || max) { validation = { ...validation, - custom: (value) => { + custom: value => { if (value) { if (min?.value > value) return min?.msg if (max?.value < value) return max?.msg @@ -16,14 +18,77 @@ const Date = ({ validation = {}, payment, ...props }) => { } } } + let date + // const validate = () => { + // if (hiddenDays.length > 0) { + // validation = { + // ...validation, + // custom: () => { + // console.log('custom worked') + + // return customValidationMessage || 'Selected date is not selectable' + // } + // } + // } + // } + useEffect(() => { + date = new Date(selectedDate) + }, [selectedDate]) + + const hiddenDays = Object.keys(validation).filter( + key => key.startsWith('hide') && validation[key]?.msg + ) + + const customValidationMessage = hiddenDays + .map(day => validation[day].msg) + .join(', ') const handleChange = ({ event }) => { + const value = event.target.value + setSelectedDate(value) + // validate() if (iphoneCheck()) { setTimeout(() => { event.target.defaultValue = '' }, 100) } } + const hiddenDaysArray = [] + useEffect(() => { + if (selectedDate) { + const date = new Date(selectedDate) + const currentDay = date.getDay() + + hiddenDaysArray.forEach(({ details }) => { + const hiddenDayValue = details.value + + if (hiddenDayValue === currentDay) { + validation = { + ...validation, + custom: () => { + return ( + customValidationMessage || 'Selected date is not selectable' + ) + } + } + } + }) + } + }, [selectedDate, hiddenDaysArray]) + for (const [key, value] of Object.entries(validation)) { + if (key.startsWith('hide') && typeof value === 'object') { + hiddenDaysArray.push({ day: key.replace('hide', ''), details: value }) + } + } + + if (hiddenDays.length > 0) { + validation = { + ...validation, + custom: () => { + return customValidationMessage || 'Selected date is not selectable' + } + } + } return ( Date: Thu, 17 Oct 2024 17:56:26 +0400 Subject: [PATCH 2/8] PF-323 added validation for disabled custom dates --- src/Body/Fields/Date/Date.js | 85 ++++++++---------------------------- 1 file changed, 17 insertions(+), 68 deletions(-) diff --git a/src/Body/Fields/Date/Date.js b/src/Body/Fields/Date/Date.js index a70028a8..a171e250 100644 --- a/src/Body/Fields/Date/Date.js +++ b/src/Body/Fields/Date/Date.js @@ -1,94 +1,43 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import { Input } from 'boomform' import { iphoneCheck } from '../../../Helpers/global' +import moment from 'moment' const Date = ({ validation = {}, payment, ...props }) => { - const { min, max } = validation - const [selectedDate, setSelectedDate] = useState(null) + const { min, max, hideDays, disableDates, hiddenCustomDays, isCustom } = + validation - if (min || max) { + if (min || max || (hideDays && disableDates)) { validation = { ...validation, - custom: value => { + custom: (value) => { if (value) { + // const dayName = getDayName(value) + const dayName = moment(value).format('dddd') + const customDay = moment(value).format('MMM D, YYYY') if (min?.value > value) return min?.msg if (max?.value < value) return max?.msg + // if (hideDays?.monday && value == '2024-10-21') + // return 'pick nomrallll date' + if (hideDays[dayName] && !isCustom) { + return `${dayName}s are disabled. Please pick another date. ` + } + if (hiddenCustomDays.includes(value) && isCustom) { + return `${customDay} is disabled. Please pick another date.` + } } return false } } } - let date - // const validate = () => { - // if (hiddenDays.length > 0) { - // validation = { - // ...validation, - // custom: () => { - // console.log('custom worked') - - // return customValidationMessage || 'Selected date is not selectable' - // } - // } - // } - // } - useEffect(() => { - date = new Date(selectedDate) - }, [selectedDate]) - - const hiddenDays = Object.keys(validation).filter( - key => key.startsWith('hide') && validation[key]?.msg - ) - - const customValidationMessage = hiddenDays - .map(day => validation[day].msg) - .join(', ') const handleChange = ({ event }) => { - const value = event.target.value - setSelectedDate(value) - // validate() if (iphoneCheck()) { setTimeout(() => { event.target.defaultValue = '' }, 100) } } - const hiddenDaysArray = [] - useEffect(() => { - if (selectedDate) { - const date = new Date(selectedDate) - const currentDay = date.getDay() - - hiddenDaysArray.forEach(({ details }) => { - const hiddenDayValue = details.value - - if (hiddenDayValue === currentDay) { - validation = { - ...validation, - custom: () => { - return ( - customValidationMessage || 'Selected date is not selectable' - ) - } - } - } - }) - } - }, [selectedDate, hiddenDaysArray]) - for (const [key, value] of Object.entries(validation)) { - if (key.startsWith('hide') && typeof value === 'object') { - hiddenDaysArray.push({ day: key.replace('hide', ''), details: value }) - } - } - - if (hiddenDays.length > 0) { - validation = { - ...validation, - custom: () => { - return customValidationMessage || 'Selected date is not selectable' - } - } - } return ( Date: Fri, 18 Oct 2024 11:24:49 +0400 Subject: [PATCH 3/8] removing irrelevant changes --- src/Body/Fields/Time/Time.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Body/Fields/Time/Time.js b/src/Body/Fields/Time/Time.js index 8af86d36..c35bb6d8 100644 --- a/src/Body/Fields/Time/Time.js +++ b/src/Body/Fields/Time/Time.js @@ -17,7 +17,7 @@ const Time = ({ }) => { return ( <> - {getTimeFields(format, placeholders).map(item => { + {getTimeFields(format, placeholders).map((item) => { const { key, placeholder } = item return ( @@ -41,7 +41,7 @@ const Time = ({ Date: Fri, 25 Oct 2024 13:08:26 +0400 Subject: [PATCH 8/8] PF-323 fix: switched from momentjs to dayjs --- package.json | 1 + src/Body/Fields/Date/Date.js | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index b867eb8d..642978ef 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "axios": "^0.25.0", "boomform": "^3.6.7", "classnames": "^2.3.1", + "dayjs": "^1.11.13", "react-google-recaptcha": "^2.1.0", "react-grid-layout": "^1.4.2", "react-quill": "^2.0.0", diff --git a/src/Body/Fields/Date/Date.js b/src/Body/Fields/Date/Date.js index e6e9d81d..7279373e 100644 --- a/src/Body/Fields/Date/Date.js +++ b/src/Body/Fields/Date/Date.js @@ -1,7 +1,7 @@ import React from 'react' import { Input } from 'boomform' import { iphoneCheck } from '../../../Helpers/global' -import moment from 'moment' +import dayjs from 'dayjs' const Date = ({ validation = {}, payment, ...props }) => { const { min, max, hideDays, disableDates, hiddenCustomDays, isCustom } = @@ -11,8 +11,8 @@ const Date = ({ validation = {}, payment, ...props }) => { ...validation, custom: value => { if (value) { - const dayName = moment(value).format('dddd') - const customDay = moment(value).format('MMM D, YYYY') + const dayName = dayjs(value).format('dddd') + const customDay = dayjs(value).format('MMM D, YYYY') if (min?.value > value) return min?.msg if (max?.value < value) return max?.msg if (disableDates && hideDays[dayName] && !isCustom) {