@wf-financing/ui 3.3.1 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",

package/sdk/index.ts

@@ -8,8 +8,8 @@ export class WayflyerUiSdk {
   private readonly partnerTheme: PartnerTheme;
 
   constructor(
-    private readonly companyToken: string,
-    private readonly options?: SdkOptionsType,
+    readonly companyToken: string,
+    readonly options?: SdkOptionsType,
   ) {
     const partnerId = getPartnerIdFromToken(companyToken);
     this.partnerTheme = getPartnerThemeById(partnerId);

package/src/components/banner/ProceedFundingButton.tsx

@@ -17,7 +17,7 @@ export const ProceedFundingButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean
   const [isModalOpen, setIsModalOpen] = useState(false);
   const sdkResponse = useCtaBanner();
   const sdk = sdkResponse.data as CtaResponseType;
-  const continueHostedApplicationMutation = useContinueHostedApplication();
+  const { mutate, isPending: isLoading } = useContinueHostedApplication();
   const invalidateCta = useInvalidateCta();
 
   if (!sdk) return null;
@@ -30,7 +30,7 @@ export const ProceedFundingButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean
   const handleContinueHostedApplication = () => {
     switch (state) {
       case CtaStateType.CONTINUE_APPLICATION:
-        continueHostedApplicationMutation.mutate(undefined, {
+        mutate(undefined, {
           onSuccess: (nextUrl: ContinueHostedApplicationResponseType) => {
             const { next } = nextUrl;
             window.open(next);
@@ -49,7 +49,12 @@ export const ProceedFundingButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean
 
   return (
     <>
-      <Button variant={isOnDarkTheme ? 'PrimaryOnDark' : 'Primary'} fullWidth onClick={handleContinueHostedApplication}>
+      <Button
+        variant={isOnDarkTheme ? 'PrimaryOnDark' : 'Primary'}
+        fullWidth
+        onClick={handleContinueHostedApplication}
+        loading={isLoading}
+      >
         {config?.button_label}
       </Button>
       <ConsentModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />

package/src/components/modal/ModalFooter.tsx

@@ -11,12 +11,12 @@ type ModalFooterType = {
 
 export const ModalFooter = ({ setOpen }: ModalFooterType) => {
   const { isMobile } = useDetectDeviceSize();
-  const startHostedAppMutation = useStartHostedApplication();
+  const { mutate, isPending: isLoading } = useStartHostedApplication();
   const isSmallScreen = useDetectSmallScreen();
   const invalidateCta = useInvalidateCta();
 
   const handleStartApplication = () => {
-    startHostedAppMutation.mutate(undefined, {
+    mutate(undefined, {
       onSuccess: (nextUrl: StartHostedApplicationResponseType) => {
         const { next } = nextUrl;
         setOpen(false);
@@ -36,9 +36,9 @@ export const ModalFooter = ({ setOpen }: ModalFooterType) => {
   return (
     <Flex direction="column" gap="3">
       <Flex gap="2" direction={isSmallScreen || isMobile ? 'column' : 'row'}>
-        <Button fullWidth onClick={handleStartApplication} variant="Primary" external>
+        <Button fullWidth onClick={handleStartApplication} loading={isLoading} variant="Primary" external>
           <FormattedMessage id="ctaModal.action" />
-          <IconArrowOnSquareUpRight16Line />
+          {!isLoading && <IconArrowOnSquareUpRight16Line />}
         </Button>
         <Button fullWidth variant="Secondary" onClick={() => setOpen(false)}>
           <FormattedMessage id="common.cancel" />