feat(nuxt3-app): my account ssr data (SWF-199)

.changeset/twelve-planes-refuse.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Moving data rendering to CSR

templates/vue-demo-store/components/account/AccountPersonalData.vue

@@ -18,13 +18,13 @@ const updated = ref(false);
 const isUpdating = ref(false);
 
 const state = reactive({
-  firstName: user.value?.firstName !== undefined ? user.value.firstName : "",
-  lastName: user.value?.lastName !== undefined ? user.value.lastName : "",
-  email: user.value?.email !== undefined ? user.value.email : "",
+  firstName: "",
+  lastName: "",
+  email: "",
   emailConfirmation: "",
   password: "",
-  salutationId: user.value?.email !== undefined ? user.value.email : "",
-  title: user.value?.title !== undefined ? user.value.title : "",
+  salutationId: "",
+  title: "",
 });
 
 const isEmailChanging = computed(() => state.email !== user.value?.email);
@@ -110,6 +110,14 @@ const invokeUpdate = async (): Promise<void> => {
     errorMessages.value = e.messages.map((m) => m.detail);
   }
 };
+onMounted(async () => {
+  await refreshUser();
+  state.firstName = user.value?.firstName || "";
+  state.lastName = user.value?.lastName || "";
+  state.email = user.value?.email || "";
+  state.salutationId = user.value?.salutationId || "";
+  state.title = user.value?.title || "";
+});
 </script>
 <template>
   <div class="space-y-8">

templates/vue-demo-store/pages/account/address.vue

@@ -3,14 +3,15 @@ import { SharedModal } from "~~/components/shared/SharedModal.vue";
 definePageMeta({
   layout: "account",
 });
-
+const loadingData = ref(true);
 const modal = inject<SharedModal>("modal") as SharedModal;
 const { getCountries } = useCountries();
 const { getSalutations } = useSalutations();
 const { customerAddresses, loadCustomerAddresses } = useAddress();
 
-await useAsyncData("getCustomerAddresses", () => {
-  return loadCustomerAddresses();
+onBeforeMount(async () => {
+  await loadCustomerAddresses();
+  loadingData.value = false;
 });
 </script>
 
@@ -23,13 +24,25 @@ await useAsyncData("getCustomerAddresses", () => {
       View your current default addresses or add new ones.
     </p>
     <div class="grid grid-cols-6 gap-12 mt-8">
-      <AccountAddressCard
-        v-for="address in customerAddresses"
-        :key="address.id"
-        :address="address"
-        :countries="getCountries"
-        :salutations="getSalutations"
-      />
+      <div v-if="loadingData" class="col-span-6 lg:col-span-3 max-w-md">
+        <div class="flex mb-2 space-x-2">
+          <div class="w-36 bg-gray-300 h-6 rounded-md" />
+          <div class="w-6 bg-gray-300 h-6 rounded-md" />
+        </div>
+
+        <div class="w-36 bg-gray-300 h-4 rounded-md mb-2" />
+        <div class="w-36 bg-gray-300 h-4 rounded-md mb-2" />
+        <div class="w-36 bg-gray-300 h-4 rounded-md" />
+      </div>
+      <template v-else>
+        <AccountAddressCard
+          v-for="address in customerAddresses"
+          :key="address.id"
+          :address="address"
+          :countries="getCountries"
+          :salutations="getSalutations"
+        />
+      </template>
     </div>
     <button
       class="group relative justify-center py-2 px-4 my-8 border border-transparent text-sm font-medium rounded-md text-white bg-brand-primary hover:bg-brand-dark focus:outline-none focus:ring-2 focus:ring-brand-light"

templates/vue-demo-store/pages/account/index.vue

@@ -40,9 +40,10 @@ const updateNewsletterStatus = async () => {
     pushError("Something goes wrong please try again later");
   }
 };
+
 onBeforeMount(async () => {
   if (user?.value?.salutationId) {
-    loadSalutation(user.value.salutationId);
+    await loadSalutation(user.value.salutationId);
   }
 });
 </script>

templates/vue-demo-store/pages/account/payment.vue

@@ -15,31 +15,31 @@ const emits = defineEmits<{
 
 const { paymentMethods, getPaymentMethods } = useCheckout();
 const { setDefaultPaymentMethod } = useUser();
-const { paymentMethod, setPaymentMethod } = useSessionContext();
+const { paymentMethod: selectedPaymentMethod, setPaymentMethod } =
+  useSessionContext();
 const { pushSuccess } = useNotifications();
 
-const isLoading = ref(false);
+const isLoading = ref(true);
 
-onMounted(async () => {
-  isLoading.value = true;
-  await getPaymentMethods();
-  isLoading.value = false;
-});
-
-const formData = ref({
-  paymentMethod: paymentMethod.value?.id || "",
+const formData = reactive({
+  paymentMethod: "",
 });
 
 const invokeSave = async (): Promise<void> => {
   try {
-    await setPaymentMethod({ id: formData.value.paymentMethod });
-    await setDefaultPaymentMethod(formData.value.paymentMethod);
+    await setPaymentMethod({ id: formData.paymentMethod });
+    await setDefaultPaymentMethod(formData.paymentMethod);
     emits("success");
     pushSuccess("Set default payment method successfully");
   } catch (error) {
     console.error("error set default payment method", error);
   }
 };
+
+onMounted(async () => {
+  await getPaymentMethods();
+  isLoading.value = false;
+});
 </script>
 
 <template>
@@ -73,6 +73,7 @@ const invokeSave = async (): Promise<void> => {
               :id="paymentMethod.id"
               v-model="formData.paymentMethod"
               :value="paymentMethod.id"
+              :checked="selectedPaymentMethod?.id === paymentMethod.id"
               name="payment-method"
               type="radio"
               class="focus:ring-brand-light h-4 w-4 text-brand-primary border-gray-300"