Update onboarding with filament forms (#255)

* Update onboarding with filament forms * fix code formatting --------- Co-authored-by: mckenziearts <[email protected]>
shopperlabs · Apr 24, 2024 · 3afdb5c · 3afdb5c
1 parent a897740
commit 3afdb5c
Show file tree

Hide file tree

Showing 19 changed files with 401 additions and 414 deletions.
diff --git a/packages/admin/resources/lang/en/forms.php b/packages/admin/resources/lang/en/forms.php
@@ -83,6 +83,7 @@
         'logo' => 'Logo',
         'cover_photo' => 'Cover photo',
         'about' => 'About',
+        'default_currency' => 'Default currency',
         'currency' => 'Currency',
         'currencies' => 'Currencies',
         'longitude' => 'Longitude',

diff --git a/packages/admin/resources/lang/en/pages/onboarding.php b/packages/admin/resources/lang/en/pages/onboarding.php
@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+
+    'title' => 'Shop Initialization',
+    'step_one_title' => 'Information',
+    'step_one_description' => 'Provide useful information for your store.',
+    'step_two_title' => 'Address',
+    'step_two_description' => 'Provide store address information.',
+    'step_tree_title' => 'Social Links',
+    'step_tree_description' => 'Links to your social media accounts.',
+
+    'step' => 'Step :step of 3',
+    'shop_configuration' => 'Shop configuration',
+    'step_1' => 'Step 1 - Shop information',
+    'tell_about' => 'Tell us about your Shop',
+    'step_1_description' => 'This information will be useful if you want users of your site to directly contact you by email or by your phone number.',
+
+    'step_2' => 'Step 2 - Address information',
+    'address_description' => 'You must specify address and location of your shop',
+    'step_2_description' => 'Don\'t worry. You can change these settings at any time. Shopper allows you to start with the smallest level so that you can see the evolution of your shop.',
+
+    'step_3' => 'Step 3 - Social links',
+    'social_description' => 'Your shop on social networks',
+    'step_3_description' => 'You can add links to your social media accounts so that your shop can be found easily on your social media pages.',
+    'action' => 'Save',
+
+    'about_description' => 'You can add this information to an "About" page on your website.',
+    'currencies_description' => 'These are the currencies in which the products will be sold in your store.',
+    'currency_description' => 'This is the main currency that will be displayed on your store.',
+
+];
diff --git a/packages/admin/resources/lang/en/pages/settings.php b/packages/admin/resources/lang/en/pages/settings.php
@@ -6,34 +6,6 @@
 
     'empty_country_selector' => 'Please select a country',
     'logo_description' => 'The logo of your store that will be visible on your site. This assets will appear on your invoices.',
