@aslaluroba/help-center-react 3.2.10 → 3.2.11

package/src/ui/review-dialog/index.tsx

@@ -1,9 +1,13 @@
 import { ReviewProps } from '@/lib/types'
+import { cn } from '@/lib/utils'
 import { Rating } from '@/ui/review-dialog/rating'
 import { useLocalTranslation } from '../../useLocalTranslation'
 import { useState } from 'react';
 import SolarCloseCircleLineDuotone from '~icons/solar/close-circle-line-duotone'
 import { Button } from '@/components';
+import PoweredBy from '../powered-by';
+
+const COMMENT_MAX_LENGTH = 500;
 
 interface ReviewDialogProps {
     handleSubmit: ({ rating }: ReviewProps) => void;
@@ -14,25 +18,31 @@ interface ReviewDialogProps {
 const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
     const { t } = useLocalTranslation()
     const [rating, setRating] = useState<number>(0)
+    const [comment, setComment] = useState<string>('');
     const [error, setError] = useState<{ comment?: string; rating?: string }>({})
 
-
+    const hasRating = rating >= 1 && rating <= 5;
     const isRatingValid = rating >= 1 && rating <= 5
 
     const validateAndSubmit = () => {
         const newError: typeof error = {}
+        const trimmedComment = comment.trim()
 
         if (!isRatingValid) {
             newError.rating = t('homeSdk.ReviewDialog.rating_error') || 'Rating must be between 1 and 5.'
         }
 
+        if (trimmedComment.length > COMMENT_MAX_LENGTH) {
+            newError.comment = t('homeSdk.ReviewDialog.comment_error') || 'The field Comment must be a string with a maximum length of 500.'
+        }
+
         if (Object.keys(newError).length > 0) {
             setError(newError)
             return
         }
 
         setError({})
-        props.handleSubmit({ rating })
+        props.handleSubmit({ rating, comment: trimmedComment })
     }
 
     const handleRatingChange = (val: number) => {
@@ -42,53 +52,95 @@ const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
         }
     }
 
+    const handleCommentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const value = e.target.value
+        setComment(value)
+        if (error.comment && value.length <= COMMENT_MAX_LENGTH) {
+            setError((prev) => ({ ...prev, comment: undefined }))
+        }
+    }
+
     return (
         <section className="babylai:absolute babylai:inset-0 babylai:z-50 babylai:flex babylai:items-end babylai:rounded-3xl babylai:overflow-hidden">
             <div className='babylai:absolute babylai:inset-0 babylai:bg-black/60' onClick={props.onClose}></div>
-            <div className='babylai:flex babylai:flex-col babylai:bg-card babylai:rounded-2xl babylai:p-6 babylai:pb-5 babylai:w-full babylai:z-50 babylai:shadow-lg'>
-                <button className="babylai:border-0 babylai:p-0 babylai:flex babylai:bg-transparent babylai:cursor-pointer babylai:mb-6 babylai:ms-auto babylai:text-card-foreground"
-                    type='button'
-                    onClick={props.onClose}
-                >
-                    <SolarCloseCircleLineDuotone className="babylai:w-6 babylai:h-6" />
-                </button>
-                
-                <section className='babylai:flex babylai:items-center babylai:justify-center babylai:border-b babylai:border-black-white-200 babylai:pb-6 babylai:mb-6'>
-                    <Rating value={rating} onChange={handleRatingChange} size='lg' />
-                </section>
-
-                <h2 className="babylai:text-2xl! babylai:text-center babylai:font-bold! babylai:mb-2! babylai:text-card-foreground">{t('homeSdk.ReviewDialog.title')}</h2>
-
-                <p className="babylai:text-sm babylai:text-center babylai:text-muted-foreground babylai:mb-4">
-                    {t('homeSdk.ReviewDialog.description')}
-                </p>
-
-                <footer className="babylai:flex babylai:justify-between babylai:gap-3 babylai:mt-6">
-                    <Button
+            <div className='babylai:flex babylai:flex-col babylai:bg-card babylai:rounded-2xl babylai:w-full babylai:z-50 babylai:shadow-lg'>
+                <div className='babylai:flex babylai:flex-col babylai:p-6 babylai:pb-5 babylai:w-full'>
+                    <button className="babylai:border-0 babylai:p-0 babylai:flex babylai:bg-transparent babylai:cursor-pointer babylai:mb-6 babylai:ms-auto babylai:text-card-foreground"
+                        type='button'
                         onClick={props.onClose}
-                        variant='secondary'
-                        disabled={props.isSubmitting}
                     >
-                        {t('homeSdk.ReviewDialog.skip_button')}
-                    </Button>
-                    <Button
-                        onClick={validateAndSubmit}
-                        variant='default'
-                        disabled={props.isSubmitting}
-                    >
-                        {props.isSubmitting ? (
-                            <span className="babylai:inline-flex babylai:items-center babylai:gap-2">
-                                <span
-                                    className="babylai:inline-block babylai:animate-spin babylai:rounded-full babylai:h-4 babylai:w-4 babylai:border-2 babylai:border-white babylai:border-t-transparent babylai:box-border"
-                                    aria-hidden
+                        <SolarCloseCircleLineDuotone className="babylai:w-7 babylai:h-7" />
+                    </button>
+
+                    <section className='babylai:flex babylai:items-center babylai:justify-center babylai:border-b babylai:border-black-white-200 babylai:pb-6 babylai:mb-6'>
+                        <Rating value={rating} onChange={handleRatingChange} size='lg' />
+                    </section>
+
+                    <h2 className="babylai:text-2xl! babylai:text-center babylai:font-bold! babylai:mb-2! babylai:text-card-foreground">{t('homeSdk.ReviewDialog.title')}</h2>
+
+                    <p className="babylai:text-xs babylai:text-center babylai:text-muted-foreground babylai:mb-4 babylai:leading-snug">
+                        {t('homeSdk.ReviewDialog.description')}
+                    </p>
+
+                    {hasRating && (
+                        <div className='babylai:flex babylai:flex-col babylai:gap-6 babylai:mt-6'>
+                            <p className="babylai:text-sm babylai:text-card-foreground babylai:leading-snug">{t('homeSdk.InChatReview.follow_up')}</p>
+
+                            <div className='babylai:flex babylai:flex-col babylai:gap-2'>
+                                <textarea
+                                    className={cn(
+                                        "babylai:resize-none babylai:w-full babylai:bg-secondary babylai:border babylai:rounded-xl babylai:text-card-foreground babylai:text-sm babylai:p-3 babylai:resize-vertical babylai:min-h-20 babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed babylai:disabled:bg-secondary",
+                                        error.comment ? "babylai:border-destructive" : "babylai:border-black-white-200"
+                                    )}
+                                    rows={4}
+                                    maxLength={COMMENT_MAX_LENGTH}
+                                    placeholder={t('homeSdk.InChatReview.note_placeholder')}
+                                    value={comment}
+                                    onChange={handleCommentChange}
+                                    aria-label={t('homeSdk.InChatReview.note_placeholder')}
+                                    aria-invalid={!!error.comment}
+                                    aria-describedby={error.comment ? 'review-comment-error' : undefined}
                                 />
-                                {t('homeSdk.ReviewDialog.submit_button')}
-                            </span>
-                        ) : (
-                            t('homeSdk.ReviewDialog.submit_button')
-                        )}
-                    </Button>
-                </footer>
+                                {error.comment && (
+                                    <p id="review-comment-error" className="babylai:text-sm babylai:text-destructive" role="alert">
+                                        {error.comment}
+                                    </p>
+                                )}
+                                <p className="babylai:text-xs babylai:text-muted-foreground">
+                                    {comment.length}/{COMMENT_MAX_LENGTH}
+                                </p>
+                            </div>
+                        </div>
+                    )}
+
+                    <footer className="babylai:flex babylai:justify-between babylai:gap-3 babylai:mt-6">
+                        <Button
+                            onClick={props.onClose}
+                            variant='secondary'
+                            disabled={props.isSubmitting}
+                        >
+                            {t('homeSdk.ReviewDialog.skip_button')}
+                        </Button>
+                        <Button
+                            onClick={validateAndSubmit}
+                            variant='default'
+                            disabled={props.isSubmitting || !hasRating}
+                        >
+                            {props.isSubmitting ? (
+                                <span className="babylai:inline-flex babylai:items-center babylai:gap-2">
+                                    <span
+                                        className="babylai:inline-block babylai:animate-spin babylai:rounded-full babylai:h-4 babylai:w-4 babylai:border-2 babylai:border-white babylai:border-t-transparent babylai:box-border"
+                                        aria-hidden
+                                    />
+                                    {t('homeSdk.ReviewDialog.submit_button')}
+                                </span>
+                            ) : (
+                                t('homeSdk.ReviewDialog.submit_button')
+                            )}
+                        </Button>
+                    </footer>
+                </div>
+                <PoweredBy />
             </div>
         </section>
     )

package/src/ui/review-dialog/rating.tsx

@@ -1,5 +1,6 @@
 import { cn } from '@/lib'
-import { IconHeart as Heart, IconStar as Star, IconThumbUp as ThumbsUp } from '@tabler/icons-react'
+import { IconHeart as Heart, IconThumbUp as ThumbsUp } from '@tabler/icons-react'
+import SolarStarBold from '~icons/solar/star-bold'
 import * as React from 'react'
 
 export interface RatingProps {
@@ -14,7 +15,7 @@ export interface RatingProps {
 }
 
 const iconMap = {
-  star: Star,
+  star: SolarStarBold,
   heart: Heart,
   thumbsUp: ThumbsUp
 }
@@ -57,7 +58,7 @@ export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
               className={cn(
                 sizeMap[size],
                 'babylai:cursor-pointer babylai:transition-colors',
-                filled ? 'babylai:text-primary-500 babylai:fill-primary-500' : 'babylai:text-gray-300',
+                filled ? 'babylai:text-[#F49E00] babylai:fill-[#F49E00]' : 'babylai:text-gray-300',
                 readOnly && 'babylai:cursor-default'
               )}
               onMouseEnter={() => handleMouseEnter(index + 1)}