@licklist/design 0.68.1 → 0.68.2-dev.1

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -1,51 +1,51 @@
-import { useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useForm } from "react-hook-form";
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useForm } from 'react-hook-form'
 
-import Button from "react-bootstrap/Button";
-import { useHistory } from "react-router-dom";
-import Alert from "react-bootstrap/Alert";
+import Button from 'react-bootstrap/Button'
+import { useHistory } from 'react-router-dom'
+import Alert from 'react-bootstrap/Alert'
 import {
   useRyftPayment,
   RYFT_STATUS_APPROVED,
   RYFT_STATUS_CAPTURED,
   RYFT_STATUS_PENDING_ACTION,
   AttemptPaymentResponse,
-} from "@licklist/plugins/dist/hooks/Ryft/useRyftPayment";
-import { ProviderPaymentSettings } from "@licklist/core/dist/DataMapper/Setting/ProviderPaymentSettingsDataMapper";
+} from '@licklist/plugins/dist/hooks/Ryft/useRyftPayment'
+import { ProviderPaymentSettings } from '@licklist/core/dist/DataMapper/Setting/ProviderPaymentSettingsDataMapper'
 
-import { BlockLoader, ButtonLoader } from "../../static";
-import { injectComponentsInRyftForm } from "./utils/ryft-form";
+import { BlockLoader, ButtonLoader } from '../../static'
+import { injectComponentsInRyftForm } from './utils/ryft-form'
 
 export const ryftErrorMap: Record<string, string> = {
-  insufficient_funds: "insufficientFunds",
-  declined_do_not_honour: "declinedDoNotHonour",
-  invalid_card_number: "invalidCardNumber",
-  restricted_card: "restrictedCard",
-  security_violation: "securityViolation",
-  expired_card: "expiredCard",
-  gateway_reject: "gatewayReject",
-  bad_track_data: "badTrackData",
-  "3ds_authentication_failure": "3dsAuthenticationFailure",
-  unknown_error: "unknownError",
-};
-
-export type RyftPaymentFormValues = Record<string, never>;
+  insufficient_funds: 'insufficientFunds',
+  declined_do_not_honour: 'declinedDoNotHonour',
+  invalid_card_number: 'invalidCardNumber',
+  restricted_card: 'restrictedCard',
+  security_violation: 'securityViolation',
+  expired_card: 'expiredCard',
+  gateway_reject: 'gatewayReject',
+  bad_track_data: 'badTrackData',
+  '3ds_authentication_failure': '3dsAuthenticationFailure',
+  unknown_error: 'unknownError',
+}
+
+export type RyftPaymentFormValues = Record<string, never>
 
 export interface RyftPaymentFormProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  accountId: any;