-    'about_description' => 'You can add this information to an "About" page on your website.',
-    'currency_description' => 'This is the currency your products are sold in. After your first sale, currency is locked in and can’t be changed.',
-    'mapbox_disabled' => 'Mapbox has not been activated.',
-
-    'initialization' => [
-        'title' => 'Shop Initialization',
-        'step_one_title' => 'Information',
-        'step_one_description' => 'Provide useful information for your store.',
-        'step_two_title' => 'Address',
-        'step_two_description' => 'Provide store address information.',
-        'step_tree_title' => 'Social Links',
-        'step_tree_description' => 'Links to your social media accounts.',
-
-        'step' => 'Step :step of 3',
-        'shop_configuration' => 'Shop configuration',
-        'step_1' => 'Step 1 - Shop information',
-        'tell_about' => 'Tell us about your Shop',
-        'step_1_description' => 'This information will be useful if you want users of your site to directly contact you by email or by your phone number.',
-
-        'step_2' => 'Step 2 - Address information',
-        'address_description' => 'You must specify address and location of your shop',
-        'step_2_description' => 'Don\'t worry. You can change these settings at any time. Shopper allows you to start with the smallest level so that you can see the evolution of your shop.',
-
-        'step_3' => 'Step 3 - Social links',
-        'social_description' => 'Your shop on social networks',
-        'step_3_description' => 'You can add links to your social media accounts so that your shop can be found easily on your social media pages.',
-        'action' => 'Save',
-    ],
 
     'settings' => [
         'title' => 'Store Setting',

diff --git a/packages/admin/resources/lang/fr/forms.php b/packages/admin/resources/lang/fr/forms.php
@@ -83,6 +83,7 @@
         'logo' => 'Logo',
         'cover_photo' => 'Photo de couverture',
         'about' => 'A propos',
+        'default_currency' => 'Devise par défault',
         'currency' => 'Devise',
         'currencies' => 'Devises',
         'longitude' => 'Longitude',

diff --git a/packages/admin/resources/lang/fr/pages/onboarding.php b/packages/admin/resources/lang/fr/pages/onboarding.php
@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+
+    'title' => 'Configuration de la boutique',
+    'step_one_title' => 'Information',
+    'step_one_description' => 'Fournissez des informations utiles pour votre magasin.',
+    'step_two_title' => 'Adresse',
+    'step_two_description' => 'Indiquez l\'adresse du magasin.',
+    'step_tree_title' => 'Liens sociaux',
+    'step_tree_description' => 'Liens vers vos comptes de médias sociaux.',
+
+    'step' => 'Étape :step sur 3',
+    'shop_configuration' => 'Configuration de la boutique',
+    'step_1' => 'Étape 1 - Informations sur le magasin',
+    'tell_about' => 'Parlez-nous de votre boutique',
+    'step_1_description' => 'Ces informations seront utiles si vous souhaitez que les utilisateurs de votre site vous contactent directement par e-mail ou par votre numéro de téléphone.',
+
+    'step_2' => 'Étape 2 - Informations sur l\'adresse',
+    'address_description' => 'Vous devez préciser l\'adresse et la localisation de votre magasin',
+    'step_2_description' => 'Ne vous inquiétez pas. Vous pouvez modifier ces paramètres à tout moment. Shopper vous permet de commencer par le plus petit niveau afin que vous puissiez voir l\'évolution de votre boutique.',
+
+    'step_3' => 'Étape 3 - Liens sociaux',
+    'social_description' => 'Votre boutique sur les réseaux sociaux.',
+    'step_3_description' => 'Vous pouvez ajouter des liens vers vos comptes de médias sociaux afin que votre boutique puisse être trouvée facilement sur vos pages de médias sociaux.',
+    'action' => 'Configurer ma boutique',
+
+    'about_description' => 'Vous pouvez rajouter ces informations sur une page "À propos" de votre site web.',
+    'currencies_description' => 'Ce sont les devises dans lesquels les produits seront vendus dans votre boutique',
+    'currency_description' => "Il s'agit de la devise principale qui sera affiché sur votre boutique.",
+
+];
diff --git a/packages/admin/resources/lang/fr/pages/settings.php b/packages/admin/resources/lang/fr/pages/settings.php
@@ -6,34 +6,6 @@
 
     'empty_country_selector' => 'Veuillez sélectionner un pays',
     'logo_description' => 'Le logo de votre boutique qui sera visible sur votre site. Cet actif apparaîtra sur vos factures.',
