Redirect to normal listing page if listing is already published

src/containers/ListingPage/ListingPage.js

@@ -24,6 +24,7 @@ import {
   Page,
   ResponsiveImage,
   NamedLink,
+  NamedRedirect,
   Modal,
   ImageCarousel,
   InlineTextButton,
@@ -262,6 +263,24 @@ export class ListingPageComponent extends Component {
       ? ensureOwnListing(getOwnListing(listingId))
       : ensureListing(getListing(listingId));
 
+    const isApproved =
+      currentListing.id && currentListing.attributes.state !== LISTING_STATE_PENDING_APPROVAL;
+
+    const pendingIsApproved = isPendingApprovalVariant && isApproved;
+
+    // If a /pending-approval URL is shared, the UI requires
+    // authentication and attempts to fetch the listing from own
+    // listings. This will fail with 403 Forbidden if the author is
+    // another user. We use this information to try to fetch the
+    // public listing.
+    const pendingOtherUsersListing =
+      isPendingApprovalVariant && showListingError && showListingError.status === 403;
+    const shouldShowPublicListingPage = pendingIsApproved || pendingOtherUsersListing;
+
+    if (shouldShowPublicListingPage) {
+      return <NamedRedirect name="ListingPage" params={params} search={location.search} />;
+    }
+
     const listingSlug = params.slug || createSlug(currentListing.attributes.title || '');
     const {
       description = '',
@@ -705,7 +724,9 @@ ListingPageComponent.propTypes = {
   history: shape({
     push: func.isRequired,
   }).isRequired,
-  location: object.isRequired,
+  location: shape({
+    search: string,
+  }).isRequired,
 
   unitType: propTypes.bookingUnitType,
   // from injectIntl

src/routeConfiguration.js

@@ -97,6 +97,7 @@ const routeConfiguration = () => {
       path: '/l/:slug/:id/:variant',
       name: 'ListingPageVariant',
       auth: true,
+      authPage: 'LoginPage',
       component: props => <ListingPage {...props} />,
       loadData: ListingPage.loadData,
     },

src/util/types.js

@@ -393,6 +393,7 @@ export const ERROR_CODE_TOO_MANY_VERIFICATION_REQUESTS = 'email-too-many-verific
 export const ERROR_CODE_UPLOAD_OVER_LIMIT = 'request-upload-over-limit';
 export const ERROR_CODE_VALIDATION_INVALID_PARAMS = 'validation-invalid-params';
 export const ERROR_CODE_NOT_FOUND = 'not-found';
+export const ERROR_CODE_FORBIDDEN = 'forbidden';
 
 const ERROR_CODES = [
   ERROR_CODE_TRANSACTION_LISTING_NOT_FOUND,
@@ -407,6 +408,7 @@ const ERROR_CODES = [
   ERROR_CODE_UPLOAD_OVER_LIMIT,
   ERROR_CODE_VALIDATION_INVALID_PARAMS,
   ERROR_CODE_NOT_FOUND,
+  ERROR_CODE_FORBIDDEN,
 ];
 
 // API error