-  isCreateLoading: boolean;
-  isAppUsingInIframe?: boolean;
-  onApplePayButtonClick?: () => void;
-  applePayButtonDisabled?: boolean;
+  accountId: any
+  isCreateLoading: boolean
+  isAppUsingInIframe?: boolean
+  onApplePayButtonClick?: () => void
+  applePayButtonDisabled?: boolean
   initRyft: (
     onSuccess: () => void,
     onFailure: (error?: string) => void,
-  ) => Promise<void>;
-  onSubmit: () => Promise<AttemptPaymentResponse>;
-  resetReferrer?: () => void;
-  providerPaymentSettings?: ProviderPaymentSettings;
+  ) => Promise<void>
+  onSubmit: () => Promise<AttemptPaymentResponse>
+  resetReferrer?: () => void
+  providerPaymentSettings?: ProviderPaymentSettings
 }
 
 export const RyftPaymentForm = ({
@@ -58,76 +58,76 @@ export const RyftPaymentForm = ({
   resetReferrer,
   onSubmit,
 }: RyftPaymentFormProps) => {
-  const { t } = useTranslation(["Design", "Validation", "Ryft"]);
-  const formRef = useRef<HTMLFormElement | null>(null);
+  const { t } = useTranslation(['Design', 'Validation', 'Ryft'])
+  const formRef = useRef<HTMLFormElement | null>(null)
   const showApplePayButton =
     isAppUsingInIframe &&
-    providerPaymentSettings?.additionalPaymentMethodsEnabled;
-  const history = useHistory();
-  const [isValid, setIsValid] = useState(false);
-  const [isBtnDisabled, setIsBtnDisabled] = useState(false);
-  const [ryftInitFailure, setRyftInitFailure] = useState<boolean>(false);
-  const [ryftError, setRyftError] = useState<string | undefined>(undefined);
+    providerPaymentSettings?.additionalPaymentMethodsEnabled
+  const history = useHistory()
+  const [isValid, setIsValid] = useState(false)
+  const [isBtnDisabled, setIsBtnDisabled] = useState(false)
+  const [ryftInitFailure, setRyftInitFailure] = useState<boolean>(false)
+  const [ryftError, setRyftError] = useState<string | undefined>(undefined)
 
-  const { addEventHandler } = useRyftPayment();
-  const methods = useForm<RyftPaymentFormValues>();
+  const { addEventHandler } = useRyftPayment()
+  const methods = useForm<RyftPaymentFormValues>()
 
   const setReferrerBeforePayment = () => {
-    if (!resetReferrer) return;
+    if (!resetReferrer) return
 
-    resetReferrer();
-  };
+    resetReferrer()
+  }
 
   const redirectOnFailAttempt = (paymentSession: AttemptPaymentResponse) => {
-    if (!paymentSession?.id || !paymentSession?.returnUrl) return;
+    if (!paymentSession?.id || !paymentSession?.returnUrl) return
 
     // Handle there cases when orderStatus - Captured, Approved,
     // or when no redirect URL and orderStatus - PendingAction
-    window.location.href = `${paymentSession.returnUrl}&ps=${paymentSession.id}`;
-    setReferrerBeforePayment();
-  };
+    window.location.href = `${paymentSession.returnUrl}&ps=${paymentSession.id}`
+    setReferrerBeforePayment()
+  }
 
   const handleSubmit = async () => {
-    setIsBtnDisabled(true);
+    setIsBtnDisabled(true)
 
     try {
-      const paymentSession = await onSubmit();
+      const paymentSession = await onSubmit()
 
       if (!paymentSession) {
-        setRyftError("unknown_error");
+        setRyftError('unknown_error')
       }
 
-      if ("requiredAction" in paymentSession) {
+      if ('requiredAction' in paymentSession) {
         if (
           paymentSession.status !== RYFT_STATUS_PENDING_ACTION ||
           !paymentSession.requiredAction?.url
         ) {
-          redirectOnFailAttempt(paymentSession);
-          return;
+          redirectOnFailAttempt(paymentSession)
+          return
         }
 
-        window.location.href = paymentSession.requiredAction.url;
-        setReferrerBeforePayment();
+        window.location.href = paymentSession.requiredAction.url
+        setReferrerBeforePayment()
       }
 
       if (
         paymentSession.status === RYFT_STATUS_APPROVED ||
         paymentSession.status === RYFT_STATUS_CAPTURED
       ) {
-        redirectOnFailAttempt(paymentSession);
-        return;
+        redirectOnFailAttempt(paymentSession)
+        return
       }
 
       if (paymentSession.lastError) {
-        setRyftError(paymentSession.lastError);
-        setReferrerBeforePayment();
+        setRyftError(paymentSession.lastError)
+        setReferrerBeforePayment()
       }
     } catch (error) {
-      setRyftError(error as string);
+      setRyftError(error as string)
     } finally {
-      setIsBtnDisabled(false);
+      setIsBtnDisabled(false)
     }
-  };
+  }
 
   useEffect(
     () => {
@@ -136,7 +136,7 @@ export const RyftPaymentForm = ({
         formRef.current?.childNodes?.length < 3 ||
         !accountId.data?.account_id
       ) {
-        return;
+        return
       }
       injectComponentsInRyftForm({
         t,
@@ -144,66 +144,66 @@ export const RyftPaymentForm = ({
         onApplePayButtonClick,
         additionalPaymentMethodsEnabled:
           providerPaymentSettings?.additionalPaymentMethodsEnabled,
-      });
+      })
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [formRef.current?.childNodes?.length, showApplePayButton],
-  );
+  )
 
   useEffect(() => {
-    if (!accountId.data?.account_id || accountId.isError) return;
+    if (!accountId.data?.account_id || accountId.isError) return
 
     initRyft(
       () => {
-        addEventHandler("cardValidationChanged", (e: MessageEvent["data"]) => {
-          setIsValid(e.isValid);
-        });
+        addEventHandler('cardValidationChanged', (e: MessageEvent['data']) => {
+          setIsValid(e.isValid)
+        })
 
-        setRyftInitFailure(false);
+        setRyftInitFailure(false)
       },
       () => setRyftInitFailure(true),
-    );
+    )
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [accountId.data?.account_id]);
+  }, [accountId.data?.account_id])
 
   if (accountId.isLoading || accountId.isFetching || isCreateLoading)
     return (
       <div className="mt-5 pt-5">
         <BlockLoader />
       </div>
-    );
+    )
 
   if (accountId.isError) {
     return (
       <div className="mt-5 ryft-init-failure">
         <Alert key="danger" variant="danger">
-          <h5>{t("Ryft:errorMessage")}</h5>
-          {t("Ryft:noPaymentProviderFound")}
+          <h5>{t('Ryft:errorMessage')}</h5>
+          {t('Ryft:noPaymentProviderFound')}
         </Alert>
       </div>
-    );
+    )
   }
 
   if (ryftInitFailure) {
     return (
       <div className="mt-5 ryft-init-failure">
         <Alert key="danger" variant="danger">
-          <h5>{t("Ryft:errorMessage")}</h5>
-          {t("Ryft:initFailureMessage")}
+          <h5>{t('Ryft:errorMessage')}</h5>
+          {t('Ryft:initFailureMessage')}
           <div className="flex flex-column align-items-center mt-4">
             <Button
               variant="primary"
               onClick={() => {
-                history.go(0);
+                history.go(0)
               }}
             >
-              {t("Ryft:refresh")}
+              {t('Ryft:refresh')}
             </Button>
           </div>
         </Alert>
       </div>
-    );
+    )
   }
 
   return (
@@ -218,7 +218,7 @@ export const RyftPaymentForm = ({
         <div className="submit-button-wrapper mt-4 p-1">
           <Button type="submit" disabled={isBtnDisabled || !isValid}>
             {isBtnDisabled && <ButtonLoader />}
-            {t("Design:buyNow")}
+            {t('Design:buyNow')}
           </Button>
         </div>
         {ryftError && (
@@ -226,5 +226,5 @@ export const RyftPaymentForm = ({
         )}
       </form>
     </>
-  );
-};
+  )
+}

package/src/iframe/ryft/utils/ryft-form.ts

@@ -1,13 +1,13 @@
-import { TFunction } from "react-i18next";
-import { RyftPaymentFormProps } from "../RyftPaymentForm";
+import { TFunction } from 'react-i18next'
+import { RyftPaymentFormProps } from '../RyftPaymentForm'
 
 interface InjectComponentsInRyftForm
   extends Pick<
     RyftPaymentFormProps,
-    "onApplePayButtonClick" | "isAppUsingInIframe"
+    'onApplePayButtonClick' | 'isAppUsingInIframe'
   > {
-  t: TFunction<string[]>;
-  additionalPaymentMethodsEnabled?: boolean;
+  t: TFunction<string[]>
+  additionalPaymentMethodsEnabled?: boolean
 }
 
 export const injectComponentsInRyftForm = ({
@@ -16,57 +16,57 @@ export const injectComponentsInRyftForm = ({
   isAppUsingInIframe,
   onApplePayButtonClick,
 }: InjectComponentsInRyftForm) => {
-  const cardContainer = document.getElementById("ryft-pay-iframe");
+  const cardContainer = document.getElementById('ryft-pay-iframe')
 
   if (!cardContainer) {
-    return;
+    return
   }
   // Removing of the old title container
-  document.getElementById("card-title-container")?.remove();
+  document.getElementById('card-title-container')?.remove()
 
-  const cardTitle = document.createElement("div");
-  const cardText = document.createElement("div");
-  const cardTitleContainer = document.createElement("div");
-  cardTitleContainer.id = "card-title-container";
-  cardTitle.textContent = t("Design:enterCardDetails");
-  cardText.className = "bold-text form-label";
-  cardText.innerText = t("Design:paymentDetails");
-  cardTitleContainer.append(cardTitle, cardText);
-  cardContainer?.before(cardTitleContainer);
+  const cardTitle = document.createElement('div')
+  const cardText = document.createElement('div')
+  const cardTitleContainer = document.createElement('div')
+  cardTitleContainer.id = 'card-title-container'
+  cardTitle.textContent = t('Design:enterCardDetails')
+  cardText.className = 'bold-text form-label'
+  cardText.innerText = t('Design:paymentDetails')
+  cardTitleContainer.append(cardTitle, cardText)
+  cardContainer?.before(cardTitleContainer)
 
-  const payGrid = document.getElementById("ryft-pay-grid");
+  const payGrid = document.getElementById('ryft-pay-grid')
 
   if (!payGrid || !additionalPaymentMethodsEnabled) {
-    return;
+    return
   }
 
   // Removing of the old mobile  title container  and divider container
-  document.getElementById("mobile-pay-title")?.remove();
-  document.getElementById("mobile-pay-divider-container")?.remove();
-  document.getElementById("apple-pay")?.remove();
+  document.getElementById('mobile-pay-title')?.remove()
+  document.getElementById('mobile-pay-divider-container')?.remove()
+  document.getElementById('apple-pay')?.remove()
 
   // Adding title and divider for apple and google pay button
-  const mobilePayTitle = document.createElement("div");
-  const dividerText = document.createElement("div");
-  const divider = document.createElement("div");
-  const container = document.createElement("div");
-  mobilePayTitle.className = "mobile-pay-title";
-  mobilePayTitle.innerText = t("Design:expressCheckoutWith");
-  mobilePayTitle.id = "mobile-pay-title";
-  dividerText.id = "mobile-pay-divider-text";
-  dividerText.innerText = "or";
-  divider.id = "mobile-pay-divider";
-  container.id = "mobile-pay-divider-container";
-  container.append(dividerText, divider);
+  const mobilePayTitle = document.createElement('div')
+  const dividerText = document.createElement('div')
+  const divider = document.createElement('div')
+  const container = document.createElement('div')
+  mobilePayTitle.className = 'mobile-pay-title'
+  mobilePayTitle.innerText = t('Design:expressCheckoutWith')
+  mobilePayTitle.id = 'mobile-pay-title'
+  dividerText.id = 'mobile-pay-divider-text'
+  dividerText.innerText = 'or'
+  divider.id = 'mobile-pay-divider'
+  container.id = 'mobile-pay-divider-container'
+  container.append(dividerText, divider)
   if (isAppUsingInIframe) {
-    const applePayButton = document.createElement("button");
-    applePayButton.id = "apple-pay";
-    applePayButton.type = "button";
-    applePayButton.className = "bg-dark btn btn-primary apple-pay-button";
-    applePayButton.textContent = t("Events:payWithApple");
-    applePayButton.onclick = onApplePayButtonClick;
-    payGrid.append(applePayButton);
+    const applePayButton = document.createElement('button')
+    applePayButton.id = 'apple-pay'
+    applePayButton.type = 'button'
+    applePayButton.className = 'bg-dark btn btn-primary apple-pay-button'
+    applePayButton.textContent = t('Events:payWithApple')
+    applePayButton.onclick = onApplePayButtonClick
+    payGrid.append(applePayButton)
   }
-  payGrid.before(mobilePayTitle);
-  payGrid.after(container);
-};
+  payGrid.before(mobilePayTitle)
+  payGrid.after(container)
+}

package/src/image-radio-input/ImageRadioInput.stories.tsx

@@ -1,66 +1,66 @@
-import { Meta, Story } from "@storybook/react";
-import { FormProvider, useForm } from "react-hook-form";
-import { FaBars } from "react-icons/fa";
-import { ImageRadioInput, ImageRadioInputProps } from "./ImageRadioInput";
-import { ReactComponent as MonthIcon } from "../assets/widgets/monthCalendar.svg";
+import { Meta, Story } from '@storybook/react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { FaBars } from 'react-icons/fa'
+import { ImageRadioInput, ImageRadioInputProps } from './ImageRadioInput'
+import { ReactComponent as MonthIcon } from '../assets/widgets/monthCalendar.svg'
 
 export default {
-  title: "ImageRadioInput",
+  title: 'ImageRadioInput',
   component: ImageRadioInput,
-} as Meta;
+} as Meta
 
 type FormModel = {
-  test: string;
-};
+  test: string
+}
 
 export const Default: Story<ImageRadioInputProps<FormModel>> = (args) => {
-  const form = useForm();
+  const form = useForm()
 
   return (
     <FormProvider {...form}>
       <ImageRadioInput {...args} />
     </FormProvider>
-  );
-};
+  )
+}
 
 Default.args = {
   img: <MonthIcon />,
-  label: "Month",
-  name: "test",
-};
+  label: 'Month',
+  name: 'test',
+}
 
 export const WithFontAwesomeIcon: Story<ImageRadioInputProps<FormModel>> = (
   args,
 ) => {
-  const form = useForm();
+  const form = useForm()
 
   return (
     <FormProvider {...form}>
       <ImageRadioInput {...args} />
     </FormProvider>
-  );
-};
+  )
+}
 
 WithFontAwesomeIcon.args = {
   img: <FaBars />,
-  label: "List",
-  name: "test",
-};
+  label: 'List',
+  name: 'test',
+}
 
 export const Disabled: Story<ImageRadioInputProps<FormModel>> = (args) => {
-  const form = useForm();
+  const form = useForm()
 
   return (
     <FormProvider {...form}>
       <ImageRadioInput {...args} />
     </FormProvider>
-  );
-};
+  )
+}
 
 Disabled.args = {
   img: <MonthIcon />,
-  label: "Month",
-  name: "test",
+  label: 'Month',
+  name: 'test',
   disabled: true,
-  disabledMessage: "Coming soon",
-};
+  disabledMessage: 'Coming soon',
+}