-    'about_description' => 'Vous pouvez rajouter ces informations sur une page "À propos" de votre site web.',
-    'currency_description' => 'Il s\'agit de la devise dans laquelle vos produits sont vendus. Après votre première vente, la devise est verrouillée et ne peut être modifiée.',
-    'mapbox_disabled' => 'Mapbox n\'a pas été activée.',
-
-    'initialization' => [
-        'title' => 'Configuration de la boutique',
-        'step_one_title' => 'Information',
-        'step_one_description' => 'Fournissez des informations utiles pour votre magasin.',
-        'step_two_title' => 'Adresse',
-        'step_two_description' => 'Indiquez l\'adresse du magasin.',
-        'step_tree_title' => 'Liens sociaux',
-        'step_tree_description' => 'Liens vers vos comptes de médias sociaux.',
-
-        'step' => 'Étape :step sur 3',
-        'shop_configuration' => 'Configuration de la boutique',
-        'step_1' => 'Étape 1 - Informations sur le magasin',
-        'tell_about' => 'Parlez-nous de votre boutique',
-        'step_1_description' => 'Ces informations seront utiles si vous souhaitez que les utilisateurs de votre site vous contactent directement par e-mail ou par votre numéro de téléphone.',
-
-        'step_2' => 'Étape 2 - Informations sur l\'adresse',
-        'address_description' => 'Vous devez préciser l\'adresse et la localisation de votre magasin',
-        'step_2_description' => 'Ne vous inquiétez pas. Vous pouvez modifier ces paramètres à tout moment. Shopper vous permet de commencer par le plus petit niveau afin que vous puissiez voir l\'évolution de votre boutique.',
-
-        'step_3' => 'Étape 3 - Liens sociaux',
-        'social_description' => 'Votre boutique sur les réseaux sociaux.',
-        'step_3_description' => 'Vous pouvez ajouter des liens vers vos comptes de médias sociaux afin que votre boutique puisse être trouvée facilement sur vos pages de médias sociaux.',
-        'action' => 'Configurer ma boutique',
-    ],
 
     'settings' => [
         'title' => 'Réglage du magasin',

diff --git a/packages/admin/resources/views/components/brand.blade.php b/packages/admin/resources/views/components/brand.blade.php
@@ -1,5 +1,9 @@
 @if (filled($brand = config('shopper.admin.brand')))
     <img {{ $attributes }} src="{{ asset($brand) }}" alt="{{ config('app.name') }}" />
 @else
-    <img {{ $attributes }} src="{{ asset('shopper/images/shopper-icon.svg') }}" alt="Laravel Shopper" />
+    <img
+        {{ $attributes }}
+        src="{{ asset(shopper()->prefix() . '/images/shopper-icon.svg') }}"
+        alt="Laravel Shopper"
+    />
 @endif
diff --git a/packages/admin/resources/views/components/favicons.blade.php b/packages/admin/resources/views/components/favicons.blade.php
@@ -1,8 +1,26 @@
-<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('shopper/images/favicons/apple-touch-icon.png') }}" />
-<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('shopper/images/favicons/favicon-32x32.png') }}" />
-<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('shopper/images/favicons/favicon-16x16.png') }}" />
-<link rel="manifest" href="{{ asset('shopper/images/favicons/site.webmanifest') }}" />
-<link rel="mask-icon" href="{{ asset('shopper/images/favicons/safari-pinned-tab.svg') }}" color="#5bbad5" />
+<link
+    rel="apple-touch-icon"
+    sizes="180x180"
+    href="{{ asset(shopper()->prefix() . '/images/favicons/apple-touch-icon.png') }}"
+/>
+<link
+    rel="icon"
+    type="image/png"
+    sizes="32x32"
+    href="{{ asset(shopper()->prefix() . '/images/favicons/favicon-32x32.png') }}"
+/>
+<link
+    rel="icon"
+    type="image/png"
+    sizes="16x16"
+    href="{{ asset(shopper()->prefix() . '/images/favicons/favicon-16x16.png') }}"
+/>
+<link rel="manifest" href="{{ asset(shopper()->prefix() . '/images/favicons/site.webmanifest') }}" />
+<link
+    rel="mask-icon"
+    href="{{ asset(shopper()->prefix() . '/images/favicons/safari-pinned-tab.svg') }}"
+    color="#5bbad5"
+/>
 <meta name="msapplication-TileColor" content="#ffffff" />
 <meta name="apple-mobile-web-app-title" content="{{ config('app.name') }}" />
 <meta name="application-name" content="{{ config('app.name') }}" />

diff --git a/packages/admin/resources/views/components/layouts/app/sidebar/content.blade.php b/packages/admin/resources/views/components/layouts/app/sidebar/content.blade.php
@@ -11,7 +11,7 @@ class="relative flex items-start rounded-lg bg-white px-3 py-2.5 shadow-sm ring-
                 </x-shopper::link>
                 <div class="ml-3 truncate">
                     <h4 class="truncate font-heading text-sm font-medium leading-4 text-gray-900 dark:text-white">
-                        {{ config('app.name') }}
+                        {{ shopper_setting('name') }}
                     </h4>
                     <span class="text-sm text-gray-500 dark:text-gray-400">
                         {{ shopper_setting('email') }}
@@ -41,7 +41,7 @@ class="relative flex items-start rounded-lg bg-white px-3 py-2.5 shadow-sm ring-
 
                 <a href="https://laravelshopper.dev" target="_blank" class="sh-sidebar-item sh-sidebar-item-inactive">
                     <x-untitledui-code-browser class="mr-2 h-5 w-5" stroke-width="1.5" aria-hidden="true" />
