@toppr-engg/instalearn-components v1.1.5-alpha.9

import { SearchPageComponent } from '@toppr-engg/instalearn-components/lib/esm';
import '@toppr-engg/instalearn-components/lib/esm/index.css';

function SearchPage() {
  return (
    <SearchPageComponent
      apiBaseUrl={apiBaseUrl}
      origin={origin}
      userId={userId}
      authKey={authKey}
      docToken={docToken}
      docApiBaseUrl={docApiBaseUrl}
      docClientId={docClientId}
      searchText={searchText}
      searchType={searchType}
      imageData={imageData}
      showActivationCta={showActivationCta}
      activationBarCtaHeading={activationBarCtaHeading}
      activationBarCtaSubHeading={activationBarCtaSubHeading}
      activationBarPositioningClassName={activationBarPositioningClassName}
      activationBarColorClassName={activationBarColorClassName}
      layoutClassName={layoutClassName}
      handleSearchListClick={handleSearchListClick}
      getSubjectRelatedToSearch={getSubjectRelatedToSearch}
      handleActivationCtaClick={handleActivationCtaClick}
      handleRenewClick={handleRenewClick}
      isTodFeature={isTodFeature}
      isPaymentDone={isPaymentDone}
      isUserVisitedFirstTime={isUserVisitedFirstTime}
      handleBackClick={handleBackClick}
      showBackButton={showBackButton}
    />
  );
}

PROPS TABLE

Function Definitions

/**
 *  callback  to handle click on search result
 * @param {object} payload
 */
function handleSearchListClick(data) {}

/**
 *  callback to get the subjectId related to search
 * @param {number} subjectId
 */
function getSubjectRelatedToSearch({ subjectId }) {}

/**
 * callback to invoke ask tutor package
 * @param {string} imageData -   image data after uploading the image to s3 bucket .
 * @param {string} searchText -  text searched by user.
 * @param {string} searchType - image or text search.
 * @param {string} searchResultCount -  search result count.
 */
handleActivationCtaClick({
  imageData,
  searchText,
  searchType,
  searchResultCount: getSlicedSearchResultData?.length,
});

import { HomePageComponent } from '@toppr-engg/instalearn-components/lib/esm';
import '@toppr-engg/instalearn-components/lib/esm/index.css';
import '@toppr-engg/byjus-search-qna/lib/esm/index.css';

function HomePage() {
  return (
    <HomePageComponent
      apiBaseUrl={apiBaseUrl}
      origin={origin}
      userId={userId}
      authKey={authKey}
      docToken={docToken}
      docApiBaseUrl={docApiBaseUrl}
      docClientId={docClientId}
      heading={heading}
      bannerHeadingHTmlFormat={bannerHeadingHTmlFormat}
      bannerSubHeadingHTmlFormat={bannerSubHeadingHTmlFormat}
      videoBannerHeadingHtmlFormat={videoBannerHeadingHtmlFormat}
      videoBannerSubHeadingHtmlFormat={videoBannerSubHeadingHtmlFormat}
      isNewfeature={isNewfeature}
      showActivationCta={showActivationCta}
      showVideoBanner={showVideoBanner}
      askExpertBtnHeading={askExpertBtnHeading}
      askExpertBtnClassName={askExpertBtnClassName}
      layoutClassName={layoutClassName}
      onSuggestionClick={onSuggestionClick}
      onCustomSearch={onCustomSearch}
      handleRenewClick={handleRenewClick}
      isTodFeature={isTodFeature}
    />
  );
}

PROPS TABLE

import { ImageUploadPopup } from '@toppr-engg/instalearn-components/lib/esm';
import '@toppr-engg/instalearn-components/lib/esm/index.css';

function Home() {
  return (
    <ImageUploadPopup
      onClosePopup={onClosePopup}
      onSubmitTextDoubt={onSubmitTextDoubt}
      onUploadImage={onUploadImage}
      onImageUploaded={onImageUploaded}
      onTypeCameraClick={onTypeCameraClick}
      initialScreenTitle={initialScreenTitle}
      cropScreenTitle={cropScreenTitle}
      imageUploadingTitle={imageUploadingTitle}
      apiBaseUrl={apiBaseUrl}
      authKey={authKey}
      userId={userId}
      docApiBaseUrl={docApiBaseUrl}
      docToken={docToken}
      docClientId={docClientId}
      directSearchViaAskADoubt={directSearchViaAskADoubt}
      isClickFromAskExpert={isClickFromAskExpert}
    />
  );
}

PROPS TABLE

Function Definitions

/**
 * callback to handle click on click of cross icon
 *  @returns {Void}
 */
function onClosePopup() {}

/**
 * callback which gets triggered when a text doubt is submitted via the CTA
 * @param {string} typedText
 * @returns {Void}
 */
function onSubmitTextDoubt(typedText) {}

/**
 * callback which gets triggered when a user selects an image to upload
 * Consists of image src as a base64 string
 * @param {string} base64ImageData
 * @returns {Void}
 */
function onUploadImage(base64ImageData) {}

