Task/show AI-assisted import checkbox to Basic users (#8309)

* Extend visibility of AI-assisted import to users without a subscription

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts

@@ -26,6 +26,7 @@ import {
   FileFormat,
   GfFileDropAreaComponent
 } from '@ghostfolio/ui/file-drop-area';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 
 import {
@@ -90,6 +91,7 @@ import {
     GfDialogFooterComponent,
     GfDialogHeaderComponent,
     GfFileDropAreaComponent,
+    GfPremiumIndicatorComponent,
     IonIcon,
     MatButtonModule,
     MatCheckboxModule,

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -82,25 +82,32 @@
               (fileSelected)="onFileSelected({ stepper, file: $event })"
             />
             @if (
-              data.deviceType !== 'mobile' && hasPermissionToEnableGhostfolioAi
+              data.deviceType !== 'mobile' &&
+              (hasPermissionToEnableGhostfolioAi ||
+                (data.user?.subscription?.type === 'Basic' &&
+                  data.user?.settings?.isExperimentalFeatures))
             ) {
               <div class="align-items-center d-flex mt-4">
                 <mat-checkbox
                   color="primary"
                   [checked]="isGhostfolioAiEnabled"
-                  [disabled]="isLoading"
+                  [disabled]="isLoading || !hasPermissionToEnableGhostfolioAi"
                   (change)="onGhostfolioAiChange($event)"
                 >
                   <ng-container i18n>AI-assisted import</ng-container>
                 </mat-checkbox>
-                <span
-                  class="align-items-center d-flex ms-1"
-                  matTooltipPosition="above"
-                  [class.text-body-secondary]="isLoading"
-                  [matTooltip]="ghostfolioAiTooltip"
-                >
-                  <ion-icon name="information-circle-outline" />
-                </span>
+                @if (data.user?.subscription?.type === 'Basic') {
+                  <gf-premium-indicator class="ms-1" [enableLink]="false" />
+                } @else {
+                  <span
+                    class="align-items-center d-flex ms-1"
+                    matTooltipPosition="above"
+                    [class.text-body-secondary]="isLoading"
+                    [matTooltip]="ghostfolioAiTooltip"
+                  >
+                    <ion-icon name="information-circle-outline" />
+                  </span>
+                }
               </div>
             }
           </div>