-                    {{ __('shopper::messages.dashboard.cards.doc_title') }}
+                    {{ __('shopper::pages/dashboard.cards.doc_title') }}
                 </a>
             </div>
         </div>

diff --git a/packages/admin/resources/views/livewire/components/initialization/store-address.blade.php b/packages/admin/resources/views/livewire/components/initialization/store-address.blade.php
@@ -2,7 +2,7 @@
     @include('shopper::livewire.components.initialization.steps')
 
     <form wire:submit="save" class="flex-1">
-        <div>
+        <div class="space-y-10">
             <div>
                 <div class="flex items-center space-x-4">
                     <x-untitledui-globe-05
@@ -11,77 +11,30 @@ class="h-6 w-6 text-gray-400 dark:text-gray-500"
                         stroke-width="1"
                     />
                     <span class="text-sm font-medium text-primary-600 dark:text-primary-500">
-                        {{ __('shopper::pages/settings.initialization.step_2') }}
+                        {{ __('shopper::pages/onboarding.step_2') }}
                     </span>
                 </div>
                 <div class="mt-3">
                     <h2 class="font-heading text-2xl font-medium text-gray-900 dark:text-white">
-                        {{ __('shopper::pages/settings.initialization.address_description') }}
+                        {{ __('shopper::pages/onboarding.address_description') }}
                     </h2>
                     <p class="mt-3 text-sm leading-6 text-gray-500 dark:text-gray-300 lg:max-w-2xl">
-                        {{ __('shopper::pages/settings.initialization.step_2_description') }}
+                        {{ __('shopper::pages/onboarding.step_2_description') }}
                     </p>
                 </div>
             </div>
             <div class="mt-10">
-                <div class="grid grid-cols-3 gap-6">
-                    <x-shopper::forms.group
-                        :label="__('shopper::layout.forms.label.street_address')"
-                        for="street_address"
-                        class="col-span-2"
-                        isRequired
-                    >
-                        <x-shopper::forms.input
-                            wire:model="street_address"
-                            id="street_address"
-                            type="text"
-                            placeholder="Akwa Avenue 34..."
-                            required
-                        />
-                    </x-shopper::forms.group>
-                    <x-shopper::forms.group
-                        :label="__('shopper::layout.forms.label.postal_code')"
-                        for="postal_code"
-                        isRequired
-                    >
-                        <x-shopper::forms.input
-                            wire:model="postal_code"
-                            id="postal_code"
-                            type="text"
-                            placeholder="00237"
-                            required
-                        />
-                    </x-shopper::forms.group>
-                    <x-shopper::forms.group
-                        :label="__('shopper::layout.forms.label.city')"
-                        for="city"
-                        :is-required="true"
-                    >
-                        <x-shopper::forms.input wire:model="city" id="city" type="text" required />
-                    </x-shopper::forms.group>
-                    <div class="col-span-2" x-data="internationalNumber('#phone_number')" wire:ignore>
-                        <x-shopper::label for="phone_number" :value="__('shopper::layout.forms.label.phone_number')" />
-                        <div class="mt-1 max-w-lg">
-                            <x-shopper::forms.input
-                                wire:model="phone_number"
-                                id="phone_number"
-                                type="tel"
-                                class="w-full"
-                                autocomplete="off"
-                            />
-                        </div>
-                    </div>
-                </div>
+                {{ $this->form }}
             </div>
         </div>
         <div class="mt-8 border-t border-dashed border-gray-200 pt-10 dark:border-gray-700">
             <div class="flex items-center justify-between space-x-4">
                 <x-shopper::buttons.default type="button" wire:click="previousStep">
-                    {{ __('shopper::layout.forms.actions.back') }}
+                    {{ __('shopper::forms.actions.back') }}
                 </x-shopper::buttons.default>
                 <x-shopper::buttons.primary type="submit" wire:loading.attr="disabled">
                     <x-shopper::loader wire:loading wire:target="save" class="text-white" aria-hidden="true" />
-                    {{ __('shopper::layout.forms.actions.next') }}
+                    {{ __('shopper::forms.actions.next') }}
                 </x-shopper::buttons.primary>
             </div>
         </div>