Skip to content

Commit

Permalink
Merge branch 'fix/view-subscription' into 'master'
Browse files Browse the repository at this point in the history 
fix(subscription): safely access possibly null values

See merge request schema/origin-storefront!108
  • Loading branch information
@rodrigo-swell
rodrigo-swell committed Nov 9, 2021
2 parents 63576d6 + 876125b commit 0c8a0b5
Showing 1 changed file with 37 additions and 34 deletions.
71 changes: 37 additions & 34 deletions pages/account/subscriptions/_id/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<!-- Breadcrumb -->
<NuxtLink
:to="localePath('/account/subscriptions/')"
class="flex items-center cursor-pointer mb-6"
class="flex items-center mb-6 cursor-pointer"
>
<BaseIcon icon="uil:angle-left" size="sm" /><span class="ml-1">
{{ $t('account.subscriptions.id.backToSubscriptions') }}
Expand All @@ -14,15 +14,15 @@

<!-- Fetch loader -->
<div v-if="$fetchState.pending" class="container">
<div class="loader-el w-1/3 h-7 mb-6" />
<div class="loader-el w-3/5 h-2 mb-4" />
<div class="loader-el w-2/5 h-2 mb-8" />
<div class="w-1/3 mb-6 loader-el h-7" />
<div class="w-3/5 h-2 mb-4 loader-el" />
<div class="w-2/5 h-2 mb-8 loader-el" />
</div>

<div v-else>
<div class="container pb-10 border-b border-primary-med">
<div class="pb-6 border-b border-primary-med mb-6">
<h2 class="text-2xl pb-6">
<div class="pb-6 mb-6 border-b border-primary-med">
<h2 class="pb-6 text-2xl">
{{ subscription.product.name }}
</h2>

Expand All @@ -48,9 +48,9 @@
<div
v-for="(item, index) in planItems"
:key="`plan-item-${index}`"
class="w-full flex py-6 border-b border-primary-light"
class="flex w-full py-6 border-b border-primary-light"
>
<div class="min-w-26 mr-6">
<div class="mr-6 min-w-26">
<VisualMedia :source="selectThumbnail(item)" sizes="120px" />
</div>

Expand Down Expand Up @@ -83,13 +83,14 @@
}}</span>

<div class="mb-6 md:grid md:grid-cols-2 md:col-gap-4">
<div class="w-full flex py-6 border-b border-primary-light">
<div class="flex w-full py-6 border-b border-primary-light">
<div
v-if="
subscription.variant &&
subscription.variant.images &&
subscription.variant.images.length
"
class="min-w-26 mr-6"
class="mr-6 min-w-26"
>
<VisualMedia
:source="subscription.variant.images[0].file"
Expand All @@ -99,10 +100,11 @@

<div
v-else-if="
subscription.product &&
subscription.product.images &&
subscription.product.images.length
"
class="min-w-26 mr-6"
class="mr-6 min-w-26"
>
<VisualMedia
:source="subscription.product.images[0].file"
Expand Down Expand Up @@ -136,7 +138,7 @@
</div>
</template>

<div class="bg-primary-lightest rounded shadow-md">
<div class="rounded shadow-md bg-primary-lightest">
<div
class="p-4"
:class="{ 'border-b border-primary-med': status !== 'canceled' }"
Expand Down Expand Up @@ -214,7 +216,7 @@

<BaseButton
v-if="status !== 'canceled' && allowPlanEdit"
class="w-full block mt-6"
class="block w-full mt-6"
fit="auto"
appearance="dark"
:label="$t('account.subscriptions.id.editPlan')"
Expand All @@ -229,13 +231,13 @@
<div class="container pt-4">
<!-- Delivery details -->
<template v-if="shipping">
<p class="text-base font-semibold pb-4">
<p class="pb-4 text-base font-semibold">
{{ $t('account.subscriptions.id.deliveryDetails') }}
</p>

