Integrate survey/survey.ts with backend via http calls

app/Feature/Trial/TrialService.php

@@ -0,0 +1,21 @@
+<?php
+namespace Coyote\Feature\Trial;
+
+readonly class TrialService
+{
+    public function setChoice(string $choice): void
+    {
+    }
+
+    public function setStage(string $stage): void
+    {
+    }
+
+    public function logPreview(string $choice): void
+    {
+    }
+
+    public function setBadgeNarrow(bool $narrow): void
+    {
+    }
+}

app/Feature/Trial/TrialServiceProvider.php

@@ -3,6 +3,8 @@
 
 use Coyote\Domain\Settings\UserTheme;
 use Illuminate\Contracts\View\View;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Route;
 use Illuminate\Support\ServiceProvider;
 use Illuminate\View\Factory;
 
@@ -13,6 +15,21 @@ public function boot(): void
         /** @var Factory $view */
         $view = $this->app['view'];
         $this->add($view);
+
+        Route::middleware('web')->group(function () {
+            Route::post('/trial/choice', function (Request $request, TrialService $service) {
+                $service->setChoice($request->get('choice'));
+            });
+            Route::post('/trial/stage', function (Request $request, TrialService $service) {
+                $service->setStage($request->get('stage'));
+            });
+            Route::post('/trial/preview', function (Request $request, TrialService $service) {
+                $service->logPreview($request->get('preview'));
+            });
+            Route::post('/trial/badge', function (Request $request, TrialService $service) {
+                $service->setBadgeNarrow($request->get('badge') === 'narrow');
+            });
+        });
     }
 
     private function add(Factory $viewFactory): void
@@ -39,7 +56,7 @@ private function addViewField(View $view): void
                     ],
                 ],
                 'userSession'   => [
-                    'stage'      => 'stage-none',
+                    'stage'      => 'stage-invited',
                     'choice'     => 'choice-modern', 'choice-legacy', 'choice-pending',
                     'badgeLong'  => true,
                     'assortment' => 'assortment-legacy', // 'assortment-modern'

survey/src/survey.ts

@@ -1,6 +1,4 @@
 import axios from "axios";
-
-import store from "../../resources/js/store/index";
 import {createVueApp} from "../../resources/js/vue";
 import {type Experiment} from "./screen/screen";
 import {ExperimentOpt} from "./screen/steps/participate";
@@ -105,6 +103,38 @@ window.addEventListener('load', () => {
   if (!surveyElement) {
     return;
   }
+  renderVueApp(
+    translateInput(surveyElement!.textContent!),
+    experimentChangeStyle,
+    storeSurveyPreview,
+    storeSurveyState,
+    storeSurveyBadgeState,
+  );
+
+  function experimentChangeStyle(style: ExperimentOpt): void {
+    axios.post('/trial/choice', {choice: style});
+  }
+
+  function storeSurveyState(surveyState: State): void {
+    axios.post('/trial/stage', {stage: surveyState});
+  }
+
+  function storeSurveyPreview(surveyChoicePreview: ExperimentOpt): void {
+    axios.post('/trial/preview', {preview: surveyChoicePreview});
+  }
+
+  function storeSurveyBadgeState(badgeLong: boolean): void {
+    axios.post('/trial/badge', {badge: badgeLong});
+  }
+});
+
+function renderVueApp(
+  data: Data,
+  experimentChangeStyle: (style: ExperimentOpt) => void,
+  storeSurveyPreview: (surveyChoicePreview: ExperimentOpt) => void,
+  storeSurveyState: (surveyState: State) => void,
+  storeSurveyBadgeState: (badgeLong: boolean) => void,
+): void {
   createVueApp('Survey', '#js-survey', {
     components: {'vue-survey-tally': SurveyTally},
     template: `
@@ -119,7 +149,7 @@ window.addEventListener('load', () => {
       />
     `,
     data(): Data {
-      return translateInput(surveyElement!.textContent!);
+      return data;
     },
     methods: {
       experimentOpt(this: Data, optIn: ExperimentOpt): void {
@@ -142,21 +172,4 @@ window.addEventListener('load', () => {
       },
     },
   });
-
-  function experimentChangeStyle(style: ExperimentOpt): void {
-    store.commit('user/changePostStyle', style);
-    axios.post('/survey', {surveyChoice: style});
-  }
-
-  function storeSurveyState(surveyState: State): void {
-    axios.post('/survey', {surveyState});
-  }
-
-  function storeSurveyPreview(surveyChoicePreview: ExperimentOpt): void {
-    axios.post('/survey', {surveyChoicePreview});
-  }
-
-  function storeSurveyBadgeState(badgeLong: boolean): void {
-    axios.post('/survey', {surveyBadgeState: badgeLong});
-  }
-});
+}