/**
 * callback to invoke ask tutor package
 * @param {object} data -  Consists of the api response and the base64 image data
 * {
 *   data: {
 *      status: {
 *         code: 200,
 *         isError: false,
 *      },
 *      text: "What is baye's theorem"
 *   }
 *   imageData: "base64 data of image"
 * }
 */
function onImageUploaded(data) {}

import { CameraWrapper } from '@toppr-engg/instalearn-components/lib/esm';
import '@toppr-engg/instalearn-components/lib/esm/index.css';

function Home() {
  return (
    <CameraWrapper
      onCameraClose={onCameraClose}
      onImageUploaded={onImageUploaded}
      onTypeClick={onTypeClick}
      apiBaseUrl={apiBaseUrl}
      authKey={authKey}
      userId={userId}
      cameraIconClassName={cameraIconClassName}
      footerClassName={footerClassName}
      videoConstraints={videoConstraints}
      modalData={modalData}
      cameraPermissionAskData={cameraPermissionAskData}
      cameraPermissionErrorData={cameraPermissionErrorData}
      imageCropperData={imageCropperData}
      reactWebcamData={reactWebcamData}
    />
  );
}

PROPS TABLE

Function Definitions

/**
 * callback to handle click on click of cross icon
 *  @returns {Void}
 */
function onCameraClose() {}

/**
 * callback which gets triggered when image gets uploaded
 * @param {object} data -  Consists of the api response and the base64 image data
 */
function onImageUploaded(data) {}

/**
 * callback which gets triggered when keyboard icon is clicked
 */
function onTypeClick() {}

import { ImageCropper } from '@toppr-engg/instalearn-components/lib/esm';
import '@toppr-engg/instalearn-components/lib/esm/index.css';

function Home() {
  return (
    <ImageCropper
      onGetEditedImage={onGetEditedImage}
      onDeleteImage={onDeleteImage}
      onClickBack={onClickBack}
      onCloseClick={onCloseClick}
      onSubmitImage={onSubmitImage}
      onGetImageRef={onGetImageRef}
      className={className}
      footerClassName={footerClassName}
      imgClassName={imgClassName}
      base64Img={base64Img}
      selectedFile={selectedFile}
      hideFooter={hideFooter}
      hideHeader={hideHeader}
      hideAnticlockwise={hideAnticlockwise}
      hideDeleteImage={hideDeleteImage}
      hideBack={hideBack}
      hideCross={hideCross}
      title={title}
      titleClassName={titleClassName}
      iconClassName={iconClassName}
      hideClockwise={hideClockwise}
      btnProps={btnProps}
      isImageAnimationVisible={isImageAnimationVisible}
      animationMessage={animationMessage}
      animationMessageClassName={animationMessageClassName}
      reactImageCropperData={reactImageCropperData}
    />
  );
}

PROPS TABLE

Function Definitions

/**
 * callback to handle click on click of cross icon
 *  @returns {Void}
 */
function onCloseClick() {}

/**
 * callback to handle click on click of back icon
 *  @returns {Void}
 */
function onClickBack() {}

/**
 * A callback which gets triggered when crop state is changed or image is rotated by user
 * @param {string} base64Img -  Consists of the base64 image string
 */
function onGetEditedImage(base64Img) {}

/**
 * A callback which gets triggered when submit cta is clicked
 * @param {string} base64Img -  Consists of the base64 image string
 */
function onSubmitImage(base64Img) {}

import { QuestionPageComponent } from '@toppr-engg/instalearn-components/lib/esm';
import '@toppr-engg/instalearn-components/lib/esm/index.css';
function QuestionPage() {
  return (
    <QuestionPageComponent
      apiBaseUrl={apiBaseUrl}
      origin={origin}
      userId={userId}
      authKey={authKey}
      questionSlug={questionSlug}
      searchType={searchType}
      imageData={imageData}
      showDefaultListValue={showDefaultListValue}
      showActivationCta={showActivationCta}
      activationBarCtaHeading={activationBarCtaHeading}
      activationBarCtaSubHeading={activationBarCtaSubHeading}
      activationBarPositioningClassName={activationBarPositioningClassName}
      activationBarColorClassName={activationBarColorClassName}
      layoutClassName={layoutClassName}
      isBottomBar={isBottomBar}
      handleQuestionClick={handleQuestionClick}
      getSubjectRelatedToSearch={getSubjectRelatedToSearch}
      handleActivationCtaClick={handleActivationCtaClick}
      siteBaseUrl={siteBaseUrl}
      docApiBaseUrl={docApiBaseUrl}
      docToken={docToken}
      docClientId={docClientId}
      handleBackClick={handleBackClick}
      showBackButton={showBackButton}
    />
  );
}

PROPS TABLE

Function Definitions

/**
 *  callback  to handle click on search result
 * 
@Param
 {object} payload
 */
function handleSearchListClick(data) {}
/**
 *  callback to get the subjectId related to search
 * 
@Param
 {number} subjectId
 */
function getSubjectRelatedToSearch({ subjectId }) {}
/**
 * callback to invoke ask tutor package
 * 
@Param
 {string} searchText -  text
 */
handleActivationCtaClick({
  searchText,
});