<div class="mb-8">
<div class="rounded text-sm border border-primary-med p-4">
<p class="font-semibold pb-2">
<div class="p-4 text-sm border rounded border-primary-med">
<p class="pb-2 font-semibold">
{{ $t('account.subscriptions.id.deliveryAddress') }}
</p>
<p>
Expand All @@ -247,9 +249,9 @@
</div>
<div
v-if="shipping.phone"
class="rounded text-sm border border-primary-med p-4 -mt-px"
class="p-4 -mt-px text-sm border rounded border-primary-med"
>
<p class="font-semibold pb-2">
<p class="pb-2 font-semibold">
{{ $t('account.subscriptions.id.phoneNumber') }}
</p>
<p>
Expand All @@ -258,9 +260,9 @@
</div>
<div
v-if="shipping && shipping.service"
class="rounded text-sm border border-primary-med p-4 -mt-px"
class="p-4 -mt-px text-sm border rounded border-primary-med"
>
<p class="font-semibold pb-2">
<p class="pb-2 font-semibold">
{{ $t('account.subscriptions.id.deliveryMethod') }}
</p>
<p v-if="shipping.serviceName">
Expand All @@ -286,22 +288,23 @@

<!-- Payment details -->
<div class="mb-8">
<p class="text-base font-semibold pb-4">
<p class="pb-4 text-base font-semibold">
{{ $t('account.subscriptions.id.paymentMethod') }}
</p>

<div
class="
grid grid-cols-1
md:grid-cols-2
border
rounded
border border-primary-med
md:grid-cols-2
border-primary-med
"
>
<!-- Method: Card -->
<div
v-if="billing.card"
class="md:border-b-0 md:border-r border-b border-primary-med p-4"
v-if="billing && billing.card"
class="p-4 border-b md:border-b-0 md:border-r border-primary-med"
>
<div class="flex mb-0 md:mb-4">
<BrandCardIcon
Expand All @@ -310,18 +313,18 @@
/>

<span
class="ml-0 md:ml-auto pr-4 md:pl-4 text-sm font-semibold"
class="pr-4 ml-0 text-sm font-semibold md:ml-auto md:pl-4"
>{{ billing.card.brand }}</span
>

<div class="text-base md:hidden ml-auto">
<div class="ml-auto text-base md:hidden">
<span class="tracking-large">····</span>
<span>&nbsp;{{ billing.card.last4 }}</span>
<span class="ml-6">{{ cardExpDate }}</span>
</div>
</div>

<div class="hidden md:flex mb-4">
<div class="hidden mb-4 md:flex">
<div class="text-base">
<span class="tracking-large">···· ····</span>
<span>&nbsp;{{ billing.card.last4 }}</span>
Expand All @@ -331,9 +334,9 @@
</div>
</div>

<div v-if="billing" class="flex md:text-sm p-4">
<div v-if="billing" class="flex p-4 md:text-sm">
<div>
<p class="font-semibold pb-2">
<p class="pb-2 font-semibold">
{{ $t('account.subscriptions.id.billingAddress') }}
</p>
<p>
Expand All @@ -347,7 +350,7 @@

<button
v-if="status !== 'canceled'"
class="px-2 ml-auto mt-auto"
class="px-2 mt-auto ml-auto"
@click="editBillingAddressPopupIsActive = true"
>
{{ $t('account.subscriptions.id.editBillingAddress') }}
Expand All @@ -363,7 +366,7 @@
class="container border-t border-b border-primary-med"
>
<div class="py-10">
<p class="text-base font-semibold pb-4">
<p class="pb-4 text-base font-semibold">
{{
status === 'paused'
? $t('account.subscriptions.id.resume.title')
Expand Down Expand Up @@ -397,7 +400,7 @@
<div class="container">
<!-- Orders -->
<div v-if="orders" class="mb-10">
<p class="text-base font-semibold pt-10 pb-4">
<p class="pt-10 pb-4 text-base font-semibold">
{{ $t('account.subscriptions.id.orders') }}
</p>

Expand All @@ -411,7 +414,7 @@
<span class="label-sm-bold">{{
formatDate(order.dateCreated)
}}</span>
<span class="label-sm ml-auto">#{{ order.number }}</span>
<span class="ml-auto label-sm">#{{ order.number }}</span>
</NuxtLink>
</div>

Expand Down

0 comments on commit 0c8a0b5

Please sign in to comment.