package/src/image-radio-input/ImageRadioInput.tsx

@@ -1,19 +1,19 @@
-import clsx from "clsx";
-import { ReactNode } from "react";
-import { Form } from "react-bootstrap";
-import { FormCheckInputProps } from "react-bootstrap/esm/FormCheckInput";
-import { Path, RegisterOptions, useFormContext } from "react-hook-form";
+import clsx from 'clsx'
+import { ReactNode } from 'react'
+import { Form } from 'react-bootstrap'
+import { FormCheckInputProps } from 'react-bootstrap/esm/FormCheckInput'
+import { Path, RegisterOptions, useFormContext } from 'react-hook-form'
 
 export type ImageRadioInputProps<FormModel> = {
-  img: ReactNode;
-  label: string;
-  value: string | number;
-  name: Path<FormModel>;
-  disabled?: boolean;
-  disabledMessage?: string;
-  rules?: RegisterOptions<FormModel>;
-  inputProps?: FormCheckInputProps;
-};
+  img: ReactNode
+  label: string
+  value: string | number
+  name: Path<FormModel>
+  disabled?: boolean
+  disabledMessage?: string
+  rules?: RegisterOptions<FormModel>
+  inputProps?: FormCheckInputProps
+}
 
 export const ImageRadioInput = <FormModel,>({
   img,
@@ -25,12 +25,12 @@ export const ImageRadioInput = <FormModel,>({
   rules,
   inputProps,
 }: ImageRadioInputProps<FormModel>) => {
-  const { register } = useFormContext<FormModel>();
+  const { register } = useFormContext<FormModel>()
 
   return (
     <Form.Check className="image-radio-input">
       <Form.Check.Label
-        className={clsx("image-radio-input-wrapper", disabled && "disabled")}
+        className={clsx('image-radio-input-wrapper', disabled && 'disabled')}
       >
         <div className="image-radio-input-image-wrapper">{img}</div>
 
@@ -49,5 +49,5 @@ export const ImageRadioInput = <FormModel,>({
         {disabledMessage}
       </Form.Control.Feedback>
     </Form.Check>
-  );
-};
+  )
+}

package/src/image-radio-input/index.ts

@@ -1 +1 @@
-export { ImageRadioInput } from "./ImageRadioInput";
+export { ImageRadioInput } from './ImageRadioInput'