Feat: Course Coming Soon Implemented

assets/react/v3/entries/course-builder/components/course-basic/ScheduleOptions.tsx

@@ -32,6 +32,7 @@ const ScheduleOptions = () => {
   const isScheduleEnabled = useWatch({ name: 'isScheduleEnabled' }) ?? false;
   const showForm = useWatch({ name: 'showScheduleForm' }) ?? false;
   const isComingSoonEnabled = useWatch({ name: 'enable_coming_soon' }) ?? false;
+  const comingSoonThumbnail = useWatch({ name: 'coming_soon_thumbnail' });
 
   const [previousPostDate, setPreviousPostDate] = useState(
     scheduleDate && scheduleTime && isValid(new Date(`${scheduleDate} ${scheduleTime}`))
@@ -218,7 +219,9 @@ const ScheduleOptions = () => {
       {isScheduleEnabled && !showForm && (
         <div css={styles.scheduleInfoWrapper}>
           <div css={styles.scheduledFor}>
-            <div css={styles.scheduleLabel}>{__('Scheduled for', 'tutor')}</div>
+            <div css={styles.scheduleLabel}>
+              {!isComingSoonEnabled ? __('Scheduled for', 'tutor') : __('Scheduled with coming soon', 'tutor')}
+            </div>
             <div css={styles.scheduleInfoButtons}>
               <button type="button" css={styleUtils.actionButton} onClick={handleDelete}>
                 <SVGIcon name="delete" width={24} height={24} />
@@ -241,7 +244,9 @@ const ScheduleOptions = () => {
               {sprintf(__('%s at %s', 'tutor'), format(parseISO(scheduleDate), DateFormats.monthDayYear), scheduleTime)}
             </div>
 
-            <ImageInput value={form.watch('coming_soon_thumbnail')} uploadHandler={noop} clearHandler={noop} disabled />
+            <Show when={comingSoonThumbnail?.url}>
+              <ImageInput value={comingSoonThumbnail} uploadHandler={noop} clearHandler={noop} disabled />
+            </Show>
           </Show>
         </div>
       )}

assets/react/v3/entries/course-builder/services/course.ts

@@ -212,9 +212,9 @@ export interface CoursePayload {
   bp_attached_group_ids: string[];
 
   // when course is scheduled
-  enable_coming_soon?: boolean;
+  enable_coming_soon?: '1' | '0';
   coming_soon_thumbnail_id?: number;
-  enable_curriculum_preview?: boolean;
+  enable_curriculum_preview?: '1' | '0';
   'course_settings[course_enrollment_period]'?: string;
   'course_settings[enrollment_starts_at]'?: string; // yyyy-mm-dd hh:mm:ss (24H)
   'course_settings[enrollment_ends_at]'?: string; // yyyy-mm-dd hh:mm:ss (24H)
@@ -359,10 +359,10 @@ export interface CourseDetailsResponse {
   editor_used: Editor;
   editors: Editor[];
   total_enrolled_student: number;
-  enable_coming_soon: boolean;
+  enable_coming_soon: '1' | '0';
   coming_soon_thumbnail: string;
   coming_soon_thumbnail_id: number;
-  enable_curriculum_preview: boolean;
+  enable_curriculum_preview: '1' | '0';
 }
 
 export type MeetingType = 'zoom' | 'google_meet';
@@ -532,10 +532,10 @@ export const convertCourseDataToPayload = (data: CourseFormData, slot_fields: st
       : {}),
     tutor_attachments: (data.course_attachments || []).map((item) => item.id) ?? [],
     bp_attached_group_ids: data.bp_attached_group_ids,
-    ...(isBefore(new Date(), new Date(data.post_date)) && {
-      enable_coming_soon: data.enable_coming_soon,
-      coming_soon_thumbnail_id: data.coming_soon_thumbnail?.id ?? -1,
-      enable_curriculum_preview: data.enable_curriculum_preview,
+    ...(isBefore(new Date(), new Date(`${data.schedule_date} ${data.schedule_time}`)) && {
+      enable_coming_soon: data.enable_coming_soon ? '1' : '0',
+      coming_soon_thumbnail_id: data.coming_soon_thumbnail?.id ?? 0,
+      enable_curriculum_preview: data.enable_curriculum_preview ? '1' : '0',
     }),
     'course_settings[course_enrollment_period]': data.course_enrollment_period ? 'yes' : 'no',
     'course_settings[enrollment_starts_at]': isValid(
@@ -670,13 +670,13 @@ export const convertCourseDataToFormData = (
     schedule_time: !isBefore(parseISO(courseDetails.post_date), new Date())
       ? format(parseISO(courseDetails.post_date), DateFormats.hoursMinutes)
       : '',
-    enable_coming_soon: courseDetails.enable_coming_soon ?? false,
+    enable_coming_soon: courseDetails.enable_coming_soon === '1',
     coming_soon_thumbnail: {
       id: Number(courseDetails.coming_soon_thumbnail_id),
       title: '',
       url: courseDetails.coming_soon_thumbnail,
     },
-    enable_curriculum_preview: courseDetails.enable_curriculum_preview ?? false,
+    enable_curriculum_preview: courseDetails.enable_curriculum_preview === '1',
     course_enrollment_period: courseDetails.course_settings.course_enrollment_period === 'yes',
     enrollment_starts_date: isValid(new Date(courseDetails.course_settings.enrollment_starts_at))
       ? format(convertGMTtoLocalDate(courseDetails.course_settings.enrollment_starts_at), DateFormats.yearMonthDay)

assets/scss/front/__archive.scss

@@ -1468,4 +1468,26 @@ table.course-single-gradebooks a {
 */
 .list-item-button .edd-has-js.edd-no-js {
 	display: none !important;
+}
+
+/**
+* Coming soon block
+*/
+.tutor-coming-soon-btn{
+	background-color: rgba(244, 249, 253, 1);
+	color: rgba(91, 97, 111, 1);
+	font-size: 13px;
+	line-height: 16px;
+	border-radius: 4px;
+	padding: 4px 25px 4px 20px;
+}
+
+.tutor-add-to-cart-coming-soon-btn{
+	background-color: rgba(244, 249, 253, 1);
+	color: rgba(91, 97, 111, 1);
+	font-size: 13px;
+	line-height: 16px;
+	border-radius: 4px;
+	padding: 6px 8px 6px 8px;
+	max-width: 148px;
 }

assets/scss/front/_single_course.scss

@@ -173,4 +173,17 @@ table.course-single-gradebooks .datetime {
         min-width: 110px;
         justify-content: center;
     }
+}
+
+
+/**
+* Coming soon block
+*/
+.tutor-coming-soon-btn{
+	background-color: rgba(244, 249, 253, 1);
+	color: rgba(91, 97, 111, 1);
+	font-size: 13px;
+	line-height: 16px;
+	border-radius: 4px;
+	padding: 4px 25px 4px 20px;
 }