Merge branch 'develop' into release

src/components/activity/ActivityTicketPaymentButton.tsx

@@ -34,11 +34,13 @@ type ActivityTicketPaymentButtonProps = {
   ticketId: string
   ticketPrice: number
   ticketCurrencyId: string
+  isPublished: boolean
 }
 const ActivityTicketPaymentButton: React.VFC<ActivityTicketPaymentButtonProps> = ({
   ticketId,
   ticketPrice,
   ticketCurrencyId,
+  isPublished,
 }) => {
   const { formatMessage } = useIntl()
   const { settings, id: appId } = useApp()
@@ -87,6 +89,7 @@ const ActivityTicketPaymentButton: React.VFC<ActivityTicketPaymentButtonProps> =
           <Button
             colorScheme="primary"
             isFullWidth
+            disabled={!isPublished}
             onClick={() => {
               const resource = resourceCollection.find(notEmpty)
               resource && tracking.addToCart(resource, { direct: true })

src/components/common/PaymentButton.tsx

@@ -42,7 +42,8 @@ const PaymentButton: React.VFC<{
   currencyId?: string
   isSubscription?: boolean
   quantity?: number
-}> = ({ type, target, price, isSubscription, currencyId, quantity }) => {
+  isPublished?: boolean
+}> = ({ type, target, price, isSubscription, currencyId, quantity, isPublished }) => {
   const tracking = useTracking()
   const { isAuthenticated } = useAuth()
   const { formatMessage } = useIntl()
@@ -110,6 +111,7 @@ const PaymentButton: React.VFC<{
           <Button
             colorScheme="primary"
             isFullWidth
+            disabled={!isPublished}
             onClick={() => {
               const resource = resourceCollection.find(notEmpty)
               resource && tracking.addToCart(resource, { direct: true })

src/components/merchandise/MerchandiseBlock.tsx

@@ -286,7 +286,9 @@ const MerchandiseBlock: React.VFC<{
         ) : (
           <StyledButtonBlock>
             <Link to={`/merchandises/${merchandise.id}`}>
-              <StyledButton colorScheme="primary">{formatMessage(commonMessages.ui.purchase)}</StyledButton>
+              <Button colorScheme="primary" color="var(--gray-darker)" disabled={!merchandise.publishedAt}>
+                {formatMessage(commonMessages.ui.purchase)}
+              </Button>
             </Link>
           </StyledButtonBlock>
         )}

src/components/merchandise/MerchandiseCard.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Link, useHistory } from 'react-router-dom'
 import styled from 'styled-components'
 import EmptyCover from '../../images/empty-cover.png'
-import { MerchandiseBriefProps } from '../../types/merchandise'
+import { MerchandiseBasicProps, MerchandiseBriefProps, MerchandiseSpecBasicProps } from '../../types/merchandise'
 import { CustomRatioImage } from '../common/Image'
 
 const StyledTitle = styled.h3`
@@ -15,8 +15,10 @@ const StyledTitle = styled.h3`
 `
 
 const MerchandiseCard: React.VFC<
-  Omit<MerchandiseBriefProps, 'tags' | 'categories' | 'isPhysical'> & {
+  Omit<MerchandiseBasicProps, 'tags' | 'categories' | 'isPhysical'> & {
+    specs: MerchandiseSpecBasicProps[]
     onClick?: () => void
+    publishedAt?: Date | null
   }
 > = ({ id, title, minPrice, maxPrice, images, currencyId, specs, soldAt, onClick }) => {
   const isOnSale = (soldAt?.getTime() || 0) > Date.now()

src/components/merchandise/MerchandiseCollection.tsx

@@ -27,6 +27,7 @@ const MerchandiseCollection: React.FC<{ merchandises: MerchandiseBriefProps[] }>
             currencyId={merchandise.currencyId}
             specs={merchandise.specs}
             images={merchandise.images}
+            publishedAt={merchandise.publishedAt}
             onClick={() => {
               const resource = resourceCollection[idx]
               resource && tracking.click(resource, { position: idx + 1 })

src/components/merchandise/MerchandisePaymentButton.tsx

@@ -114,7 +114,9 @@ const GeneralMerchandisePaymentBlock: React.VFC<{
           <Button
             className="d-flex align-items-center mr-2"
             variant="outline"
-            isDisabled={merchandise.isLimited && (quantity === 0 || quantity > remainQuantity)}
+            isDisabled={
+              !merchandise.publishedAt || (merchandise.isLimited && (quantity === 0 || quantity > remainQuantity))
+            }
             onClick={() => {
               const resource = resourceCollection.find(notEmpty)
               if (quantity) {
@@ -132,7 +134,9 @@ const GeneralMerchandisePaymentBlock: React.VFC<{
         <Button
           colorScheme="primary"
           isFullWidth
-          isDisabled={merchandise.isLimited && (quantity === 0 || quantity > remainQuantity)}
+          isDisabled={
+            !merchandise.publishedAt || (merchandise.isLimited && (quantity === 0 || quantity > remainQuantity))
+          }
           onClick={() => {
             const resource = resourceCollection.find(notEmpty)
             if (quantity) {
@@ -180,7 +184,7 @@ const CustomizedMerchandisePaymentBlock: React.VFC<{
         <Button
           colorScheme="primary"
           isFullWidth
-          isDisabled={(isAuthenticated && isLoading) || quantity <= 0}
+          isDisabled={!merchandise.publishedAt || (isAuthenticated && isLoading) || quantity <= 0}
           onClick={() => {
             if (isModalDisable) {
               toast({

src/hooks/blog.ts

@@ -321,6 +321,7 @@ export const usePost = (search: string) => {
             is_customized
             is_countdown_timer_visible
             currency_id
+            published_at
             merchandise_tags(order_by: { position: asc }) {
               tag_name
             }
@@ -416,6 +417,7 @@ export const usePost = (search: string) => {
             ),
           ),
           currencyId: v.merchandise.currency_id,
+          publishedAt: v.merchandise.published_at ? new Date(v.merchandise.published_at) : null,
           abstract: v.merchandise.abstract || '',
           description: v.merchandise.description || '',
           startedAt: v.merchandise.started_at ? new Date(v.merchandise.started_at) : null,

src/hooks/merchandise.ts

@@ -27,6 +27,7 @@ export const useMerchandiseCollection = (options?: {
           sold_at
           is_physical
           currency_id
+          published_at
           merchandise_tags(order_by: { position: asc }) {
             tag_name
           }
@@ -96,6 +97,7 @@ export const useMerchandiseCollection = (options?: {
               ),
             ),
             currencyId: merchandise.currency_id,
+            publishedAt: merchandise.published_at ? new Date(merchandise.published_at) : null,
             tags: merchandise.merchandise_tags.map(v => v.tag_name),
             categories: merchandise.merchandise_categories.map(v => ({
               id: v.category.id,
@@ -184,6 +186,7 @@ export const useMerchandise = (merchandiseId: string) => {
           is_customized
           is_countdown_timer_visible
           currency_id
+          published_at
           merchandise_tags(order_by: { position: asc }) {
             tag_name
           }
@@ -251,7 +254,7 @@ export const useMerchandise = (merchandiseId: string) => {
           isPhysical: data.merchandise_by_pk.is_physical,
           isCustomized: data.merchandise_by_pk.is_customized,
           isCountdownTimerVisible: data.merchandise_by_pk.is_countdown_timer_visible,
-
+          publishedAt: data.merchandise_by_pk.published_at ? new Date(data.merchandise_by_pk.published_at) : null,
           images: data.merchandise_by_pk.merchandise_imgs.map(image => ({
             id: image.id,
             url: image.url,

src/hooks/program.ts

@@ -367,7 +367,7 @@ export const useProgram = (programId: string) => {
       coverThumbnailUrl: data?.program_by_pk?.cover_thumbnail_url || null,
       title: data?.program_by_pk?.title || '',
       abstract: data?.program_by_pk?.abstract || '',
-      publishedAt: new Date(data?.program_by_pk?.published_at),
+      publishedAt: data?.program_by_pk?.published_at ? new Date(data?.program_by_pk?.published_at) : null,
       isSoldOut: data?.program_by_pk?.is_sold_out || false,
       description: data?.program_by_pk?.description || '',
       coverVideoUrl: data?.program_by_pk?.cover_video_url || null,

src/pages/ActivityPage/ActivityPage.tsx

@@ -178,6 +178,7 @@ const ActivityPage: React.VFC = () => {
                                 ticketId={ticket.id}
                                 ticketPrice={ticket.price}
                                 ticketCurrencyId={ticket.currencyId}
+                                isPublished={Boolean(activity.publishedAt)}
                               />
                             ) : (
                               <Button

src/pages/ActivityPage/ActivityPageHelmet.tsx

@@ -91,6 +91,7 @@ const ActivityPageHelmet: React.VFC<{ activity: ActivityPageHelmetProps }> = ({
       title={activity.title}
       description={getBraftContent(activity.description || app.settings['description'])}
       keywords={activity.tags}
+      isNoIndex={!activity.publishedAt}
       jsonLd={[
         {
           '@context': 'https://schema.org',

src/pages/AppPage/index.tsx

@@ -182,6 +182,7 @@ const AppPage: React.VFC<{ renderFallback?: (path: string) => React.ReactElement
 
       refreshTokenAsync()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location.pathname])
 
   if (loadingAppPage) {
@@ -200,6 +201,7 @@ const AppPage: React.VFC<{ renderFallback?: (path: string) => React.ReactElement
             title={appPage?.metaTag?.seo?.pageTitle || appPage?.title || ''}
             description={appPage?.metaTag?.seo?.description || appPage.defaultSettings.description || ''}
             keywords={appPage?.metaTag?.seo?.keywords?.split(',')}
+            isNoIndex={!appPage.publishedAt}
             openGraph={[
               { property: 'fb:app_id', content: settings['auth.facebook_app_id'] },
               { property: 'og:site_name', content: settings['name'] },
@@ -287,6 +289,7 @@ export const usePage = (path: string) => {
           options
           craft_data
           meta_tag
+          published_at
           app_page_sections(order_by: { position: asc }) {
             id
             options
@@ -330,6 +333,7 @@ export const usePage = (path: string) => {
     craftData: { [key: string]: any } | null
     options: { [key: string]: string } | null
     metaTag: MetaTag | null
+    publishedAt: Date | null
     appPageSections: AppPageSectionProps[]
     defaultSettings: { img: string; description: string }
   } | null = data?.app_page[0]
@@ -340,6 +344,7 @@ export const usePage = (path: string) => {
         craftData: data.app_page[0].craft_data,
         options: data.app_page[0].options || null,
         metaTag: data.app_page[0].meta_tag || null,
+        publishedAt: data.app_page[0].published_at || null,
         appPageSections: data.app_page[0]
           ? data.app_page[0].app_page_sections.map(v => ({
               id: v.id,

src/pages/BlogPostPage/BlogPostPageHelmet.tsx

@@ -15,6 +15,7 @@ const BlogPostPageHelmet: React.VFC<{ post: Post }> = ({ post }) => {
       title={post.metaTag?.seo?.pageTitle || post.title}
       description={post.metaTag?.seo?.description || post.description || post.abstract || ''}
       keywords={post.metaTag?.seo?.keywords?.split(',') || post.tags}
+      isNoIndex={!post.publishedAt}
       jsonLd={[
         {
           '@context': 'https://schema.org',

src/pages/MerchandisePage.tsx

@@ -47,7 +47,7 @@ const MerchandisePage: React.VFC = () => {
     <DefaultLayout white>
       {resourceCollection[0] && <Tracking.Detail resource={resourceCollection[0]} />}
       {/* // TODO: need to extend page helmet */}
-      {!loadingApp && <PageHelmet title={merchandise?.title} />}
+      {!loadingApp && <PageHelmet title={merchandise?.title} isNoIndex={!merchandise?.publishedAt} />}
       <StyledContainer className="container">
         <div className="my-4">{merchandise && <MerchandiseBlock merchandise={merchandise} withPaymentButton />}</div>
 

src/pages/ProgramPage/ProgramPageHelmet.tsx

@@ -27,6 +27,7 @@ const ProgramPageHelmet: React.VFC<{ program: Program } & Pick<React.ComponentPr
         description={program.metaTag?.seo?.description || program.description || ''}
         keywords={program.metaTag?.seo?.keywords?.split(',') || program.tags}
         onLoaded={onLoaded}
+        isNoIndex={program.isPrivate || !program.publishedAt}
         jsonLd={[
           {
             '@context': 'https://schema.org',

src/pages/ProgramPage/ProgramPlanCard/ProgramPlanPaymentButton.tsx

@@ -36,8 +36,8 @@ const ProgramPlanPaymentButton: React.VFC<{
   programPlan: ProgramPlan & {
     isSubscription: boolean
     groupBuyingPeople: number
-  }
-}> = ({ programPlan }) => {
+  } & { isPublished?: boolean }
+}> = ({ programPlan }, isPublished) => {
   const tracking = useTracking()
   const { formatMessage } = useIntl()
   const { addCartProduct, isProductInCart } = useContext(CartContext)
@@ -91,6 +91,7 @@ const ProgramPlanPaymentButton: React.VFC<{
             <Button
               colorScheme="primary"
               isFullWidth
+              disabled={!isPublished}
               onClick={() => {
                 const resource = resourceCollection.find(notEmpty)
                 resource && tracking.addToCart(resource, { direct: true })

src/pages/ProgramPage/ProgramPlanCard/index.tsx

@@ -67,7 +67,8 @@ const ProgramPlanCard: React.VFC<{
   }
   enrollmentCount?: number
   isProgramSoldOut?: boolean
-}> = ({ programId, programPlan, enrollmentCount, isProgramSoldOut }) => {
+  isPublished?: boolean
+}> = ({ programId, programPlan, enrollmentCount, isProgramSoldOut, isPublished }) => {
   const { formatMessage } = useIntl()
   const history = useHistory()
   const { isAuthenticated } = useAuth()
@@ -201,7 +202,8 @@ const ProgramPlanCard: React.VFC<{
             price={isOnSale && salePrice ? salePrice : listPrice}
             currencyId={currency.id}
             isSubscription={isSubscription}
-          ></PaymentButton>
+            isPublished={isPublished}
+          />
         </>
       )}
     </StyledAdminCard>

src/pages/ProgramPage/index.tsx

@@ -282,6 +282,7 @@ const ProgramPageContent: React.VFC = () => {
                                 programPlansEnrollmentsAggregateList.find(v => v.id === programPlan.id)?.enrollmentCount
                               }
                               isProgramSoldOut={Boolean(program.isSoldOut)}
+                              isPublished={Boolean(program.publishedAt)}
                             />
                           </div>
                         ))}

src/pages/ProjectPage/FundingPage.tsx

@@ -95,6 +95,7 @@ const FundingPage: React.VFC<ProjectProps> = ({
   isCountdownTimerVisible,
   totalSales,
   enrollmentCount,
+  publishedAt,
 }) => {
   const { formatMessage } = useIntl()
   const isDesktop = useMediaQuery({ minWidth: BREAK_POINT })
@@ -148,7 +149,13 @@ const FundingPage: React.VFC<ProjectProps> = ({
                   {formatMessage(commonMessages.button.cutoff)}
                 </Button>
               ) : (
-                <Button type="primary" size="large" block onClick={() => handleTabsChange('plans')}>
+                <Button
+                  type="primary"
+                  size="large"
+                  block
+                  onClick={() => handleTabsChange('plans')}
+                  disabled={!publishedAt}
+                >
                   {formatMessage(commonMessages.button.pledge)}
                 </Button>
               )}

src/pages/ProjectPage/ProjectPageHelmet.tsx

@@ -25,6 +25,7 @@ const ProjectPageHelmet: React.VFC<{ project: ProjectProps }> = ({ project }) =>
       title={project.metaTag?.seo?.pageTitle || project.title}
       description={project.metaTag?.seo?.description || project.abstract || app.settings['description']}
       keywords={project.metaTag?.seo?.keywords?.split(',') || []}
+      isNoIndex={!project.publishedAt}
       jsonLd={[
         {
           '@context': 'https://schema.org',

src/pages/SearchPage.tsx

@@ -32,7 +32,7 @@ import { hasJsonStructure, notEmpty } from '../helpers'
 import { ReactComponent as SearchIcon } from '../images/search.svg'
 import { Activity } from '../types/activity'
 import { PostPreviewProps } from '../types/blog'
-import { MerchandiseBriefProps } from '../types/merchandise'
+import { MerchandiseBasicProps, MerchandiseSpecBasicProps } from '../types/merchandise'
 import { PodcastProgramBriefProps } from '../types/podcast'
 import {
   PeriodType,
@@ -882,6 +882,7 @@ const useSearchProductCollection = (
           abstract
           sold_at
           currency_id
+          published_at
           member {
             id
             name
@@ -1005,7 +1006,9 @@ const useSearchProductCollection = (
       name: string
       abstract: string | null
     }[]
-    merchandises: (MerchandiseBriefProps & { shopkeeper: string; abstract: string })[]
+    merchandises: (MerchandiseBasicProps & {
+      specs: MerchandiseSpecBasicProps[]
+    } & { shopkeeper: string; abstract: string })[]
     fundingProjects: (ProjectIntroProps & { authorSearchString: string })[]
     preOrderProjects: (ProjectIntroProps & { authorSearchString: string })[]
     portfolioProjects: (ProjectIntroProps & { authorSearchString: string })[]
@@ -1271,6 +1274,7 @@ const useSearchProductCollection = (
           ),
         ),
         currencyId: merchandise.currency_id,
+        publishedAt: merchandise.published_at ? new Date(merchandise.published_at) : null,
         tags: merchandise.merchandise_tags.map(v => v.tag_name),
         categories: merchandise.merchandise_categories.map(v => ({
           id: v.category.id,

src/types/merchandise.ts

@@ -16,6 +16,7 @@ export type MerchandiseBasicProps = {
     url: string
     isCover: boolean
   }[]
+  publishedAt: Date | null
 }
 
 export type MerchandiseBriefProps = MerchandiseBasicProps & {